Select

import { PortalHost } from "@/components/ui/portal";

export default function RootLayout() {
  return (
    <>
      <Stack />
      <PortalHost />
    </>
  );
}

import { Button } from "@/components/ui/button";
import {
  Select,
  SelectContentSheet,
  SelectContentSheetBody,
  SelectContentSheetConfirm,
  SelectContentSheetFooter,
  SelectContentSheetHeader,
  SelectContentSheetTitle,
  SelectInput,
  SelectItem,
  SelectItemIndicator,
  SelectItemLabel,
  SelectTrigger,
} from "@/components/ui/select";

const OPTIONS = [
  { label: "Option 1", value: "1" },
  { label: "Option 2", value: "2" },
  { label: "Option 3", value: "3" },
];

<Select options={OPTIONS} placeholder="Select...">
  <SelectTrigger asChild>
    <SelectInput />
  </SelectTrigger>
  <SelectContentSheet>
    <SelectContentSheetHeader>
      <SelectContentSheetTitle>Select a value</SelectContentSheetTitle>
    </SelectContentSheetHeader>
    <SelectContentSheetBody>
      {OPTIONS.map((option) => (
        <SelectItem
          key={option.value}
          label={option.label}
          value={option.value}
        />
      ))}
    </SelectContentSheetBody>
    <SelectContentSheetFooter>
      <SelectContentSheetConfirm asChild>
        <Button>Confirm</Button>
      </SelectContentSheetConfirm>
    </SelectContentSheetFooter>
  </SelectContentSheet>
</Select>