Select

"use client";

import { Label } from "@/registry/base/ui/label";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/registry/base/ui/select";

const statuses = [
  { value: "active", label: "Active", dotClassName: "bg-emerald-500" },
  { value: "pending", label: "Pending", dotClassName: "bg-amber-500" },
  { value: "failed", label: "Failed", dotClassName: "bg-red-500" },
];

export default function Select01() {
  return (
    <div className="grid w-full max-w-xs gap-1.5">
      <Label htmlFor="select-01-status">Status</Label>
      <Select items={statuses} defaultValue="active">
        <SelectTrigger id="select-01-status" className="w-full">
          <SelectValue />
        </SelectTrigger>
        <SelectContent>
          {statuses.map((status) => (
            <SelectItem key={status.value} value={status.value}>
              <span
                aria-hidden="true"
                className={`size-1.5 rounded-full ${status.dotClassName}`}
              />
              {status.label}
            </SelectItem>
          ))}
        </SelectContent>
      </Select>
    </div>
  );
}

"use client";

import { Label } from "@/registry/base/ui/label";
import {
  Select,
  SelectContent,
  SelectGroup,
  SelectItem,
  SelectLabel,
  SelectSeparator,
  SelectTrigger,
  SelectValue,
} from "@/registry/base/ui/select";

const timezones = {
  "North America": [
    { value: "america-new-york", label: "New York (ET)" },
    { value: "america-chicago", label: "Chicago (CT)" },
    { value: "america-los-angeles", label: "Los Angeles (PT)" },
  ],
  Europe: [
    { value: "europe-london", label: "London (GMT)" },
    { value: "europe-berlin", label: "Berlin (CET)" },
    { value: "europe-istanbul", label: "Istanbul (TRT)" },
  ],
};

const items = Object.values(timezones).flat();

export default function Select02() {
  return (
    <div className="grid w-full max-w-xs gap-1.5">
      <Label htmlFor="select-02-timezone">Timezone</Label>
      <Select items={items} defaultValue="europe-istanbul">
        <SelectTrigger id="select-02-timezone" className="w-full">
          <SelectValue />
        </SelectTrigger>
        <SelectContent>
          <SelectGroup>
            <SelectLabel>North America</SelectLabel>
            {timezones["North America"].map((zone) => (
              <SelectItem key={zone.value} value={zone.value}>
                {zone.label}
              </SelectItem>
            ))}
          </SelectGroup>
          <SelectSeparator />
          <SelectGroup>
            <SelectLabel>Europe</SelectLabel>
            {timezones.Europe.map((zone) => (
              <SelectItem key={zone.value} value={zone.value}>
                {zone.label}
              </SelectItem>
            ))}
          </SelectGroup>
        </SelectContent>
      </Select>
    </div>
  );
}

"use client";

import { Label } from "@/registry/base/ui/label";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/registry/base/ui/select";

const plans = [
  { value: "starter", label: "Starter", description: "For solo projects and side hustles" },
  { value: "team", label: "Team", description: "For growing teams that ship together" },
  { value: "enterprise", label: "Enterprise", description: "Advanced controls and support" },
];

export default function Select03() {
  return (
    <div className="grid w-full max-w-xs gap-1.5">
      <Label htmlFor="select-03-plan">Plan</Label>
      <Select items={plans} defaultValue="team">
        <SelectTrigger id="select-03-plan" className="w-full">
          <SelectValue />
        </SelectTrigger>
        <SelectContent>
          {plans.map((plan) => (
            <SelectItem key={plan.value} value={plan.value}>
              <span className="flex flex-col">
                <span>{plan.label}</span>
                <span className="text-xs text-muted-foreground">{plan.description}</span>
              </span>
            </SelectItem>
          ))}
        </SelectContent>
      </Select>
    </div>
  );
}

"use client";

import { Label } from "@/registry/base/ui/label";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/registry/base/ui/select";

const roles = [
  { value: "viewer", label: "Viewer" },
  { value: "editor", label: "Editor" },
  { value: "admin", label: "Admin", disabled: true },
  { value: "owner", label: "Owner", disabled: true },
];

export default function Select04() {
  return (
    <div className="grid w-full max-w-xs gap-1.5">
      <Label htmlFor="select-04-role">Role</Label>
      <Select items={roles}>
        <SelectTrigger id="select-04-role" className="w-full">
          <SelectValue placeholder="Select a role" />
        </SelectTrigger>
        <SelectContent>
          {roles.map((role) => (
            <SelectItem key={role.value} value={role.value} disabled={role.disabled}>
              {role.label}
            </SelectItem>
          ))}
        </SelectContent>
      </Select>
    </div>
  );
}