Select

import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
 
const items = [
  { label: "Select theme", value: null },
  { label: "System default", value: "system" },
  { label: "Light", value: "light" },
  { label: "Dark", value: "dark" },
];
 
export function SelectDemo() {
  return (
    <Select items={items}>
      <SelectTrigger className="w-40">
        <SelectValue />
      </SelectTrigger>
      <SelectContent>
        {items.map(({ label, value }) => (
          <SelectItem key={value} value={value}>
            {label}
          </SelectItem>
        ))}
      </SelectContent>
    </Select>
  );
}

import {
  Select,
  SelectContent,
  SelectGroup,
  SelectGroupLabel,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
 
const items = [
  { label: "Select a job", value: null },
  { label: "Software Engineer", value: "software-engineer" },
  { label: "Software Engineer 2", value: "software-engineer-2" },
  { label: "Software Engineer 3", value: "software-engineer-3" },
  { label: "Marketing Manager", value: "marketing-manager" },
  { label: "Marketing Manager 2", value: "marketing-manager-2" }, 
  { label: "Marketing Manager 3", value: "marketing-manager-3" },
];
 
export function SelectWithGroup() {
  return (
    <Select items={items}>
      <SelectTrigger className="w-48">
        <SelectValue />
      </SelectTrigger>
      <SelectContent>
        <SelectGroup>
          <SelectGroupLabel>Technology</SelectGroupLabel>
          {items.filter((item) => item.value?.startsWith("software")).map((item) => (
            <SelectItem key={item.value} value={item.value}>
              {item.label}
            </SelectItem>
          ))}
        </SelectGroup>
        <SelectGroup>
          <SelectGroupLabel>Business</SelectGroupLabel>
          {items.filter((item) => item.value?.startsWith("marketing")).map((item) => (
            <SelectItem key={item.value} value={item.value}>
              {item.label}
            </SelectItem>
          ))}
        </SelectGroup>
      </SelectContent>
    </Select>
  );
}

import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
 
const items = [
  { label: "System", value: "system" },
  { label: "Light", value: "light" },
  { label: "Dark", value: "dark" },
];
 
export function SelectAlignTrigger() {
  return (
    <Select items={items} defaultValue="system">
      <SelectTrigger className="w-40">
        <SelectValue />
      </SelectTrigger>
      <SelectContent alignItemWithTrigger>
        {items.map(({ label, value }) => (
          <SelectItem key={value} value={value}>
            {label}
          </SelectItem>
        ))}
      </SelectContent>
    </Select>
  );
}

import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
 
const items = {
  apple: "Apple",
  banana: "Banana",
  orange: "Orange",
  grape: "Grape",
  mango: "Mango",
  pineapple: "Pineapple",
  strawberry: "Strawberry",
  watermelon: "Watermelon",
  peach: "Peach",
  cherry: "Cherry",
};
 
type Item = keyof typeof items;
 
const values = Object.keys(items) as Item[];
 
function renderValue(value: Item[]) {
  if (value.length === 0) {
    return "Select items...";
  }
 
  const firstItem = items[value[0]];
  const additionalItems =
    value.length > 1 ? ` (+${value.length - 1} more)` : "";
  return firstItem + additionalItems;
}
 
export function SelectMultiple() {
  return (
    <Select multiple>
      <SelectTrigger className="w-44">
        <SelectValue>{renderValue}</SelectValue>
      </SelectTrigger>
      <SelectContent>
        {values.map((value) => (
          <SelectItem key={value} value={value}>
            {items[value]}
          </SelectItem>
        ))}
      </SelectContent>
    </Select>
  );
}