{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "p-input-group-27",
  "description": "Code snippet input with language selector",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "@coss/button",
    "@coss/input-group",
    "@coss/select",
    "@coss/tooltip"
  ],
  "files": [
    {
      "path": "registry/default/particles/p-input-group-27.tsx",
      "content": "\"use client\";\n\nimport { CheckIcon, CopyIcon } from \"lucide-react\";\nimport { useRef, useState } from \"react\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupTextarea,\n} from \"@/registry/default/ui/input-group\";\nimport {\n  Select,\n  SelectItem,\n  SelectPopup,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/default/ui/select\";\nimport {\n  Tooltip,\n  TooltipPopup,\n  TooltipTrigger,\n} from \"@/registry/default/ui/tooltip\";\n\nconst languages = [\n  { label: \"JavaScript\", value: \"javascript\" },\n  { label: \"TypeScript\", value: \"typescript\" },\n  { label: \"Python\", value: \"python\" },\n  { label: \"Go\", value: \"go\" },\n  { label: \"Rust\", value: \"rust\" },\n];\n\nexport default function Particle() {\n  const textareaRef = useRef<HTMLTextAreaElement>(null);\n  const [copied, setCopied] = useState(false);\n\n  const handleCopy = () => {\n    const content = textareaRef.current?.value || \"\";\n    navigator.clipboard.writeText(content);\n    setCopied(true);\n    setTimeout(() => setCopied(false), 2000);\n  };\n\n  return (\n    <InputGroup>\n      <InputGroupTextarea\n        className=\"font-mono\"\n        placeholder=\"Paste your code here…\"\n        ref={textareaRef}\n        rows={6}\n      />\n      <InputGroupAddon\n        align=\"block-start\"\n        className=\"justify-between rounded-t-lg border-b bg-muted/72 p-2!\"\n      >\n        <Select defaultValue=\"javascript\" items={languages}>\n          <SelectTrigger className=\"w-fit\" size=\"sm\">\n            <SelectValue />\n          </SelectTrigger>\n          <SelectPopup>\n            {languages.map(({ label, value }) => (\n              <SelectItem key={value} value={value}>\n                {label}\n              </SelectItem>\n            ))}\n          </SelectPopup>\n        </Select>\n        <Tooltip>\n          <TooltipTrigger\n            render={\n              <Button\n                aria-label={copied ? \"Copied\" : \"Copy code\"}\n                onClick={handleCopy}\n                size=\"icon-sm\"\n                variant=\"ghost\"\n              />\n            }\n          >\n            {copied ? <CheckIcon /> : <CopyIcon />}\n          </TooltipTrigger>\n          <TooltipPopup>\n            {copied ? \"Copied!\" : \"Copy to clipboard\"}\n          </TooltipPopup>\n        </Tooltip>\n      </InputGroupAddon>\n    </InputGroup>\n  );\n}\n",
      "type": "registry:block"
    }
  ],
  "meta": {
    "className": "**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-80"
  },
  "categories": [
    "button",
    "input group",
    "select",
    "textarea",
    "tooltip"
  ],
  "type": "registry:block"
}