Integrate shadcn components (#89)

PR: #89

package.json

@@ -16,6 +16,9 @@
     "cspell": "cspell --show-suggestions --show-context --gitignore ."
   },
   "dependencies": {
+    "@hookform/resolvers": "^3.3.4",
+    "@radix-ui/react-checkbox": "^1.0.4",
+    "@radix-ui/react-label": "^2.0.2",
     "@radix-ui/react-slot": "^1.0.2",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.0",
@@ -24,8 +27,10 @@
     "next-themes": "^0.2.1",
     "react": "^18",
     "react-dom": "^18",
+    "react-hook-form": "^7.49.3",
     "tailwind-merge": "^2.2.0",
-    "tailwindcss-animate": "^1.0.7"
+    "tailwindcss-animate": "^1.0.7",
+    "zod": "^3.22.4"
   },
   "devDependencies": {
     "@types/node": "^20",

src/app/auth/page.tsx

@@ -1,24 +1,24 @@
-import FormAuth from '@/components/pages/auth/FormAuth'
-import ImageCard from '@/components/pages/auth/ImageCard'
+import FormAuth from '@/components/pages/auth/form-auth'
+import ImageCard from '@/components/pages/auth/image-card'
+import Content from '@/components/ui/content'
 import IconGolub from '@/components/ui/icons/IconGolub'
-import ButtonThemeToggle from '@/components/ui/index/ButtonThemeToggle'
-import Layout from '@/components/ui/index/Layout'
+import ThemeToggler from '@/components/ui/index/theme-toggler'
 
 export default function Auth() {
   return (
     <section className="h-screen w-screen bg-gradient-blue-white">
-      <Layout className="flex items-center justify-center dark:bg-none dark:bg-base-gray-8">
-        <div className="card p-7 sm:p-10 flex gap-7 md:gap-[3.75rem] bg-base-white dark:bg-base-black">
+      <Content className="flex items-center justify-center dark:bg-none dark:bg-base-gray-8">
+        <div className="p-7 sm:p-10 flex gap-7 md:gap-[3.75rem] rounded-3xl bg-base-white dark:bg-base-black">
           <ImageCard className="-my-[4.375rem] flex-shrink-0 hidden sm:flex items-center justify-center">
             <IconGolub />
           </ImageCard>
           <div>
             <h1 className="title-lg">Authentication</h1>
-            <FormAuth />
-            <ButtonThemeToggle />
+            <FormAuth className="mt-5" />
+            <ThemeToggler />
           </div>
         </div>
-      </Layout>
+      </Content>
     </section>
   )
 }

src/app/globals.css

@@ -94,20 +94,4 @@
   .caption {
     @apply text-xs uppercase;
   }
-
-  .card {
-    @apply rounded-3xl;
-  }
-
-  .input-placeholder {
-    @apply peer-[:not(:placeholder-shown)]:translate-y-0 peer-[:not(:placeholder-shown)]:top-[0.375rem] peer-[:not(:placeholder-shown)]:text-[0.6875rem] peer-[:not(:placeholder-shown)]:leading-[0.8125rem];
-  }
-
-  .label-checkbox span {
-    @apply peer-checked:border-bright-indigo peer-checked:bg-bright-indigo;
-  }
-
-  .label-checkbox span svg {
-    @apply peer-checked:opacity-100;
-  }
 }