Dropdown

1
"use client";
2
3
import {
4
  faUser,
5
  faGear,
6
  faMoon,
7
  faRightFromBracket,
8
  faPlus,
9
  faPenToSquare,
10
  faTrash,
11
} from "@fortawesome/free-solid-svg-icons";
12
import { useRouter } from "next/navigation";
13
import { Dropdown, type DropdownMenuItem } from "@/shared/ui/dropdown";
14
import { useTheme } from "@/shared/hooks/use-theme";
15
16
function Toolbar() {
17
  const router = useRouter();
18
  const { toggle } = useTheme();
19
20
  // icon: IconDefinition (FontAwesome) — items fire onSelect on click.
21
  // Add { type: "divider" } between groups; danger: true for destructive items.
22
  const userMenu: DropdownMenuItem[] = [
23
    { type: "item", label: "Profile", icon: faUser, shortcut: "⌘P", onSelect: () => router.push("/profile") },
24
    { type: "item", label: "Settings", icon: faGear, shortcut: "⌘,", onSelect: () => router.push("/settings") },
25
    { type: "item", label: "Toggle theme", icon: faMoon, onSelect: toggle },
26
    { type: "divider" },
27
    {
28
      type: "item",
29
      label: "Sign out",
30
      icon: faRightFromBracket,
31
      danger: true,
32
      shortcut: "⌘Q",
33
      onSelect: () => signOut(),
34
    },
35
  ];
36
37
  const actionMenu: DropdownMenuItem[] = [
38
    { type: "item", label: "New project", icon: faPlus, shortcut: "⌘N", onSelect: createProject },
39
    { type: "item", label: "Edit", icon: faPenToSquare, shortcut: "⌘E", onSelect: editProject },
40
    { type: "divider" },
41
    { type: "item", label: "Delete", icon: faTrash, danger: true, onSelect: deleteProject },
42
  ];
43
44
  return (
45
    <>
46
      {/* Default left-aligned menu */}
47
      <Dropdown trigger="Jane Doe" items={userMenu} />
48
49
      {/* Right-aligned menu (align panel to trigger's right edge) */}
50
      <Dropdown trigger="Actions" items={actionMenu} align="right" />
51
    </>
52
  );
53
}