Signup

1"use client";
2import React, { useState } from "react";
3import { Input } from "@/components/ui/input";
4import { Button } from "@/components/ui/button";
5import { Label } from "@/components/ui/label";
6import { useContext, createContext } from "react";
7import Link from "next/link";
8import { cn } from "@/lib/utils";
9import Image from "next/image";
10 
11type FormData = {
12  [key: string]: string;
13};
14 
15type SignupContextType = {
16  formData: FormData;
17  handleChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
18  handleSubmit: (e: React.FormEvent) => void;
19};
20 
21const SignupContext = createContext<SignupContextType | undefined>(undefined);
22export const useForm = () => {
23  const context = useContext(SignupContext);
24  if (!context) throw new Error("missing context");
25  return context;
26};
27export default function SignUpForm({
28  children,
29  className,
30  onSubmit,
31}: {
32  children: React.ReactNode;
33  className?: string;
34  onSubmit?: (formData: FormData) => void;
35}) {
36  const [formData, setFormData] = useState({
37    fullName: "",
38    email: "",
39    password: "",
40    confirmPassword: "",
41  });
42 
43  const handleSubmit = (e: React.FormEvent) => {
44    e.preventDefault();
45    onSubmit?.(formData);
46    setFormData({
47      fullName: "",
48      email: "",
49      password: "",
50      confirmPassword: "",
51    });
52  };
53 
54  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
55    setFormData({
56      ...formData,
57      [e.target.name]: e.target.value,
58    });
59  };
60 
61  return (
62    <SignupContext.Provider value={{ formData, handleChange, handleSubmit }}>
63      <form
64        onSubmit={handleSubmit}
65        className={cn(
66          "w-full max-w-xl p-6 shadow-[0_0_10px_rgba(0,0,0,0.1)] rounded-lg bg-background mx-auto",
67          className
68        )}
69      >
70        {children}
71      </form>
72    </SignupContext.Provider>
73  );
74}
75export function SignUpHeader({
76  heading,
77  subheading,
78  className,
79}: {
80  heading: string;
81  subheading: string;
82  className?: string;
83}) {
84  return (
85    <div className={cn("mb-3 text-center", className)}>
86      <h1 className="text-2xl font-semibold text-primary mb-1">{heading}</h1>
87      <p className="text-muted-foreground text-md">{subheading}</p>
88    </div>
89  );
90};
91 
92export function SignUpField({ children, className }: { children: React.ReactNode, className?:string }) {
93  return <div className={cn("space-y-2 py-2.5", className)}>{children}</div>;
94};
95export function SignUpLabel({
96  htmlFor,
97  children,
98  className,
99}: {
100  htmlFor: string;
101// … truncated