feat: attempt to fix the crud with auth

components/Button.tsx

@@ -0,0 +1,19 @@
+import { Slot } from '@radix-ui/react-slot';
+import { cn } from '@utils/cn';
+import * as React from 'react';
+
+export type ButtonProps = {
+  asChild?: boolean;
+} & React.ButtonHTMLAttributes<HTMLButtonElement>;
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : 'button';
+    return (
+      <Comp className={cn('btn-grad', 'btn-grad-hover')} ref={ref} {...props} />
+    );
+  }
+);
+Button.displayName = 'Button';
+
+export { Button };

components/FormControl.tsx

@@ -0,0 +1,26 @@
+import { useFormField } from '@hooks/useFormField';
+import { Slot } from '@radix-ui/react-slot';
+import * as React from 'react';
+
+export const FormControl = React.forwardRef<
+  React.ElementRef<typeof Slot>,
+  React.ComponentPropsWithoutRef<typeof Slot>
+>(({ ...props }, ref) => {
+  const { error, formItemId, formDescriptionId, formMessageId } =
+    useFormField();
+
+  return (
+    <Slot
+      ref={ref}
+      id={formItemId}
+      aria-describedby={
+        !error
+          ? `${formDescriptionId}`
+          : `${formDescriptionId} ${formMessageId}`
+      }
+      aria-invalid={!!error}
+      {...props}
+    />
+  );
+});
+FormControl.displayName = 'FormControl';

components/FormMessage.tsx

@@ -0,0 +1,28 @@
+import { useFormField } from '@hooks/useFormField';
+import { cn } from '@utils/cn';
+import * as React from 'react';
+
+export const FormMessage = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, children, ...props }, ref) => {
+  const { error, formMessageId } = useFormField();
+  const body = error ? String(error?.message) : children;
+
+  return (
+    <>
+      {!body ? null : (
+        <p
+          ref={ref}
+          id={formMessageId}
+          className={cn('text-destructive text-sm font-medium', className)}
+          {...props}
+        >
+          {body}
+        </p>
+      )}
+    </>
+  );
+});
+
+FormMessage.displayName = 'FormMessage';

components/Input.tsx

@@ -0,0 +1,22 @@
+import { cn } from '@utils/cn';
+import * as React from 'react';
+
+const Input = React.forwardRef<
+  HTMLInputElement,
+  React.InputHTMLAttributes<HTMLInputElement>
+>(({ className, type, ...props }, ref) => {
+  return (
+    <input
+      type={type}
+      className={cn(
+        'border-input bg-background ring-offset-background placeholder:text-muted-foreground focus-visible:ring-ring flex h-10 w-full rounded-md border px-3 py-2 text-sm file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
+        className
+      )}
+      ref={ref}
+      {...props}
+    />
+  );
+});
+Input.displayName = 'Input';
+
+export { Input };