{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "survey-4",
  "title": "Inline Was This Helpful",
  "description": "Inline page feedback survey with a three-choice was this helpful rating and an optional follow-up, resolving to a thank-you state.",
  "dependencies": [
    "@base-ui/react"
  ],
  "registryDependencies": [
    "card",
    "empty",
    "questionnaire"
  ],
  "files": [
    {
      "path": "registry/blocks/survey/4/survey-block.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  Card,\n  CardContent,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\"\nimport {\n  Empty,\n  EmptyDescription,\n  EmptyHeader,\n  EmptyMedia,\n  EmptyTitle,\n} from \"@/components/ui/empty\"\nimport {\n  Questionnaire,\n  QuestionnaireActions,\n  QuestionnaireChoice,\n  QuestionnaireChoices,\n  QuestionnaireDescription,\n  QuestionnaireError,\n  QuestionnaireInput,\n  QuestionnaireItem,\n  QuestionnaireNext,\n  QuestionnairePrevious,\n  QuestionnaireProgress,\n  QuestionnaireSkip,\n  QuestionnaireSubmit,\n  QuestionnaireTitle,\n} from \"@/components/ui/questionnaire\"\nimport { IconPlaceholder } from \"@/components/icons/icon-placeholder\"\n\nconst RATINGS = [\n  { value: \"no\", label: \"Not Useful\" },\n  { value: \"somewhat\", label: \"Useful\" },\n  { value: \"very\", label: \"Very Useful\" },\n]\n\nconst ITEMS = [\n  { name: \"rating\", required: true, choices: RATINGS },\n  { name: \"improve\" },\n]\n\nexport default function SurveyBlock() {\n  const [submitted, setSubmitted] = React.useState(false)\n\n  function handleSubmit(event: React.FormEvent<HTMLFormElement>) {\n    event.preventDefault()\n    setSubmitted(true)\n  }\n\n  return (\n    <section className=\"flex w-full items-center justify-center bg-background px-4 py-12 text-foreground sm:px-6 sm:py-16\">\n      <Card className=\"w-full max-w-sm\" size=\"sm\">\n        {submitted ? (\n          <CardContent className=\"min-h-56\">\n            <Empty>\n              <EmptyHeader>\n                <EmptyMedia variant=\"icon\">\n                  <IconPlaceholder\n                    lucide=\"Check\"\n                    tabler=\"IconCheck\"\n                    hugeicons=\"Tick02Icon\"\n                    phosphor=\"Check\"\n                    remixicon=\"RiCheckLine\"\n                    aria-hidden=\"true\"\n                  />\n                </EmptyMedia>\n                <EmptyTitle>Thanks For The Feedback</EmptyTitle>\n                <EmptyDescription>\n                  We read every response and use it to decide which pages to\n                  rewrite first.\n                </EmptyDescription>\n              </EmptyHeader>\n            </Empty>\n          </CardContent>\n        ) : (\n          <Questionnaire\n            items={ITEMS}\n            onSubmit={handleSubmit}\n            shortcuts=\"numbers\"\n          >\n            <CardHeader>\n              <CardTitle>Page Feedback</CardTitle>\n              <QuestionnaireProgress />\n            </CardHeader>\n            {/* Floored to the tallest question so the actions row stays put. */}\n            <CardContent className=\"min-h-56\">\n              <QuestionnaireItem name=\"rating\" required>\n                <QuestionnaireTitle>Was This Page Helpful?</QuestionnaireTitle>\n                <QuestionnaireDescription>\n                  Your answer is anonymous.\n                </QuestionnaireDescription>\n                <QuestionnaireChoices>\n                  {RATINGS.map((rating) => (\n                    <QuestionnaireChoice\n                      key={rating.value}\n                      value={rating.value}\n                    >\n                      <span className=\"font-medium\">{rating.label}</span>\n                    </QuestionnaireChoice>\n                  ))}\n                </QuestionnaireChoices>\n                <QuestionnaireError />\n              </QuestionnaireItem>\n\n              <QuestionnaireItem name=\"improve\">\n                <QuestionnaireTitle>What Could Be Better?</QuestionnaireTitle>\n                <QuestionnaireDescription>\n                  Optional, and it goes straight to the docs team.\n                </QuestionnaireDescription>\n                <QuestionnaireChoices>\n                  <QuestionnaireInput\n                    aria-label=\"What could be better\"\n                    placeholder=\"A missing example, an unclear step\"\n                  />\n                </QuestionnaireChoices>\n                <QuestionnaireError />\n              </QuestionnaireItem>\n            </CardContent>\n\n            <CardFooter>\n              <QuestionnaireActions>\n                <QuestionnairePrevious size=\"sm\" />\n                <QuestionnaireSkip size=\"sm\" variant=\"ghost\" />\n                <QuestionnaireNext size=\"sm\" />\n                <QuestionnaireSubmit size=\"sm\">Send</QuestionnaireSubmit>\n              </QuestionnaireActions>\n            </CardFooter>\n          </Questionnaire>\n        )}\n      </Card>\n    </section>\n  )\n}\n",
      "type": "registry:component",
      "target": "components/blocks/survey-4.tsx"
    }
  ],
  "meta": {
    "height": "501px",
    "tier": "free"
  },
  "categories": [
    "survey"
  ],
  "type": "registry:block"
}