-
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: added testomonial createtion form
- Loading branch information
1 parent
cb88e55
commit 93ff4fe
Showing
9 changed files
with
387 additions
and
120 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file was deleted.
Oops, something went wrong.
186 changes: 183 additions & 3 deletions
186
apps/www/src/components/testimonial/create-testimonial-form.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,5 +1,185 @@ | ||
| import React from "react"; | ||
| "use client"; | ||
|
|
||
| export default function CreateTestimonialForm() { | ||
| return <div>CreateTestimonialForm</div>; | ||
| import * as React from "react"; | ||
| import { zodResolver } from "@hookform/resolvers/zod"; | ||
| import { Star } from "lucide-react"; | ||
| import { useForm } from "react-hook-form"; | ||
| import { toast } from "sonner"; | ||
| import { z } from "zod"; | ||
|
|
||
| import { Button } from "@acme/ui/button"; | ||
| import { | ||
| Form, | ||
| FormControl, | ||
| FormDescription, | ||
| FormField, | ||
| FormItem, | ||
| FormLabel, | ||
| FormMessage, | ||
| } from "@acme/ui/form"; | ||
| import { Input } from "@acme/ui/input"; | ||
| import { Textarea } from "@acme/ui/textarea"; | ||
|
|
||
| const formSchema = z.object({ | ||
| authorName: z.string().min(4, "Name must be at least 4 characters"), | ||
| profileImages: z.string(), | ||
| authorEmail: z.string().email(), | ||
| reviewImages: z.string(), | ||
| message: z.string().min(10, "Review must be at least 30 characters"), | ||
| rating: z.number().min(1).max(5), | ||
| }); | ||
|
|
||
| export function CreateTestimonialForm() { | ||
| const form = useForm<z.infer<typeof formSchema>>({ | ||
| resolver: zodResolver(formSchema), | ||
| defaultValues: { | ||
| authorName: "", | ||
| profileImages: "", | ||
| authorEmail: "", | ||
| reviewImages: "", | ||
| message: "", | ||
| rating: 5, | ||
| }, | ||
| }); | ||
|
|
||
| function onSubmit(values: z.infer<typeof formSchema>) { | ||
| try { | ||
| toast.success( | ||
| `Successfully created testimonial ${JSON.stringify(values)}`, | ||
| ); | ||
| form.reset(); | ||
| } catch (error) { | ||
| toast.error((error as Error).message); | ||
| } | ||
| } | ||
|
|
||
| return ( | ||
| <Form {...form}> | ||
| <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-3 p-4"> | ||
| <FormField | ||
| control={form.control} | ||
| name="rating" | ||
| render={({ field }) => ( | ||
| <FormItem> | ||
| <FormControl> | ||
| <div className="flex items-center space-x-1"> | ||
| {[1, 2, 3, 4, 5].map((value) => ( | ||
| <button | ||
| key={value} | ||
| type="button" | ||
| className="transition-transform hover:scale-110 focus:outline-none" | ||
| onClick={() => field.onChange(value)} | ||
| onMouseEnter={() => field.onChange(value)} | ||
| > | ||
| <Star | ||
| className={`h-8 w-8 transition-colors ${field.value >= value ? "fill-yellow-400 text-yellow-500" : "text-zinc-200"}`} | ||
| /> | ||
| </button> | ||
| ))} | ||
| </div> | ||
| </FormControl> | ||
| <div className="mt-1 text-sm text-gray-500"> | ||
| {field.value === 1 && "Poor"} | ||
| {field.value === 2 && "Fair"} | ||
| {field.value === 3 && "Good"} | ||
| {field.value === 4 && "Very Good"} | ||
| {field.value === 5 && "Excellent"} | ||
| </div> | ||
| <FormMessage /> | ||
| </FormItem> | ||
| )} | ||
| /> | ||
|
|
||
| <FormField | ||
| control={form.control} | ||
| name="message" | ||
| render={({ field }) => ( | ||
| <FormItem> | ||
| <FormControl> | ||
| <Textarea | ||
| placeholder="write your experience with us" | ||
| className="h-32 resize-none" | ||
| {...field} | ||
| /> | ||
| </FormControl> | ||
|
|
||
| <FormMessage /> | ||
| </FormItem> | ||
| )} | ||
| /> | ||
|
|
||
| <FormField | ||
| control={form.control} | ||
| name="authorName" | ||
| render={({ field }) => ( | ||
| <FormItem> | ||
| <FormLabel className="mb-1 flex justify-start"> | ||
| Name <span className="text-red-500">*</span> | ||
| </FormLabel> | ||
| <FormControl> | ||
| <Input placeholder="Name" {...field} /> | ||
| </FormControl> | ||
| <FormDescription> | ||
| This is your public display name. | ||
| </FormDescription> | ||
| <FormMessage /> | ||
| </FormItem> | ||
| )} | ||
| /> | ||
| <FormField | ||
| control={form.control} | ||
| name="authorEmail" | ||
| render={({ field }) => ( | ||
| <FormItem> | ||
| <FormLabel className="mb-1 flex justify-start"> | ||
| Email <span className="text-red-500">*</span> | ||
| </FormLabel> | ||
| <FormControl> | ||
| <Input placeholder="[email protected]" {...field} /> | ||
| </FormControl> | ||
| <FormDescription>We won't spam you, we promise.</FormDescription> | ||
| <FormMessage /> | ||
| </FormItem> | ||
| )} | ||
| /> | ||
| <FormField | ||
| control={form.control} | ||
| name="profileImages" | ||
| render={({ field }) => ( | ||
| <FormItem> | ||
| <FormLabel className="mb-1 flex justify-start"> | ||
| Profile-image{" "} | ||
| <span className="text-xs text-zinc-500">(optional)</span> | ||
| </FormLabel> | ||
| <FormControl> | ||
| <Input placeholder="profile image-URL" {...field} /> | ||
| </FormControl> | ||
|
|
||
| <FormMessage /> | ||
| </FormItem> | ||
| )} | ||
| /> | ||
|
|
||
| <FormField | ||
| control={form.control} | ||
| name="reviewImages" | ||
| render={({ field }) => ( | ||
| <FormItem> | ||
| <FormLabel className="mb-1 flex justify-start"> | ||
| Review-images{" "} | ||
| <span className="text-xs text-zinc-500">(optional)</span> | ||
| </FormLabel> | ||
| <FormControl> | ||
| <Input placeholder="htts://image.png-URL" {...field} /> | ||
| </FormControl> | ||
|
|
||
| <FormMessage /> | ||
| </FormItem> | ||
| )} | ||
| /> | ||
|
|
||
| <Button type="submit">Submit</Button> | ||
| </form> | ||
| </Form> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.