Dynamic Toolbar

1"use client";
2import { delay, motion } from "motion/react";
3import React, { useEffect, useRef, useState } from "react";
4import {
5  InboxIcon,
6  Message01Icon,
7  PaintBoardIcon,
8  Tag01Icon,
9  Image01Icon,
10  Archive02Icon,
11  ArrowReloadHorizontalIcon,
12  Delete02Icon,
13  ArrowRight01Icon,
14  ArrowLeft01Icon,
15} from "@hugeicons/core-free-icons";
16import { HugeiconsIcon } from "@hugeicons/react";
17import useMeasure from "@/hooks/use-measure";
18 
19const ICON_SIZE = 24;
20 
21// Change Here
22const primaryTools = [
23  { icon: InboxIcon, label: "Inbox" },
24  { icon: Message01Icon, label: "Messages" },
25  { icon: PaintBoardIcon, label: "Paint" },
26  { icon: Tag01Icon, label: "Tags", blur: true },
27];
28 
29const secondaryTools = [
30  { icon: Image01Icon, label: "Image", blur: true },
31  { icon: Archive02Icon, label: "Archive" },
32  {
33    icon: ArrowReloadHorizontalIcon,
34    label: "Reload",
35    className: "-scale-x-100",
36  },
37  {
38    icon: ArrowReloadHorizontalIcon,
39    label: "Reload",
40    className: "-scale-x-100",
41  },
42  { icon: Delete02Icon, label: "Delete", className: "text-red-500" },
43];
44 
45function ToolbarButton({
46  icon,
47  size = ICON_SIZE,
48  blur = false,
49  isBlurred = false,
50  className = "",
51}: {
52  icon: any;
53  size?: number;
54  blur?: boolean;
55  isBlurred?: boolean;
56  className?: string;
57}) {
58  const iconElement = (
59    <HugeiconsIcon
60      icon={icon}
61      className={`text-foreground ${className}`}
62      width={size}
63      height={size}
64    />
65  );
66 
67  if (blur) {
68    return (
69      <button className="p-1 rounded-md hover:bg-accent/50 transition-colors hover:cursor-pointer">
70        <motion.div
71          initial={{ filter: "blur(0px)" }}
72          animate={{ filter: isBlurred ? "blur(1px)" : "blur(0px)" }}
73        >
74          {iconElement}
75        </motion.div>
76      </button>
77    );
78  }
79 
80  return (
81    <button className="p-1 rounded-md hover:bg-accent/50 transition-colors hover:cursor-pointer ">
82      {iconElement}
83    </button>
84  );
85}
86 
87function ExtendedToolbar() {
88  const [isExpanded, setIsExpanded] = useState(false);
89  const [isMounted, setIsMounted] = useState(false);
90  const [primaryRef, primaryBounds] = useMeasure();
91  const [secondaryRef, secondaryBounds] = useMeasure();
92 
93  useEffect(() => {
94    setIsMounted(true);
95  }, []);
96 
97  const currentWidth = isExpanded ? secondaryBounds.width : primaryBounds.width;
98  const hasMeasurements = primaryBounds.width > 0;
99 
100  const initialWidth = hasMeasurements ? primaryBounds.width : "auto";
101 
102  const springTransition = {
103// … truncated