job-application-form

1"use client";
2 
3import { useForm, Controller } from "react-hook-form";
4import { zodResolver } from "@hookform/resolvers/zod";
5import * as z from "zod";
6import { Button } from "@/components/ui/button";
7import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
8import { Input } from "@/components/ui/input";
9import { Label } from "@/components/ui/label";
10import { Textarea } from "@/components/ui/textarea";
11import { Checkbox } from "@/components/ui/checkbox";
12import { toast } from "sonner";
13 
14const formSchema = z.object({
15  fullName: z.string().min(2, "Name is required"),
16  email: z.string().email("Invalid email address"),
17  portfolio: z.string().url("Invalid URL").optional().or(z.literal("")),
18  coverLetter: z.string().min(50, "Cover letter must be at least 50 characters"),
19  remote: z.boolean(),
20});
21 
22type FormValues = z.infer<typeof formSchema>;
23 
24export function JobApplicationForm() {
25  const form = useForm<FormValues>({
26    resolver: zodResolver(formSchema),
27    defaultValues: {
28      fullName: "",
29      email: "",
30      portfolio: "",
31      coverLetter: "",
32      remote: false,
33    },
34  });
35 
36  const onSubmit = async (data: FormValues) => {
37    console.log("Form submitted:", data);
38    toast.success("Application submitted successfully!");
39  };
40 
41  return (
42    <Card className="w-full max-w-2xl mx-auto">
43      <CardHeader>
44        <CardTitle>Job Application</CardTitle>
45        <CardDescription>Submit your application for this position</CardDescription>
46      </CardHeader>
47      <CardContent>
48        <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
49          <div className="space-y-2">
50            <Label htmlFor="fullName">Full Name</Label>
51            <Input
52              id="fullName"
53              placeholder="Jane Doe"
54              {...form.register("fullName")}
55            />
56            {form.formState.errors.fullName && (
57              <p className="text-sm text-destructive">{form.formState.errors.fullName.message}</p>
58            )}
59          </div>
60          
61          <div className="space-y-2">
62            <Label htmlFor="email">Email Address</Label>
63            <Input
64              id="email"
65              type="email"
66              placeholder="jane@example.com"
67              {...form.register("email")}
68            />
69            {form.formState.errors.email && (
70              <p className="text-sm text-destructive">{form.formState.errors.email.message}</p>
71            )}
72          </div>
73// … truncated