{
  "name": "face-rating-basic-ex-03",
  "type": "registry:example",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "https://ui.stackzero.co/r/face-rating-basic.json"
  ],
  "files": [
    {
      "type": "registry:example",
      "content": "\"use client\";\n\nimport FaceRatingBasic from \"@/components/commerce-ui/face-rating-basic\";\nimport { useState } from \"react\";\n\nexport default function FaceRating_Basic_Ex_03() {\n  const [formData, setFormData] = useState({\n    comment: \"\",\n    email: \"\",\n    rating: 3,\n  });\n\n  const handleSubmit = (e: React.FormEvent) => {\n    e.preventDefault();\n    // In a real app, you would send this data to your backend\n    console.log(\"Form submitted:\", formData);\n    alert(`Thank you for your feedback! You rated ${formData.rating} stars`);\n  };\n\n  return (\n    <form\n      onSubmit={handleSubmit}\n      className=\"border-border bg-background mx-auto w-full max-w-md space-y-6 rounded-lg border p-6 shadow-xs\"\n    >\n      <div className=\"space-y-2\">\n        <label className=\"block text-sm font-medium\">\n          How satisfied are you with our product?\n        </label>\n        <FaceRatingBasic\n          value={formData.rating}\n          onChange={(value) =>\n            setFormData((prev) => ({ ...prev, rating: value }))\n          }\n          iconSize={32}\n          className=\"justify-center\"\n        />\n      </div>\n\n      <div className=\"space-y-2\">\n        <label htmlFor=\"comment\" className=\"block text-sm font-medium\">\n          Tell us more about your experience\n        </label>\n        <textarea\n          id=\"comment\"\n          rows={3}\n          className=\"border-ring w-full rounded-md border px-3 py-2\"\n          value={formData.comment}\n          onChange={(e) =>\n            setFormData((prev) => ({ ...prev, comment: e.target.value }))\n          }\n          placeholder=\"Your feedback helps us improve...\"\n        />\n      </div>\n\n      <div className=\"space-y-2\">\n        <label htmlFor=\"email\" className=\"block text-sm font-medium\">\n          Email (optional)\n        </label>\n        <input\n          type=\"email\"\n          id=\"email\"\n          className=\"border-ring w-full rounded-md border px-3 py-2\"\n          value={formData.email}\n          onChange={(e) =>\n            setFormData((prev) => ({ ...prev, email: e.target.value }))\n          }\n          placeholder=\"your@email.com\"\n        />\n      </div>\n\n      <button\n        type=\"submit\"\n        className=\"w-full rounded-md bg-blue-600 px-4 py-2 text-white transition-colors hover:bg-blue-700\"\n      >\n        Submit Feedback\n      </button>\n    </form>\n  );\n}\n",
      "path": "/components/commerce-ui/components/face-rating/basic/face-rating-basic-ex-03.tsx",
      "target": "components/commerce-ui/face-rating-basic-ex-03.tsx"
    }
  ]
}