Menu wheel

1"use client";
2
3import {
4  AnimatePresence,
5  motion,
6  MotionConfig,
7  type MotionProps,
8  type Transition,
9  useAnimate,
10} from "motion/react";
11import React, {
12  type ComponentProps,
13  createContext,
14  useContext,
15  useEffect,
16  useRef,
17  useState,
18} from "react";
19import { XIcon } from "lucide-react";
20
21import { cn } from "@/lib/utils";
22
23const TRANSITION: Transition = {
24  ease: "easeOut",
25  duration: 0.25,
26};
27
28type MenuWheelContextType = {
29  open: boolean;
30  setOpen: React.Dispatch<React.SetStateAction<boolean>>;
31  activeValue: string | null;
32  setActiveValue: React.Dispatch<React.SetStateAction<string | null>>;
33  showCurrent: boolean;
34  onValueChange?: (value: string) => void;
35};
36
37const MenuWheelContext = createContext<MenuWheelContextType | null>(null);
38
39export function useMenuWheelContext() {
40  const ctx = useContext(MenuWheelContext);
41  if (!ctx) {
42    throw new Error("MenuWheel components must be used within a <MenuWheel/>");
43  }
44  return ctx;
45}
46
47type MenuWheelContainerContextType = {
48  totalItems: number;
49  moveHighlight: (index: number) => void;
50  clearHighlight: () => void;
51};
52
53const MenuWheelContainerContext =
54  createContext<MenuWheelContainerContextType | null>(null);
55
56export function useMenuWheelContainerContext() {
57  const ctx = useContext(MenuWheelContainerContext);
58  if (!ctx) {
59    throw new Error(
60      "MenuWheelItem components must be used within a <MenuWheelContainer/>"
61    );
62  }
63  return ctx;
64}
65
66interface MenuWheelProps extends ComponentProps<"div"> {
67  showCurrent?: boolean; // Whether to highlight the currently selected item
68  defaultValue?: string; // The default value to be selected when the component mounts
69  onValueChange?: (value: string) => void; // Callback function to handle value changes
70}
71
72export function MenuWheel({
73  children,
74  className,
75  showCurrent = true,
76  defaultValue,
77  onValueChange,
78  ...props
79}: MenuWheelProps) {
80  const [open, setOpen] = useState(false);
81  const [activeValue, setActiveValue] = useState<string | null>(
82    defaultValue ?? null
83  );
84
85  useEffect(() => {
86    const handleMouseUp = () => {
87      setOpen(false);
88    };
89    if (open) {
90      window.addEventListener("mouseup", handleMouseUp);
91    }
92    return () => window.removeEventListener("mouseup", handleMouseUp);
93  }, [open]);
94
95  return (
96    <MenuWheelContext.Provider
97      value={{
98        open,
99        setOpen,
100        activeValue,
101// … truncated