simplify layout

app/app/(dashboard)/dashboard/_components/navbar/index.tsx

@@ -21,8 +21,8 @@ const SIDEBAR_ITEMS = [
 export default async function Navbar() {
   const session = await auth();
   return (
-    <div className="flex flex-row space-x-12 space-y-0 mr-4">
-      <aside className="-mx-4 min-h-dvh bg-slate-100">
+    <div className="flex flex-row space-x-12 space-y-0">
+      <aside className="min-h-dvh bg-slate-100">
         <div className="flex flex-col items-center justify-center p-4 gap-4">
           <Image
             src="/42bangkok-logo-right.svg"

app/app/(dashboard)/dashboard/batch-add-alt/_components/login-form/index.tsx

@@ -0,0 +1,74 @@
+"use client";
+
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useForm } from "react-hook-form";
+import { z } from "zod";
+
+import { Button } from "@/components/ui/button";
+import {
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@/components/ui/form";
+import { Textarea } from "@/components/ui/textarea";
+import { toast } from "@/components/ui/use-toast";
+
+const FormSchema = z.object({
+  bio: z
+    .string()
+    .min(10, {
+      message: "Bio must be at least 10 characters.",
+    })
+    .max(160, {
+      message: "Bio must not be longer than 30 characters.",
+    }),
+});
+
+export function LoginsForm() {
+  const form = useForm<z.infer<typeof FormSchema>>({
+    resolver: zodResolver(FormSchema),
+  });
+
+  function onSubmit(data: z.infer<typeof FormSchema>) {
+    toast({
+      title: "You submitted the following values:",
+      description: (
+        <pre className="mt-2 w-[340px] rounded-md bg-slate-950 p-4">
+          <code className="text-white">{JSON.stringify(data, null, 2)}</code>
+        </pre>
+      ),
+    });
+  }
+
+  return (
+    <Form {...form}>
+      <form onSubmit={form.handleSubmit(onSubmit)} className="w-3/4 space-y-6">
+        <FormField
+          control={form.control}
+          name="bio"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>Logins</FormLabel>
+              <FormControl>
+                <Textarea
+                  placeholder="lpumidol aoudin"
+                  className="resize-none"
+                  {...field}
+                />
+              </FormControl>
+              <FormDescription>
+                Separate multiple logins with a space.
+              </FormDescription>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+        <Button type="submit">Go</Button>
+      </form>
+    </Form>
+  );
+}

app/app/(dashboard)/dashboard/batch-add-alt/page.tsx

@@ -0,0 +1,11 @@
+import { TypographyH1 } from "@/components/typographies";
+import { LoginsForm } from "./_components/login-form";
+
+export default function Page() {
+  return (
+    <main className="w-full">
+      <TypographyH1>Batch Add Alt</TypographyH1>
+      <LoginsForm />
+    </main>
+  );
+}

app/app/(dashboard)/dashboard/cadet/[login]/page.tsx

@@ -20,7 +20,6 @@ export default async function Page({ params }: { params: { login: string } }) {
   };
   return (
     <main>
-      <Separator className="m-4" />
       <div className="flex gap-4">
         <div>
           <Avatar className="w-24 h-24 rounded">
@@ -45,11 +44,11 @@ export default async function Page({ params }: { params: { login: string } }) {
           </div>
         </div>
       </div>
-      <Separator className="m-4" />
+      <Separator className="mt-2 mb-2 w-2/3" />
       <div className="flex flex-col gap-4">
         <WalletForm {...walletFormProps} />
       </div>
-      <Separator className="m-4" />
+      <Separator className="m-2 mb-2 w-2/3" />
       <JsonData data={user} />
     </main>
   );

app/app/(dashboard)/dashboard/cadet/_components/search-input/index.tsx

@@ -15,9 +15,9 @@ export const SearchInput = () => {
     }
   };
   return (
-    <div className="flex m-4 ml-0">
+    <div className="flex m-4 ml-0 w-1/3">
       <Input
-        className="rounded-r-none max-w-32"
+        className="rounded-r-none debug"
         onChange={(e) => setSearch(e.target.value)}
         placeholder="Search"
         name="search"

app/app/(dashboard)/dashboard/cadet/layout.tsx

@@ -2,9 +2,9 @@ import { SearchInput } from "./_components/search-input";
 
 export default function Layout({ children }: { children: React.ReactNode }) {
   return (
-    <>
+    <div>
       <SearchInput />
       {children}
-    </>
+    </div>
   );
 }

app/app/(dashboard)/dashboard/layout.tsx

@@ -4,7 +4,7 @@ export default function Layout({ children }: { children: React.ReactNode }) {
   return (
     <>
       <Navbar />
-      <div className="w-full pl-4 pt-4">{children}</div>
+      <div className="w-full pt-4 pl-4 pr-4">{children}</div>
     </>
   );
 }