face-rating-basic-ex-03

1"use client";
2 
3import FaceRatingBasic from "@/components/commerce-ui/face-rating-basic";
4import { useState } from "react";
5 
6export default function FaceRating_Basic_Ex_03() {
7  const [formData, setFormData] = useState({
8    comment: "",
9    email: "",
10    rating: 3,
11  });
12 
13  const handleSubmit = (e: React.FormEvent) => {
14    e.preventDefault();
15    // In a real app, you would send this data to your backend
16    console.log("Form submitted:", formData);
17    alert(`Thank you for your feedback! You rated ${formData.rating} stars`);
18  };
19 
20  return (
21    <form
22      onSubmit={handleSubmit}
23      className="border-border bg-background mx-auto w-full max-w-md space-y-6 rounded-lg border p-6 shadow-xs"
24    >
25      <div className="space-y-2">
26        <label className="block text-sm font-medium">
27          How satisfied are you with our product?
28        </label>
29        <FaceRatingBasic
30          value={formData.rating}
31          onChange={(value) =>
32            setFormData((prev) => ({ ...prev, rating: value }))
33          }
34          iconSize={32}
35          className="justify-center"
36        />
37      </div>
38 
39      <div className="space-y-2">
40        <label htmlFor="comment" className="block text-sm font-medium">
41          Tell us more about your experience
42        </label>
43        <textarea
44          id="comment"
45          rows={3}
46          className="border-ring w-full rounded-md border px-3 py-2"
47          value={formData.comment}
48          onChange={(e) =>
49            setFormData((prev) => ({ ...prev, comment: e.target.value }))
50          }
51          placeholder="Your feedback helps us improve..."
52        />
53      </div>
54 
55      <div className="space-y-2">
56        <label htmlFor="email" className="block text-sm font-medium">
57          Email (optional)
58        </label>
59        <input
60          type="email"
61          id="email"
62          className="border-ring w-full rounded-md border px-3 py-2"
63          value={formData.email}
64          onChange={(e) =>
65            setFormData((prev) => ({ ...prev, email: e.target.value }))
66          }
67          placeholder="your@email.com"
68        />
69      </div>
70 
71      <button
72        type="submit"
73        className="w-full rounded-md bg-blue-600 px-4 py-2 text-white transition-colors hover:bg-blue-700"
74      >
75        Submit Feedback
76      </button>
77    </form>
78  );
79}