Dropdown Menu

1'use client';
2 
3import * as React from 'react';
4import { useEffect, useState } from 'react';
5import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
6import { CheckIcon, ChevronRightIcon, CircleIcon } from 'lucide-react';
7import { motion, AnimatePresence, Variants } from 'motion/react';
8import { cn } from '@/lib/utils';
9 
10const dropdownVariants: Variants = {
11  hidden: {
12    opacity: 0,
13    scale: 0.5,
14    rotateX: 40,
15    y: 20,
16  },
17  visible: {
18    opacity: 1,
19    scale: 1,
20    y: 0,
21    rotateX: 0,
22    transition: {
23      type: 'spring' as const,
24      stiffness: 260,
25      damping: 15,
26    },
27  },
28  exit: {
29    opacity: 0,
30    scale: 0.8,
31    rotateX: 10,
32    y: 10,
33    transition: {
34      duration: 0.2,
35    },
36  },
37};
38 
39const itemVariants: Variants = {
40  hidden: {
41    opacity: 0,
42    x: -20,
43  },
44  visible: (i: number) => ({
45    opacity: 1,
46    x: 0,
47    transition: {
48      delay: i * 0.05,
49      duration: 0.2,
50    },
51  }),
52  exit: {
53    opacity: 0,
54    x: -20,
55    transition: {
56      duration: 0.1,
57    },
58  },
59};
60 
61const useMobile = () => {
62  const [isMobile, setIsMobile] = useState(false);
63 
64  useEffect(() => {
65    const checkIfMobile = () => {
66      setIsMobile(
67        window.innerWidth < 768 ||
68          /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
69            navigator.userAgent,
70          ),
71      );
72    };
73 
74    checkIfMobile();
75    window.addEventListener('resize', checkIfMobile);
76 
77    return () => {
78      window.removeEventListener('resize', checkIfMobile);
79    };
80  }, []);
81 
82  return isMobile;
83};
84 
85const DropdownMenuContext = React.createContext<{ animate: boolean }>({
86  animate: true,
87});
88 
89function DropdownMenu({
90  animate = true,
91  ...props
92}: React.ComponentProps<typeof DropdownMenuPrimitive.Root> & {
93  animate?: boolean;
94}) {
95  return (
96    <DropdownMenuContext.Provider value={{ animate }}>
97      <DropdownMenuPrimitive.Root data-slot='dropdown-menu' {...props} />
98    </DropdownMenuContext.Provider>
99  );
100}
101 
102function DropdownMenuTrigger({
103  className,
104  children,
105  ...props
106}: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>) {
107  const { animate } = React.useContext(DropdownMenuContext);
108 
109  return (
110    <DropdownMenuPrimitive.Trigger
111      data-slot='dropdown-menu-trigger'
112      className={cn(
113        'inline-flex items-center justify-center rounded-lg text-sm font-medium transition-all duration-200',
114        'hover:shadow-lg',
115        className,
116      )}
117      asChild
118      {...props}
119    >
120// … truncated