Select (Radix UI)

import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/r-select";

const FRAMEWORKS = [
  { value: "next", label: "Next.js" },
  { value: "remix", label: "Remix" },
  { value: "astro", label: "Astro" },
  { value: "vite", label: "Vite" },
  { value: "nuxt", label: "Nuxt" },
];

export default function SelectDemo() {
  return (
    <div className="flex w-full items-center justify-center p-10">
      <div className="w-full max-w-[280px]">
        <Select defaultValue="next">
          <SelectTrigger
            label="Framework"
            description="Pick the framework you want to scaffold."
          >
            <SelectValue placeholder="Select a framework">
              {(value) =>
                FRAMEWORKS.find((f) => f.value === value)?.label ??
                "Select a framework"
              }
            </SelectValue>
          </SelectTrigger>
          <SelectContent>
            {FRAMEWORKS.map((f) => (
              <SelectItem key={f.value} value={f.value}>
                {f.label}
              </SelectItem>
            ))}
          </SelectContent>
        </Select>
      </div>
    </div>
  );
}