Dropdown

"use client";

import { ChevronsUpDown, Plus } from "lucide-react";
import { useState } from "react";
import type { Selection } from "react-aria-components";
import { Avatar } from "@/components/miyuki-ui/avatar";
import { Button } from "@/components/miyuki-ui/button";
import {
  Dropdown,
  DropdownItem,
  DropdownMenu,
  DropdownSection,
  DropdownSeparator,
} from "@/components/miyuki-ui/dropdown";

const teams = [
  { id: "kitakaze", name: "Kitakaze Outfitters" },
  { id: "hoshizora", name: "Hoshizora Weather" },
  { id: "northline", name: "Northline Rail" },
];

export default function DropdownTeamDemo() {
  const [selected, setSelected] = useState<Selection>(new Set(["kitakaze"]));
  const current = teams.find((team) => selected !== "all" && selected.has(team.id)) ?? teams[0];

  return (
    <Dropdown>
      <Button
        variant="ghost"
        aria-label={`Team: ${current.name}`}
        className="h-11 gap-2.5 ps-2 pe-2.5"
        iconStart={<Avatar name={current.name} shape="rounded" size="md" aria-hidden />}
        iconEnd={<ChevronsUpDown className="text-muted-foreground" />}
      >
        {current.name}
      </Button>
      <DropdownMenu indicator="check" popoverClassName="w-64">
        <DropdownSection
          title="Teams"
          selectionMode="single"
          disallowEmptySelection
          selectedKeys={selected}
          onSelectionChange={setSelected}
        >
          {teams.map((team) => (
            <DropdownItem
              key={team.id}
              id={team.id}
              textValue={team.name}
              icon={<Avatar name={team.name} shape="rounded" size="xs" aria-hidden />}
            >
              {team.name}
            </DropdownItem>
          ))}
        </DropdownSection>
        <DropdownSeparator />
        <DropdownItem icon={<Plus />}>Create team</DropdownItem>
      </DropdownMenu>
    </Dropdown>
  );
}

"use client";

import { ChevronDown } from "lucide-react";
import { useState } from "react";
import type { Selection } from "react-aria-components";
import { Badge } from "@/components/miyuki-ui/badge";
import { Button } from "@/components/miyuki-ui/button";
import { Dropdown, DropdownItem, DropdownMenu } from "@/components/miyuki-ui/dropdown";

const models = [
  { id: "standard", name: "Standard", description: "9 km grid, updated every six hours." },
  { id: "fine", name: "Fine mesh", description: "1 km grid, updated every hour.", isNew: true },
  { id: "ensemble", name: "Ensemble", description: "31 runs blended into a likely range." },
];

export default function DropdownModelDemo() {
  const [selected, setSelected] = useState<Selection>(new Set(["standard"]));
  const current = models.find((model) => selected !== "all" && selected.has(model.id)) ?? models[0];

  return (
    <Dropdown>
      <Button variant="secondary" iconEnd={<ChevronDown className="text-muted-foreground" />}>
        <span className="text-muted-foreground">Forecast model:</span> {current.name}
      </Button>
      <DropdownMenu
        aria-label="Forecast model"
        selectionMode="single"
        disallowEmptySelection
        selectedKeys={selected}
        onSelectionChange={setSelected}
        popoverClassName="w-80"
      >
        {models.map((model) => (
          <DropdownItem key={model.id} id={model.id} textValue={model.name} description={model.description}>
            {model.name}
            {model.isNew && (
              <Badge size="sm" tone="brand" className="ms-2 align-[-1px]">
                New
              </Badge>
            )}
          </DropdownItem>
        ))}
      </DropdownMenu>
    </Dropdown>
  );
}

"use client";

import { Archive, Copy, Folder, FolderInput, MoreHorizontal, Pencil, Trash2 } from "lucide-react";
import {
  Dropdown,
  DropdownItem,
  DropdownMenu,
  DropdownSeparator,
  DropdownSubmenu,
} from "@/components/miyuki-ui/dropdown";
import { IconButton } from "@/components/miyuki-ui/icon-button";

export default function DropdownActionsDemo() {
  return (
    <Dropdown>
      <IconButton variant="secondary" aria-label="Route actions">
        <MoreHorizontal />
      </IconButton>
      <DropdownMenu aria-label="Route actions">
        <DropdownItem icon={<Pencil />}>Rename</DropdownItem>
        <DropdownItem icon={<Copy />} shortcut="⌘D">
          Duplicate
        </DropdownItem>
        <DropdownSubmenu>
          <DropdownItem icon={<FolderInput />}>Move to</DropdownItem>
          <DropdownMenu aria-label="Folders">
            <DropdownItem icon={<Folder />}>Winter 2026</DropdownItem>
            <DropdownItem icon={<Folder />}>Hakuba with Aiko</DropdownItem>
            <DropdownItem icon={<Archive />}>Archive</DropdownItem>
          </DropdownMenu>
        </DropdownSubmenu>
        <DropdownSeparator />
        <DropdownItem icon={<Trash2 />} tone="destructive">
          Delete
        </DropdownItem>
      </DropdownMenu>
    </Dropdown>
  );
}