first commit

components/auth/signup-form.tsx

@@ -0,0 +1,167 @@
+"use client";
+import { Button } from "@/components/ui/button";
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@/components/ui/form";
+import { Input } from "@/components/ui/input";
+import { signUpFormSchema } from "@/lib/schemas";
+import { zodResolver } from "@hookform/resolvers/zod";
+import Link from "next/link";
+import { useSearchParams } from "next/navigation";
+
+import { useForm } from "react-hook-form";
+import { toast } from "sonner";
+import type { z } from "zod";
+import { DatePicker } from "../ui/datepicker";
+
+
+export default function SignUpForm() {
+  const params = useSearchParams();
+  console.log(params);
+  const phone_number = params.get("phone_number");
+  const form = useForm<z.infer<typeof signUpFormSchema>>({
+    resolver: zodResolver(signUpFormSchema),
+    defaultValues: {
+      phoneNumber: phone_number ?? "",
+      name: "",
+      id_card: "",
+      house_name: "",
+      island: "F.Dharanboodhoo",
+    },
+  });
+
+  function onSubmit(values: z.infer<typeof signUpFormSchema>) {
+    console.log(values);
+  }
+
+  return (
+    <Form {...form}>
+      <form
+        onSubmit={form.handleSubmit(onSubmit)}
+        className="max-w-xs w-full bg-white dark:bg-transparent dark:border-2 shadow rounded-lg mx-auto"
+      >
+        <h4 className="text-center rounded m-2 text-xl font-bold text-gray-600 bg-gray-200 py-4">
+          Sign up
+        </h4>
+        <div className="py-2 px-4 my-2">
+          <FormField
+            control={form.control}
+            name="name"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>Name</FormLabel>
+                <FormControl>
+                  <Input placeholder="eg: Shihaam" type="text" {...field} />
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+          <FormField
+            control={form.control}
+            name="id_card"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>ID Card</FormLabel>
+                <FormControl>
+                  <Input placeholder="Axxxxxx" type="" {...field} />
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+          <FormField
+            control={form.control}
+            name="island"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>Island</FormLabel>
+                <FormControl>
+                  <Input
+                    placeholder="F.Dharanboodhoo"
+                    disabled
+                    type=""
+                    {...field}
+                  />
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+          <FormField
+            control={form.control}
+            name="house_name"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>House Name</FormLabel>
+                <FormControl>
+                  <Input placeholder="eg: Skyvilla" type="text" {...field} />
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+          <FormField
+            control={form.control}
+            name="dob"
+            render={({ field }) => (
+              <FormItem className="flex flex-col mt-2">
+                <FormLabel>Date of birth</FormLabel>
+
+                <DatePicker
+                  date={field.value}
+                  setDate={field.onChange}
+                />
+
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+          <FormField
+            control={form.control}
+            name="phoneNumber"
+            render={({ field }) => (
+              <FormItem className="flex flex-col items-start mt-2">
+                <FormLabel>Phone number</FormLabel>
+                <FormControl className="w-full">
+                  <div className="flex rounded-lg shadow-sm shadow-black/5">
+                    <div className="relative">
+                      <span
+                        className="peer inline-flex h-full appearance-none items-center rounded-none rounded-s-lg border border-input bg-background pe-4 ps-3 text-sm text-muted-foreground transition-shadow hover:bg-accent hover:text-accent-foreground focus:z-10 focus-visible:border-ring focus-visible:text-foreground focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring/20 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50"
+                        aria-label="Protocol"
+                      >
+                        <option value="https://">+960</option>
+                      </span>
+                    </div>
+                    <Input
+                      className="-ms-px rounded-s-none shadow-none focus-visible:z-10"
+                      // disabled={Boolean(phone_number ?? "")}
+                      placeholder="9xxxxxx / 7xxxxxx"
+                      {...field}
+                    />
+                  </div>
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+          <Button className="mt-4 w-full" type="submit">
+            Submit
+          </Button>
+        </div>
+        <div className="mb-4 text-center text-sm">
+          Already have an account?{" "}
+          <Link href="login" className="underline">
+            login
+          </Link>
+        </div>
+
+      </form>
+    </Form>
+  );
+}