Dropdown Menu

1"use client";
2 
3import { AnimatePresence, motion, useReducedMotion } from "framer-motion";
4import * as React from "react";
5 
6export type DropdownMenuItem =
7  | { type: "separator" }
8  | { type: "label"; label: React.ReactNode }
9  | {
10      type?: "item";
11      label: React.ReactNode;
12      icon?: React.ReactNode;
13      shortcut?: string;
14      disabled?: boolean;
15      href?: string;
16      onSelect?: () => void;
17      submenu?: DropdownMenuItem[];
18    };
19 
20export type DropdownSide = "top" | "bottom" | "left" | "right";
21export type DropdownAlign = "start" | "center" | "end";
22 
23export type DropdownMenuProps = {
24  trigger: React.ReactNode;
25  items: DropdownMenuItem[];
26  side?: DropdownSide;
27  align?: DropdownAlign;
28  className?: string;
29};
30 
31const sideClasses: Record<DropdownSide, string> = {
32  bottom: "top-full mt-2",
33  top: "bottom-full mb-2",
34  right: "left-full top-0 ml-2",
35  left: "right-full top-0 mr-2",
36};
37 
38const alignClasses: Record<DropdownSide, Record<DropdownAlign, string>> = {
39  bottom: {
40    start: "left-0",
41    center: "left-1/2 -translate-x-1/2",
42    end: "right-0",
43  },
44  top: { start: "left-0", center: "left-1/2 -translate-x-1/2", end: "right-0" },
45  right: {
46    start: "top-0",
47    center: "top-1/2 -translate-y-1/2",
48    end: "bottom-0",
49  },
50  left: { start: "top-0", center: "top-1/2 -translate-y-1/2", end: "bottom-0" },
51};
52 
53const originClasses: Record<DropdownSide, Record<DropdownAlign, string>> = {
54  bottom: {
55    start: "origin-top-left",
56    center: "origin-top",
57    end: "origin-top-right",
58  },
59  top: {
60    start: "origin-bottom-left",
61    center: "origin-bottom",
62    end: "origin-bottom-right",
63  },
64  right: {
65    start: "origin-top-left",
66    center: "origin-left",
67    end: "origin-bottom-left",
68  },
69  left: {
70    start: "origin-top-right",
71    center: "origin-right",
72    end: "origin-bottom-right",
73  },
74};
75 
76const SubArrow = (
77  <svg
78    aria-hidden="true"
79    viewBox="0 0 24 24"
80    className="ml-auto h-4 w-4 opacity-60"
81    fill="none"
82    stroke="currentColor"
83    strokeWidth="2"
84    strokeLinecap="round"
85    strokeLinejoin="round"
86  >
87    <path d="m9 18 6-6-6-6" />
88  </svg>
89);
90 
91const MenuPanel = ({
92  items,
93  side,
94  align,
95  onClose,
96  reduceMotion,
97  isSub,
98}: {
99  items: DropdownMenuItem[];
100  side: DropdownSide;
101  align: DropdownAlign;
102  onClose: () => void;
103  reduceMotion: boolean | null;
104  isSub?: boolean;
105}) => {
106  const listRef = React.useRef<HTMLDivElement>(null);
107// … truncated