Select

"use client";

import { Select, SelectItem } from "@/components/miyuki-ui/select";

const resorts = ["Niseko", "Hakuba", "Nozawa", "Lake Tōya", "Kiso", "Matsumoto"];

export default function SelectDemo() {
  return (
    <Select
      className="w-full max-w-xs"
      label="Resort"
      placeholder="Choose a resort"
      defaultValue="hakuba"
      description="Lift prices update for the resort you choose."
    >
      {resorts.map((name) => (
        <SelectItem key={name} id={name.toLowerCase()}>
          {name}
        </SelectItem>
      ))}
    </Select>
  );
}

"use client";

import { Select, SelectItem } from "@/components/miyuki-ui/select";
import { people } from "@/registry/lib/data";

const guides = [people[0], people[5], people[6], people[2], people[8], people[7]];

export default function SelectAvatarsDemo() {
  return (
    <Select
      className="w-full max-w-xs"
      label="Assign a guide"
      placeholder="Choose a guide"
      items={guides}
      defaultValue="aiko.tanaka"
    >
      {(person) => (
        <SelectItem id={person.handle} avatar={person.avatar} description={person.role}>
          {person.name}
        </SelectItem>
      )}
    </Select>
  );
}

"use client";

import { Select, SelectItem, SelectSection } from "@/components/miyuki-ui/select";

const regions = [
  { name: "Hokkaido", prefectures: ["Hokkaido"] },
  { name: "Tōhoku", prefectures: ["Aomori", "Iwate", "Akita", "Miyagi", "Yamagata", "Fukushima"] },
  { name: "Chūbu", prefectures: ["Niigata", "Toyama", "Ishikawa", "Fukui", "Nagano", "Gifu", "Yamanashi"] },
  { name: "Kantō", prefectures: ["Gunma", "Tochigi"] },
];

export default function SelectSearchableDemo() {
  return (
    <Select
      className="w-full max-w-xs"
      label="Prefecture"
      placeholder="Choose a prefecture"
      searchable
      searchPlaceholder="Search prefectures"
    >
      {regions.map((region) => (
        <SelectSection key={region.name} title={region.name}>
          {region.prefectures.map((name) => (
            <SelectItem key={name} id={name.toLowerCase()}>
              {name}
            </SelectItem>
          ))}
        </SelectSection>
      ))}
    </Select>
  );
}