{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "select-34",
  "title": "Select with icons",
  "description": "Each framework shows its mark, in the list and in the trigger.",
  "dependencies": [],
  "registryDependencies": [
    "https://ui.ndekocode.dev/r/field.json",
    "https://ui.ndekocode.dev/r/icons.json",
    "https://ui.ndekocode.dev/r/select.json",
    "https://ui.ndekocode.dev/r/theme.json"
  ],
  "files": [
    {
      "path": "registry/ndeko/components/select/select-34.tsx",
      "content": "import { ReactBrandIcon } from '@/registry/ndeko/lib/icons';\nimport { Field, FieldLabel } from '@/registry/ndeko/ui/field';\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from '@/registry/ndeko/ui/select';\n\nfunction NextjsMark(props: React.ComponentProps<'svg'>) {\n  return (\n    <svg\n      viewBox='0 0 24 24'\n      fill='none'\n      stroke='currentColor'\n      strokeWidth={1.75}\n      strokeLinecap='round'\n      strokeLinejoin='round'\n      aria-hidden='true'\n      {...props}\n    >\n      <circle cx='12' cy='12' r='9' />\n      <path d='M9 15.5v-7l7.5 10' />\n      <path d='M15 8.5v4.5' />\n    </svg>\n  );\n}\n\nfunction GatsbyMark(props: React.ComponentProps<'svg'>) {\n  return (\n    <svg\n      viewBox='0 0 24 24'\n      fill='none'\n      stroke='currentColor'\n      strokeWidth={1.75}\n      strokeLinecap='round'\n      strokeLinejoin='round'\n      aria-hidden='true'\n      {...props}\n    >\n      <circle cx='12' cy='12' r='9' />\n      <path d='M3.5 13.5 10.5 20.5' />\n      <path d='M6 6.5 17.5 18' />\n      <path d='M13 12h8' />\n    </svg>\n  );\n}\n\ntype Framework = {\n  value: string;\n  name: string;\n  Mark: React.ComponentType<{ className?: string }>;\n};\n\nconst FRAMEWORKS: Framework[] = [\n  { value: 'react', name: 'React', Mark: ReactBrandIcon },\n  { value: 'nextjs', name: 'Next.js', Mark: NextjsMark },\n  { value: 'gatsby', name: 'Gatsby', Mark: GatsbyMark },\n];\n\nfunction FrameworkName({ framework }: { framework: Framework }) {\n  const { Mark } = framework;\n\n  return (\n    <span className='flex min-w-0 items-center gap-2'>\n      <Mark className='text-muted-foreground size-4 shrink-0' />\n      <span className='truncate'>{framework.name}</span>\n    </span>\n  );\n}\n\nconst FRAMEWORK_ITEMS = FRAMEWORKS.map((framework) => ({\n  value: framework.value,\n  label: <FrameworkName framework={framework} />,\n}));\n\nexport default function Select34() {\n  return (\n    <Field className='w-full max-w-xs'>\n      <FieldLabel>Framework</FieldLabel>\n      <Select items={FRAMEWORK_ITEMS} defaultValue='gatsby'>\n        <SelectTrigger>\n          <SelectValue placeholder='Pick a framework' />\n        </SelectTrigger>\n        <SelectContent>\n          {FRAMEWORKS.map((framework) => (\n            <SelectItem\n              key={framework.value}\n              value={framework.value}\n              label={framework.name}\n            >\n              <FrameworkName framework={framework} />\n            </SelectItem>\n          ))}\n        </SelectContent>\n      </Select>\n    </Field>\n  );\n}\n",
      "type": "registry:component"
    }
  ],
  "categories": [
    "components",
    "select"
  ],
  "type": "registry:component"
}