{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "input-with-left-select",
  "type": "registry:component",
  "title": "Input with Left Select",
  "description": "A component for inputting text with a select on the left",
  "registryDependencies": [
    "select",
    "input",
    "label"
  ],
  "files": [
    {
      "path": "registry/default/components/input/input-with-left-select.tsx",
      "content": "import { Input } from '@/registry/default/ui/input'\r\nimport { Label } from '@/registry/default/ui/label'\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 { useId } from 'react'\r\n\r\nconst prefixKeys = {\r\n    mr: 'mr',\r\n    ms: 'ms',\r\n    dr: 'dr',\r\n    prof: 'prof',\r\n    sir: 'sir',\r\n    madam: 'madam',\r\n} as const\r\n\r\nconst prefixs = [\r\n    { value: prefixKeys.mr, label: 'Mr.' },\r\n    { value: prefixKeys.ms, label: 'Ms.' },\r\n    { value: prefixKeys.dr, label: 'Dr.' },\r\n    { value: prefixKeys.prof, label: 'Prof.' },\r\n    { value: prefixKeys.sir, label: 'Sir' },\r\n    { value: prefixKeys.madam, label: 'Madam' },\r\n] as const\r\n\r\nexport default function InputWithLeftSelect() {\r\n    const id = useId()\r\n\r\n    return (\r\n        <div className=\"flex w-full max-w-4/5 flex-col gap-2\">\r\n            <Label htmlFor={id}>Input with left select</Label>\r\n\r\n            <div className=\"flex items-center\">\r\n                <Select defaultValue={prefixKeys.mr}>\r\n                    <SelectTrigger className=\"rounded-r-none border-r-0\">\r\n                        <SelectValue placeholder=\"Select a verified email to display\" />\r\n                    </SelectTrigger>\r\n                    <SelectContent>\r\n                        {prefixs.map((item) => (\r\n                            <SelectItem key={item.value} value={item.value}>\r\n                                {item.label}\r\n                            </SelectItem>\r\n                        ))}\r\n                    </SelectContent>\r\n                </Select>\r\n\r\n                <Input\r\n                    placeholder=\"Shadcn\"\r\n                    id={id}\r\n                    className=\"rounded-l-none\"\r\n                />\r\n            </div>\r\n        </div>\r\n    )\r\n}\r\n",
      "type": "registry:component",
      "target": "components/input-with-left-select.tsx"
    }
  ]
}