Untitled
unknown
plain_text
25 days ago
16 kB
2
Indexable
"use client" import { useState } from 'react' import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form" import { Input } from "@/components/ui/input" import { Button } from "@/components/ui/button" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { User, Mail, Phone, Calendar, HeartPulse, MapPin } from "lucide-react" import { useForm } from "react-hook-form" import { zodResolver } from "@hookform/resolvers/zod" import * as z from "zod" import Image from "next/image" import { toast } from "sonner" // Validation Schema const profileSchema = z.object({ fullName: z.string().min(2, "Full name is required"), email: z.string().email("Invalid email address"), phone: z.string().regex(/^\+?[1-9]\d{1,14}$/, "Invalid phone number"), dateOfBirth: z.string().regex(/^\d{4}-\d{2}-\d{2}$/, "Invalid date format"), bloodGroup: z.enum(["A+", "A-", "B+", "B-", "O+", "O-", "AB+", "AB-"]), gender: z.enum(["Male", "Female", "Other"]), address: z.object({ street: z.string().min(3, "Street address is required"), city: z.string().min(2, "City is required"), state: z.string().min(2, "State is required"), postalCode: z.string().regex(/^\d{5,6}$/, "Invalid postal code"), country: z.string().min(2, "Country is required") }) }) const ManageProfile = () => { const [isEditing, setIsEditing] = useState(false) const [profileImage, setProfileImage] = useState<string | null>("/metamask.png") // Initialize form with default or fetched user data const form = useForm<z.infer<typeof profileSchema>>({ resolver: zodResolver(profileSchema), defaultValues: { fullName: "Satyam Kumar", email: "satyam.kumar@example.com", phone: "+918765432100", dateOfBirth: "1995-06-15", bloodGroup: "O+", gender: "Male", address: { street: "123 Health Street", city: "Bangalore", state: "Karnataka", postalCode: "560001", country: "India" } } }) const handleProfileImageChange = (e: React.ChangeEvent<HTMLInputElement>) => { const file = e.target.files?.[0] if (file) { const reader = new FileReader() reader.onloadend = () => { setProfileImage(reader.result as string) } reader.readAsDataURL(file) } } const onSubmit = (data: z.infer<typeof profileSchema>) => { // Implement actual update logic here console.log("Profile Update Data:", data) toast.success("Profile Updated Successfully") setIsEditing(false) } return ( <div className="container mx-auto p-6 space-y-6"> <div className="flex justify-between items-center"> <h1 className="text-3xl font-bold">Manage Profile</h1> <Button onClick={() => setIsEditing(!isEditing)} variant={isEditing ? "destructive" : "default"} > {isEditing ? "Cancel" : "Edit Profile"} </Button> </div> <div className="grid grid-cols-1 md:grid-cols-3 gap-6"> {/* Profile Image & Basic Info */} <Card className="md:col-span-1"> <CardHeader> <CardTitle>Profile Picture</CardTitle> </CardHeader> <CardContent className="flex flex-col items-center"> <div className="relative mb-4"> <Image src={profileImage || "/logo.png"} alt="Profile" width={200} height={200} className="rounded-full object-cover bg-red-500" /> {isEditing && ( <label className="absolute bottom-0 right-0 bg-primary text-white p-2 rounded-full cursor-pointer"> <input type="file" accept="image/*" className="hidden" onChange={handleProfileImageChange} /> Edit </label> )} </div> {!isEditing && ( <div className="text-center"> <h2 className="text-xl font-semibold">Satyam Kumar</h2> <p className="text-muted-foreground">Patient</p> </div> )} </CardContent> </Card> {/* Profile Details Form */} <Card className="md:col-span-2"> <CardHeader> <CardTitle>Personal Information</CardTitle> </CardHeader> <CardContent> <Form {...form}> <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4"> <div className="grid md:grid-cols-2 gap-4"> {/* Full Name */} <FormField control={form.control} name="fullName" render={({ field }) => ( <FormItem> <FormLabel>Full Name</FormLabel> <FormControl> <div className="relative"> <User className="absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground" size={20} /> <Input {...field} disabled={!isEditing} placeholder="Full Name" className="pl-10" /> </div> </FormControl> <FormMessage /> </FormItem> )} /> {/* Email */} <FormField control={form.control} name="email" render={({ field }) => ( <FormItem> <FormLabel>Email</FormLabel> <FormControl> <div className="relative"> <Mail className="absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground" size={20} /> <Input {...field} disabled={!isEditing} placeholder="Email Address" className="pl-10" /> </div> </FormControl> <FormMessage /> </FormItem> )} /> {/* Phone */} <FormField control={form.control} name="phone" render={({ field }) => ( <FormItem> <FormLabel>Phone Number</FormLabel> <FormControl> <div className="relative"> <Phone className="absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground" size={20} /> <Input {...field} disabled={!isEditing} placeholder="Phone Number" className="pl-10" /> </div> </FormControl> <FormMessage /> </FormItem> )} /> {/* Date of Birth */} <FormField control={form.control} name="dateOfBirth" render={({ field }) => ( <FormItem> <FormLabel>Date of Birth</FormLabel> <FormControl> <div className="relative"> <Calendar className="absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground" size={20} /> <Input {...field} type="date" disabled={!isEditing} className="pl-10" /> </div> </FormControl> <FormMessage /> </FormItem> )} /> {/* Blood Group */} <FormField control={form.control} name="bloodGroup" render={({ field }) => ( <FormItem> <FormLabel>Blood Group</FormLabel> <Select onValueChange={field.onChange} defaultValue={field.value} disabled={!isEditing} > <FormControl> <div className="relative"> <HeartPulse className="absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground" size={20} /> <SelectTrigger className="pl-10"> <SelectValue placeholder="Select Blood Group" /> </SelectTrigger> </div> </FormControl> <SelectContent> {["A+", "A-", "B+", "B-", "O+", "O-", "AB+", "AB-"].map(group => ( <SelectItem key={group} value={group}>{group}</SelectItem> ))} </SelectContent> </Select> <FormMessage /> </FormItem> )} /> {/* Gender */} <FormField control={form.control} name="gender" render={({ field }) => ( <FormItem> <FormLabel>Gender</FormLabel> <Select onValueChange={field.onChange} defaultValue={field.value} disabled={!isEditing} > <FormControl> <SelectTrigger> <SelectValue placeholder="Select Gender" /> </SelectTrigger> </FormControl> <SelectContent> <SelectItem value="Male">Male</SelectItem> <SelectItem value="Female">Female</SelectItem> <SelectItem value="Other">Other</SelectItem> </SelectContent> </Select> <FormMessage /> </FormItem> )} /> </div> {/* Address Section */} <div className="space-y-4 mt-6"> <h3 className="text-lg font-semibold">Address Details</h3> <div className="grid md:grid-cols-2 gap-4"> {/* Street */} <FormField control={form.control} name="address.street" render={({ field }) => ( <FormItem> <FormLabel>Street Address</FormLabel> <FormControl> <div className="relative"> <MapPin className="absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground" size={20} /> <Input {...field} disabled={!isEditing} placeholder="Street Address" className="pl-10" /> </div> </FormControl> <FormMessage /> </FormItem> )} /> {/* City */} <FormField control={form.control} name="address.city" render={({ field }) => ( <FormItem> <FormLabel>City</FormLabel> <FormControl> <Input {...field} disabled={!isEditing} placeholder="City" /> </FormControl> <FormMessage /> </FormItem> )} /> {/* State */} <FormField control={form.control} name="address.state" render={({ field }) => ( <FormItem> <FormLabel>State</FormLabel> <FormControl> <Input {...field} disabled={!isEditing} placeholder="State" /> </FormControl> <FormMessage /> </FormItem> )} /> {/* Postal Code */} <FormField control={form.control} name="address.postalCode" render={({ field }) => ( <FormItem> <FormLabel>Postal Code</FormLabel> <FormControl> <Input {...field} disabled={!isEditing} placeholder="Postal Code" /> </FormControl> <FormMessage /> </FormItem> )} /> {/* Country */} <FormField control={form.control} name="address.country" render={({ field }) => ( <FormItem> <FormLabel>Country</FormLabel> <FormControl> <Input {...field} disabled={!isEditing} placeholder="Country" /> </FormControl> <FormMessage /> </FormItem> )} /> </div> </div> {isEditing && ( <div className="flex justify-end space-x-4 mt-6"> <Button type="button" variant="outline" onClick={() => setIsEditing(false)} > Cancel </Button> <Button type="submit">Save Changes</Button> </div> )} </form> </Form> </CardContent> </Card> </div> </div> ) } export default ManageProfile
Editor is loading...
Leave a Comment