{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "productivity-sm-02",
  "type": "registry:component",
  "registryDependencies": [
    "https://wigggle-ui.vercel.app/r/widget.json",
    "https://wigggle-ui.vercel.app/r/button.json",
    "https://wigggle-ui.vercel.app/r/select.json",
    "https://wigggle-ui.vercel.app/r/textarea.json",
    "https://wigggle-ui.vercel.app/r/utils.json"
  ],
  "files": [
    {
      "path": "registry/default/widgets/productivity/sm/productivity-02.tsx",
      "content": "import React from \"react\";\r\n\r\nimport {\r\n  Widget,\r\n  WidgetContent,\r\n  WidgetFooter,\r\n  WidgetHeader,\r\n  WidgetTitle,\r\n} from \"@/registry/default/ui/widget\";\r\nimport { Button } from \"@/registry/default/ui/button\";\r\nimport {\r\n  Select,\r\n  SelectContent,\r\n  SelectItem,\r\n  SelectTrigger,\r\n  SelectValue,\r\n} from \"@/registry/default/ui/select\";\r\nimport { Textarea } from \"@/registry/default/ui/textarea\";\r\nimport { cn } from \"@/registry/default/lib/utils\";\r\n\r\ntype StatusOption = {\r\n  value: string;\r\n  color: string;\r\n};\r\n\r\nconst STATUS_OPTIONS: StatusOption[] = [\r\n  { value: \"1\", color: \"bg-productive\" },\r\n  { value: \"2\", color: \"bg-blue-500\" },\r\n  { value: \"3\", color: \"bg-yellow-500\" },\r\n  { value: \"4\", color: \"bg-destructive\" },\r\n];\r\n\r\nexport default function WidgetDemo() {\r\n  const id = React.useId();\r\n\r\n  return (\r\n    <Widget design=\"mumbai\" className=\"gap-3\">\r\n      <WidgetHeader className=\"justify-center\">\r\n        <WidgetTitle>Add Task</WidgetTitle>\r\n      </WidgetHeader>\r\n      <WidgetContent className=\"flex-col justify-center gap-4\">\r\n        <Textarea className=\"h-full max-h-28\" placeholder=\"Add something...\" />\r\n      </WidgetContent>\r\n      <WidgetFooter className=\"flex w-full justify-between\">\r\n        <Select defaultValue=\"1\">\r\n          <SelectTrigger\r\n            id={id}\r\n            className=\"w-16 [&>span]:flex [&>span]:items-center [&>span]:gap-2 [&>span_svg]:shrink-0\"\r\n          >\r\n            <SelectValue placeholder=\"Select status\" />\r\n          </SelectTrigger>\r\n\r\n          <SelectContent className=\"max-w-16 min-w-0\">\r\n            {STATUS_OPTIONS.map((s) => (\r\n              <SelectItem key={s.value} value={s.value}>\r\n                <span className=\"flex items-center gap-2\">\r\n                  <div className={cn(\"size-3 rounded-full\", s.color)} />\r\n                </span>\r\n              </SelectItem>\r\n            ))}\r\n          </SelectContent>\r\n        </Select>\r\n        <Button className=\"w-max\" size=\"sm\">\r\n          Add Task\r\n        </Button>\r\n      </WidgetFooter>\r\n    </Widget>\r\n  );\r\n}\r\n",
      "type": "registry:component"
    }
  ],
  "meta": {
    "tags": [
      "productivity"
    ],
    "size": "sm"
  }
}