Custom Cursor Demo

1"use client";
2 
3import { useState } from "react";
4import {
5  MousePointer2,
6  Square,
7  Circle,
8  Type,
9  ImageIcon,
10  Hand,
11  Minus,
12  Plus,
13  Share,
14  Play,
15  ChevronDown,
16  ChevronRight,
17  Eye,
18  Search,
19  Layers,
20  Palette,
21  LucideComponent,
22  Zap,
23  Menu,
24  Settings,
25} from "lucide-react";
26import { Button } from "@/components/ui/button";
27import { Input } from "@/components/ui/input";
28import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
29import { Separator } from "@/components/ui/separator";
30import { Badge } from "@/components/ui/badge";
31import { Sheet, SheetContent, SheetTrigger } from "@/components/ui/sheet";
32import { Cursor } from "../ui/custom-cursor";
33import Image from "next/image";
34 
35export default function CustomCursorDemo() {
36  const [selectedTool, setSelectedTool] = useState("pointer");
37  const [selectedLayer, setSelectedLayer] = useState("button");
38  const [leftSidebarOpen, setLeftSidebarOpen] = useState(false);
39  const [rightSidebarOpen, setRightSidebarOpen] = useState(false);
40 
41  // State for all input values
42  const [cornerRadius, setCornerRadius] = useState("8");
43  const [opacity, setOpacity] = useState("100%");
44  const [fontSize, setFontSize] = useState("16");
45  const [fontWeight, setFontWeight] = useState("500");
46  const [width, setWidth] = useState("192");
47  const [height, setHeight] = useState("48");
48  const [xPosition, setXPosition] = useState("91");
49  const [yPosition, setYPosition] = useState("680");
50 
51  const tools = [
52    { id: "pointer", icon: MousePointer2, label: "Move" },
53    { id: "hand", icon: Hand, label: "Hand" },
54    { id: "rectangle", icon: Square, label: "Rectangle" },
55    { id: "ellipse", icon: Circle, label: "Ellipse" },
56    { id: "text", icon: Type, label: "Text" },
57    { id: "image", icon: ImageIcon, label: "Image" },
58  ];
59 
60  // Custom SVG icons for different tools
61  const getToolCursor = (toolId: string) => {
62    const toolCursors = {
63      pointer: {
64        svg: <MousePointer2 className="w-4 h-4" />,
65        name: "Select",
66        color: "blue",
67      },
68      hand: {
69        svg: <Hand className="w-4 h-4" />,
70        name: "Pan",
71        color: "green",
72      },
73      rectangle: {
74        svg: <Square className="w-4 h-4" />,
75        name: "Rectangle",
76        color: "purple",
77      },
78      ellipse: {
79        svg: <Circle className="w-4 h-4" />,
80        name: "Ellipse",
81        color: "pink",
82      },
83      text: {
84        svg: <Type className="w-4 h-4" />,
85        name: "Text",
86// … truncated