Select

"use client";

import {
  Select,
  SelectTrigger,
  SelectValue,
  SelectContent,
  SelectItem,
  SelectGroup,
  SelectLabel,
} from "@dashboardpack/core/components/ui/select";
import { useState } from "react";

export default function SelectExample() {
  const [role, setRole] = useState("editor");
  return (
    <div className="w-full max-w-xs space-y-4">
      <Select value={role} onValueChange={setRole}>
        <SelectTrigger aria-label="Team role">
          <SelectValue placeholder="Choose a role" />
        </SelectTrigger>
        <SelectContent>
          <SelectGroup>
            <SelectLabel>Team roles</SelectLabel>
            <SelectItem value="viewer">Viewer</SelectItem>
            <SelectItem value="editor">Editor</SelectItem>
            <SelectItem value="admin">Admin</SelectItem>
            <SelectItem value="owner" disabled>
              Owner (restricted)
            </SelectItem>
          </SelectGroup>
        </SelectContent>
      </Select>
      <Select disabled>
        <SelectTrigger aria-label="Unavailable role">
          <SelectValue placeholder="Managed by administrator" />
        </SelectTrigger>
      </Select>
      <p className="text-sm text-muted-foreground">Selected: {role}</p>
    </div>
  );
}