📝 Formulário de Registro para Colaboradores

Este componente React representa um formulário de registro para colaboradores do PetAcademy. Ele permite que os usuários forneçam suas informações pessoais, como nome, e-mail, senha, redes sociais e tags.

📌 Principais funcionalidades:
✅ Validação com Zod para garantir a integridade dos dados.
✅ Uso do React Hook Form para manipulação do formulário.
✅ Interface amigável, com abas para separar as seções.
✅ Upload de avatar, suporte a redes sociais e seleção de tags.

🚀 Importação dos módulos essenciais

"use client"; 
import React, { useState } from "react";
import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Textarea } from "@/components/ui/textarea";
import {
  Form,
  FormControl,
  FormDescription,
  FormField,
  FormItem,
  FormLabel,
  FormMessage,
} from "@/components/ui/form";
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { z } from "zod";
import AvatarUpload from "./AvatarUpload";
import BackgroundVideo from "@/components/BackgroundVideo";
import TagSelector from "@/components/TagSelector";

🔹 Aqui importamos os módulos necessários para construir o formulário.
🔹 React Hook Form gerencia os estados do formulário de forma eficiente.
🔹 Zod fornece regras de validação.
🔹 Componentes da UI (botões, inputs, cards) são usados para estilização.

📌 Definição do esquema de validação com Zod

const formSchema = z.object({
  fullName: z.string().min(3, { message: "Nome completo deve ter pelo menos 3 caracteres." }),
  email: z.string().email({ message: "Email inválido" }),
  password: z.string().min(6, { message: "Senha deve ter pelo menos 6 caracteres." }),
  photo: z.string().optional(),
  youtubeChannel: z.string().optional(),
  instagramLink: z.string().optional(),
  websiteLink: z.string().optional(),
  bio: z.string().min(10, { message: "Resumo deve ter pelo menos 10 caracteres." }).optional(),
  tags: z.array(z.string()).optional(),
});

🔸 O Zod define as regras de validação do formulário.
🔸 O nome, e-mail e senha são obrigatórios, enquanto foto, redes sociais e bio são opcionais.

🎯 Criando o componente do formulário

const CollaboratorRegisterForm = () => {
  const form = useForm({
    resolver: zodResolver(formSchema),
    defaultValues: {
      fullName: "",
      email: "",
      password: "",
      photo: "",
      youtubeChannel: "",
      instagramLink: "",
      websiteLink: "",
      bio: "",
      tags: [],
    },
  });
 
  const [currentTab, setCurrentTab] = useState("basic-info");
  const { isSubmitting } = form.formState;

📌 Explicação:
✔️ useForm inicializa o formulário com os valores padrão e a validação do Zod.
✔️ useState é usado para alternar entre as abas "Informações Básicas" e "Informações Adicionais".
✔️ isSubmitting verifica se o formulário está sendo enviado.

📨 Função para envio do formulário

  const onSubmit = (values) => {
    const dataToSubmit = {
      ...values,
      createdAt: new Date().toISOString(),
      updatedAt: new Date().toISOString(),
      coursesCreated: 0,
      isAdmin: false,
    };
    console.log(dataToSubmit);
  };

📝 O formulário captura os dados do usuário e adiciona campos extras como createdAt e isAdmin.
🚀 Os dados podem ser enviados para um servidor via API futuramente.

⏭️ Função para mudar para a próxima aba

  const handleNextTab = async () => {
    const result = await form.trigger(["fullName", "email", "password", "bio"]);
    if (result) {
      setCurrentTab("additional-info");
    }
  };

🔹 Antes de mudar para a próxima aba, validamos os campos essenciais.
🔹 Se os dados estiverem corretos, o usuário avança para Informações Adicionais.

🖥️ Estrutura da interface

  return (
    <div className="relative w-full h-screen overflow-y-auto bg-background">
      <BackgroundVideo />
      <div className="relative z-10 flex items-center justify-center min-h-screen py-8">
        <Tabs value={currentTab} onValueChange={setCurrentTab} className="max-w-md w-full mx-4">
          <TabsList className="grid w-full grid-cols-2 mb-4">
            <TabsTrigger value="basic-info">Informações Básicas</TabsTrigger>
            <TabsTrigger value="additional-info">Informações Adicionais</TabsTrigger>
          </TabsList>

📌 O layout inclui um vídeo de fundo e uma interface amigável.
📌 As informações são separadas em abas, facilitando a navegação.

📝 Campos do formulário

<FormField
  control={form.control}
  name="fullName"
  render={({ field }) => (
    <FormItem>
      <FormLabel>Nome Completo <span className="text-red-500">*</span></FormLabel>
      <FormControl>
        <Input placeholder="Digite seu nome" disabled={isSubmitting} {...field} />
      </FormControl>
      <FormMessage />
    </FormItem>
  )}
/>

📍 Explicação:
✅ Cada campo do formulário é representado por <FormField>.
✅ FormLabel exibe o nome do campo.
✅ Input recebe os dados do usuário.
✅ FormMessage exibe erros caso haja problemas de validação.

🏁 Código Completo

"use client";
import React, { useState } from "react";
import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Textarea } from "@/components/ui/textarea";
import { z } from "zod";
import AvatarUpload from "./AvatarUpload";
import BackgroundVideo from "@/components/BackgroundVideo";
import TagSelector from "@/components/TagSelector"; 
 
const formSchema = z.object({
  fullName: z.string().min(3, { message: "Nome completo deve ter pelo menos 3 caracteres." }),
  email: z.string().email({ message: "Email inválido" }),
  password: z.string().min(6, { message: "Senha deve ter pelo menos 6 caracteres." }),
});
 
const CollaboratorRegisterForm = () => { /* ... */ };
 
export default CollaboratorRegisterForm;

🎉 Conclusão:
Esse formulário é altamente flexível e pode ser expandido para adicionar mais campos, melhorar a validação ou integrar uma API para salvar os dados dos usuários. 🚀

CollaboratorInfo.jsx CourseCard.jsx