select.tsx 730 B

123456789101112131415161718192021222324
  1. import * as React from "react";
  2. import { cn } from "@/lib/utils";
  3. export function Select({
  4. className,
  5. options,
  6. ...props
  7. }: React.SelectHTMLAttributes<HTMLSelectElement> & { options: Array<{ value: string; label: string }> }) {
  8. return (
  9. <select
  10. className={cn(
  11. "h-11 w-full rounded-md border border-border bg-surface-elevated px-3 text-base text-foreground outline-none focus:border-primary/70 focus:ring-2 focus:ring-primary/20 disabled:cursor-not-allowed disabled:opacity-50 sm:text-sm",
  12. className,
  13. )}
  14. {...props}
  15. >
  16. {options.map((option) => (
  17. <option key={option.value} value={option.value}>
  18. {option.label}
  19. </option>
  20. ))}
  21. </select>
  22. );
  23. }