From da842e30e78a35a2e3d0a1ef2d54f5854f6909b5 Mon Sep 17 00:00:00 2001 From: marioAmauta Date: Mon, 2 Jun 2025 00:29:00 -0400 Subject: [PATCH] feat: add form components with react-hook-form integration - Introduced Form, FormField, FormItem, FormLabel, FormControl, FormDescription, FormMessage, and useFormField for managing forms. - Implemented a new Label component using Radix UI. - Added Textarea component for better text input handling. - Updated package.json to include necessary dependencies: @hookform/resolvers, react-hook-form, and zod. --- app/settings/profile/page.tsx | 222 ++++- package-lock.json | 1639 +++++++++++++++++++------------- package.json | 6 +- src/components/ui/form.tsx | 146 +++ src/components/ui/label.tsx | 19 + src/components/ui/textarea.tsx | 21 + 6 files changed, 1411 insertions(+), 642 deletions(-) create mode 100644 src/components/ui/form.tsx create mode 100644 src/components/ui/label.tsx create mode 100644 src/components/ui/textarea.tsx diff --git a/app/settings/profile/page.tsx b/app/settings/profile/page.tsx index 8849170..7a15e4b 100644 --- a/app/settings/profile/page.tsx +++ b/app/settings/profile/page.tsx @@ -1,8 +1,222 @@ +"use client"; + +import { type Pet } from "@/interfaces/pet"; +import { pets } from "@/placeholder/pets"; +import { UserCircle } from "lucide-react"; +import { useRouter } from "next/navigation"; +import { useForm } from "react-hook-form"; + +import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"; +import { Button } from "@/components/ui/button"; +import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"; +import { Form, FormControl, FormField, FormItem, FormLabel } from "@/components/ui/form"; +import { Input } from "@/components/ui/input"; +import { Select, SelectContent, SelectItem, SelectTrigger } from "@/components/ui/select"; +import { Textarea } from "@/components/ui/textarea"; + export default function ProfileSettingsPage() { + const pet = pets[0]; + + const router = useRouter(); + + const form = useForm({ + defaultValues: { + name: pet.name, + type: pet.type, + age: pet.age, + price: pet.price, + description: pet.description, + personality: pet.personality, + status: pet.status + } + }); + + const petTypes: Record = { + dog: "Perro", + cat: "Gato", + bird: "Ave", + other: "Otro" + }; + + const petStatuses: Record = { + adoption: "En adopción", + sale: "En venta" + }; + + function onSubmit() {} + return ( - <> -

Profile Settings

-

Profile settings page content

- +
+

Configuración del Perfil

+ + + Información de tu perfil + Actualiza tus datos personales y cómo te ven los demás en la plataforma. + + +
+ +
+ + + + + + +
+ + +
+
+
+ ( + + Nombre + + + + + )} + /> + { + return ( + + Tipo de Mascota + + + ); + }} + /> +
+
+ ( + + Edad + + + + + )} + /> + ( + + Precio + + + + + )} + /> +
+
+ ( + + Personalidad + + + + + )} + /> + { + return ( + + Estado + + + ); + }} + /> +
+ ( + + Descripción + +