@docubook/create 2.4.0 → 2.5.1

package/src/dist/components/navbar.tsx

@@ -1,87 +1,164 @@
-import { ArrowUpRight } from "lucide-react";
-import Link from "next/link";
-import Image from "next/image";
-import Search from "@/components/search";
-import Anchor from "@/components/anchor";
-import { SheetLeftbar } from "@/components/leftbar";
-import { SheetClose } from "@/components/ui/sheet";
-import { Separator } from "@/components/ui/separator";
-import docuConfig from "@/docu.json"; // Import JSON
+"use client"
 
-export function Navbar() {
+import { ArrowUpRight, ChevronDown, ChevronUp } from "lucide-react"
+import Link from "next/link"
+import Image from "next/image"
+import Search from "@/components/SearchBox"
+import Anchor from "@/components/anchor"
+import { Separator } from "@/components/ui/separator"
+import docuConfig from "@/docu.json"
+import GitHubButton from "@/components/Github"
+import { Button } from "@/components/ui/button"
+import { useState, useCallback } from "react"
+import { motion, AnimatePresence } from "framer-motion"
+import { ModeToggle } from "@/components/ThemeToggle"
+
+interface NavbarProps {
+  id?: string
+}
+
+export function Navbar({ id }: NavbarProps) {
+  const [isMenuOpen, setIsMenuOpen] = useState(false)
+
+  const toggleMenu = useCallback(() => {
+    setIsMenuOpen((prev) => !prev)
+  }, [])
 
   return (
-    <nav className="sticky top-0 z-50 w-full h-16 border-b bg-background">
-      <div className="sm:container mx-auto w-[95vw] h-full flex items-center justify-between md:gap-2">
-        <div className="flex items-center gap-5">
-          <SheetLeftbar />
+    <div className="sticky top-0 z-50 w-full">
+      <nav id={id} className="bg-background h-16 w-full border-b">
+        <div className="mx-auto flex h-full w-[95vw] items-center justify-between sm:container md:gap-2">
           <div className="flex items-center gap-6">
-            <div className="hidden lg:flex">
+            <div className="flex">
               <Logo />
             </div>
           </div>
-        </div>
-        <div className="flex items-center gap-2">
-            <div className="items-center hidden gap-4 text-sm font-medium lg:flex text-muted-foreground">
+          <div className="flex items-center gap-0 max-md:flex-row-reverse md:gap-2">
+            <div className="text-muted-foreground hidden items-center gap-4 text-sm font-medium md:flex">
               <NavMenu />
             </div>
-            <Separator className="hidden lg:flex my-4 h-9" orientation="vertical" />
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={toggleMenu}
+              aria-label={isMenuOpen ? "Close navigation menu" : "Open navigation menu"}
+              aria-expanded={isMenuOpen}
+              className="flex items-center gap-1 px-2 text-sm font-medium md:hidden"
+            >
+              {isMenuOpen ? (
+                <ChevronUp className="text-muted-foreground h-6 w-6" />
+              ) : (
+                <ChevronDown className="text-muted-foreground h-6 w-6" />
+              )}
+            </Button>
+
+            <Separator className="my-4 hidden h-9 md:flex" orientation="vertical" />
             <Search />
+            <div className="hidden md:flex">
+              <GitHubButton />
+            </div>
+          </div>
         </div>
-      </div>
-    </nav>
-  );
+      </nav>
+
+      <AnimatePresence>
+        {isMenuOpen && (
+          <motion.div
+            initial={{ opacity: 0, height: 0 }}
+            animate={{ opacity: 1, height: "auto" }}
+            exit={{ opacity: 0, height: 0 }}
+            transition={{ duration: 0.2, ease: "easeInOut" }}
+            className="bg-background/95 w-full border-b shadow-sm backdrop-blur-sm md:hidden"
+          >
+            <div className="mx-auto w-[95vw] sm:container">
+              <ul className="flex flex-col py-2">
+                <NavMenuCollapsible onItemClick={() => setIsMenuOpen(false)} />
+              </ul>
+              <div className="flex items-center justify-between border-t px-1 py-3">
+                <GitHubButton />
+                <ModeToggle />
+              </div>
+            </div>
+          </motion.div>
+        )}
+      </AnimatePresence>
+    </div>
+  )
 }
 
 export function Logo() {
-    const { navbar } = docuConfig; // Extract navbar from JSON
+  const { navbar } = docuConfig
 
-    return (
-      <Link href="/" className="flex items-center gap-1.5">
-        <div className="relative w-8 h-8">
-          <Image
-            src={navbar.logo.src}
-            alt={navbar.logo.alt}
-            fill
-            sizes="32px"
-            className="object-contain"
-          />
-        </div>
-        <h2 className="font-bold font-code text-md">{navbar.logoText}</h2>
-      </Link>
-    );
+  return (
+    <Link href="/" className="flex items-center gap-1.5">
+      <div className="relative h-8 w-8">
+        <Image
+          src={navbar.logo.src}
+          alt={navbar.logo.alt}
+          fill
+          sizes="32px"
+          className="object-contain"
+        />
+      </div>
+      <h2 className="font-code dark:text-accent text-primary text-lg font-bold">
+        {navbar.logoText}
+      </h2>
+    </Link>
+  )
 }
 
-export function NavMenu({ isSheet = false }) {
-  const { navbar } = docuConfig; // Extract navbar from JSON
+// Desktop NavMenu — horizontal list
+export function NavMenu() {
+  const { navbar } = docuConfig
 
   return (
     <>
       {navbar?.menu?.map((item) => {
-        const isExternal = item.href.startsWith("http");
-
-        const Comp = (
+        const isExternal = item.href.startsWith("http")
+        return (
           <Anchor
             key={`${item.title}-${item.href}`}
             activeClassName="text-primary dark:text-accent md:font-semibold font-medium"
             absolute
-            className="flex items-center gap-1 text-foreground/80 hover:text-foreground transition-colors"
+            className="text-foreground/80 hover:text-foreground flex items-center gap-1 transition-colors"
             href={item.href}
             target={isExternal ? "_blank" : undefined}
             rel={isExternal ? "noopener noreferrer" : undefined}
           >
             {item.title}
-            {isExternal && <ArrowUpRight className="w-4 h-4 text-foreground/80" />}
+            {isExternal && <ArrowUpRight className="text-foreground/80 h-4 w-4" />}
           </Anchor>
-        );
-        return isSheet ? (
-          <SheetClose key={item.title + item.href} asChild>
-            {Comp}
-          </SheetClose>
-        ) : (
-          Comp
-        );
+        )
+      })}
+    </>
+  )
+}
+
+// Mobile Collapsible NavMenu — vertical list items
+function NavMenuCollapsible({ onItemClick }: { onItemClick: () => void }) {
+  const { navbar } = docuConfig
+
+  return (
+    <>
+      {navbar?.menu?.map((item) => {
+        const isExternal = item.href.startsWith("http")
+        return (
+          <li key={item.title + item.href}>
+            <Anchor
+              activeClassName="text-primary dark:text-accent font-semibold"
+              absolute
+              className="text-foreground/80 hover:text-foreground hover:bg-muted flex w-full items-center justify-between gap-2 rounded-md px-3 py-2.5 text-sm font-medium transition-colors"
+              href={item.href}
+              target={isExternal ? "_blank" : undefined}
+              rel={isExternal ? "noopener noreferrer" : undefined}
+              onClick={onItemClick}
+            >
+              {item.title}
+              {isExternal && <ArrowUpRight className="text-foreground/60 h-4 w-4 shrink-0" />}
+            </Anchor>
+          </li>
+        )
       })}
     </>
-  );
+  )
 }

package/src/dist/components/toc.tsx

@@ -1,27 +1,29 @@
-import { getDocsTocs } from "@/lib/markdown";
-import TocObserver from "./toc-observer";
-import { ScrollArea } from "@/components/ui/scroll-area";
-import { ListIcon } from "lucide-react";
-import Sponsor from "./Sponsor";
+"use client"
 
+import TocObserver from "./TocObserver"
+import { ScrollArea } from "@/components/ui/scroll-area"
+import { ListIcon } from "lucide-react"
+import Sponsor from "./Sponsor"
+import { useActiveSection } from "@/hooks"
+import { TocItem } from "@/lib/toc"
 
-export default async function Toc({ path }: { path: string }) {
-  const tocs = await getDocsTocs(path);
+export default function Toc({ tocs }: { tocs: TocItem[] }) {
+  const { activeId, setActiveId } = useActiveSection(tocs)
 
   return (
-    <div className="lg:flex hidden toc flex-[1.5] min-w-[238px] py-5 sticky top-16 h-[calc(100vh-4rem)]">
-      <div className="flex flex-col h-full w-full px-2 gap-2 mb-auto">
+    <div className="toc flex-3 sticky top-4 hidden h-[calc(100vh-8rem)] min-w-[238px] self-start lg:flex lg:p-8">
+      <div className="mb-auto flex h-full w-full flex-col gap-2 px-2">
         <div className="flex items-center gap-2">
-          <ListIcon className="w-4 h-4" />
-          <h3 className="font-medium text-sm">On this page</h3>
+          <ListIcon className="h-4 w-4" />
+          <h3 className="text-sm font-medium">On this page</h3>
         </div>
-        <div className="flex-shrink-0 min-h-0 max-h-[calc(70vh-4rem)]">
+        <div className="max-h-[calc(70vh-2rem)] min-h-0 shrink-0">
           <ScrollArea className="h-full">
-            <TocObserver data={tocs} />
+            <TocObserver data={tocs} activeId={activeId} onActiveIdChange={setActiveId} />
           </ScrollArea>
         </div>
         <Sponsor />
       </div>
     </div>
-  );
+  )
 }

package/src/dist/components/typography.tsx

@@ -2,7 +2,7 @@ import { PropsWithChildren } from "react";
 
 export function Typography({ children }: PropsWithChildren) {
   return (
-    <div className="prose prose-zinc dark:prose-invert prose-code:font-code dark:prose-code:bg-stone-900/25 prose-code:bg-stone-50 prose-pre:bg-background prose-headings:scroll-m-20 w-[85vw] sm:w-full sm:mx-auto prose-code:text-sm prose-code:leading-6 dark:prose-code:text-white prose-code:text-stone-800 prose-code:p-1 prose-code:rounded-md prose-code:border pt-2 !min-w-full prose-img:rounded-md prose-img:border prose-code:before:content-none prose-code:after:content-none prose-code:px-1.5 prose-code:overflow-x-auto !max-w-[500px] prose-img:my-3 prose-h2:my-4 prose-h2:mt-8">
+    <div className="prose prose-zinc dark:prose-invert prose-code:font-code dark:prose-code:bg-stone-900/25 prose-code:bg-stone-50 prose-pre:bg-background max-lg:prose-headings:scroll-mt-54 prose-headings:scroll-mt-4 w-[85vw] sm:w-full sm:mx-auto prose-code:text-sm prose-code:leading-6 dark:prose-code:text-white prose-code:text-stone-800 prose-code:p-1 prose-code:rounded-md prose-code:border pt-2 min-w-full! prose-img:rounded-md prose-img:border prose-code:before:content-none prose-code:after:content-none prose-code:px-1.5 prose-code:overflow-x-auto max-w-[500px]! prose-img:my-3 prose-h2:my-4 prose-h2:mt-8">
       {children}
     </div>
   );

package/src/dist/components/ui/icon-cloud.tsx

@@ -0,0 +1,353 @@
+"use client";
+
+import React, { useEffect, useRef, useState, useMemo } from "react";
+import { renderToString } from "react-dom/server";
+
+interface Icon {
+  x: number;
+  y: number;
+  z: number;
+  scale: number;
+  opacity: number;
+  id: number;
+}
+
+interface IconCloudProps {
+  icons?: React.ReactNode[];
+  images?: string[];
+}
+
+function easeOutCubic(t: number): number {
+  return 1 - Math.pow(1 - t, 3);
+}
+
+export function IconCloud({ icons, images }: IconCloudProps) {
+  const canvasRef = useRef<HTMLCanvasElement>(null);
+  // const [iconPositions, setIconPositions] = useState<Icon[]>([]);
+  const iconPositions = useMemo<Icon[]>(() => {
+    const items = icons || images || [];
+    const newIcons: Icon[] = [];
+    const numIcons = items.length || 20;
+
+    // Fibonacci sphere parameters
+    const offset = 2 / numIcons;
+    const increment = Math.PI * (3 - Math.sqrt(5));
+
+    for (let i = 0; i < numIcons; i++) {
+      const y = i * offset - 1 + offset / 2;
+      const r = Math.sqrt(1 - y * y);
+      const phi = i * increment;
+
+      const x = Math.cos(phi) * r;
+      const z = Math.sin(phi) * r;
+
+      newIcons.push({
+        x: x * 100,
+        y: y * 100,
+        z: z * 100,
+        scale: 1,
+        opacity: 1,
+        id: i,
+      });
+    }
+    return newIcons;
+  }, [icons, images]);
+  const [rotation] = useState({ x: 0, y: 0 });
+  const [isDragging, setIsDragging] = useState(false);
+  const [lastMousePos, setLastMousePos] = useState({ x: 0, y: 0 });
+  const [mousePos, setMousePos] = useState({ x: 0, y: 0 });
+  const [targetRotation, setTargetRotation] = useState<{
+    x: number;
+    y: number;
+    startX: number;
+    startY: number;
+    distance: number;
+    startTime: number;
+    duration: number;
+  } | null>(null);
+  const animationFrameRef = useRef<number>(undefined);
+  const rotationRef = useRef(rotation);
+  const iconCanvasesRef = useRef<HTMLCanvasElement[]>([]);
+  const imagesLoadedRef = useRef<boolean[]>([]);
+
+  // Create icon canvases once when icons/images change
+  useEffect(() => {
+    if (!icons && !images) return;
+
+    const items = icons || images || [];
+    imagesLoadedRef.current = new Array(items.length).fill(false);
+
+    const newIconCanvases = items.map((item, index) => {
+      const offscreen = document.createElement("canvas");
+      offscreen.width = 40;
+      offscreen.height = 40;
+      const offCtx = offscreen.getContext("2d");
+
+      if (offCtx) {
+        if (images) {
+          // Handle image URLs directly
+          const img = new Image();
+          img.crossOrigin = "anonymous";
+          img.src = items[index] as string;
+          img.onload = () => {
+            offCtx.clearRect(0, 0, offscreen.width, offscreen.height);
+
+            // Create circular clipping path
+            offCtx.beginPath();
+            offCtx.arc(20, 20, 20, 0, Math.PI * 2);
+            offCtx.closePath();
+            offCtx.clip();
+
+            // Draw the image
+            offCtx.drawImage(img, 0, 0, 40, 40);
+
+            imagesLoadedRef.current[index] = true;
+          };
+        } else {
+          // Handle SVG icons
+          offCtx.scale(0.4, 0.4);
+          // eslint-disable-next-line @typescript-eslint/no-explicit-any
+          const svgString = renderToString(item as React.ReactElement<any>);
+          const img = new Image();
+          img.src = "data:image/svg+xml;base64," + btoa(svgString);
+          img.onload = () => {
+            offCtx.clearRect(0, 0, offscreen.width, offscreen.height);
+            offCtx.drawImage(img, 0, 0);
+            imagesLoadedRef.current[index] = true;
+          };
+        }
+      }
+      return offscreen;
+    });
+
+    iconCanvasesRef.current = newIconCanvases;
+  }, [icons, images]);
+
+  // Generate initial icon positions on a sphere
+  // useEffect(() => {
+  //   const items = icons || images || [];
+  //   const newIcons: Icon[] = [];
+  //   const numIcons = items.length || 20;
+
+  //   // Fibonacci sphere parameters
+  //   const offset = 2 / numIcons;
+  //   const increment = Math.PI * (3 - Math.sqrt(5));
+
+  //   for (let i = 0; i < numIcons; i++) {
+  //     const y = i * offset - 1 + offset / 2;
+  //     const r = Math.sqrt(1 - y * y);
+  //     const phi = i * increment;
+
+  //     const x = Math.cos(phi) * r;
+  //     const z = Math.sin(phi) * r;
+
+  //     newIcons.push({
+  //       x: x * 100,
+  //       y: y * 100,
+  //       z: z * 100,
+  //       scale: 1,
+  //       opacity: 1,
+  //       id: i,
+  //     });
+  //   }
+  //   setIconPositions(newIcons);
+  // }, [icons, images]);
+
+  // Handle mouse events
+  const handleMouseDown = (e: React.MouseEvent<HTMLCanvasElement>) => {
+    const rect = canvasRef.current?.getBoundingClientRect();
+    if (!rect || !canvasRef.current) return;
+
+    const x = e.clientX - rect.left;
+    const y = e.clientY - rect.top;
+
+    const ctx = canvasRef.current.getContext("2d");
+    if (!ctx) return;
+
+    iconPositions.forEach((icon) => {
+      const cosX = Math.cos(rotationRef.current.x);
+      const sinX = Math.sin(rotationRef.current.x);
+      const cosY = Math.cos(rotationRef.current.y);
+      const sinY = Math.sin(rotationRef.current.y);
+
+      const rotatedX = icon.x * cosY - icon.z * sinY;
+      const rotatedZ = icon.x * sinY + icon.z * cosY;
+      const rotatedY = icon.y * cosX + rotatedZ * sinX;
+
+      const screenX = canvasRef.current!.width / 2 + rotatedX;
+      const screenY = canvasRef.current!.height / 2 + rotatedY;
+
+      const scale = (rotatedZ + 200) / 300;
+      const radius = 20 * scale;
+      const dx = x - screenX;
+      const dy = y - screenY;
+
+      if (dx * dx + dy * dy < radius * radius) {
+        const targetX = -Math.atan2(
+          icon.y,
+          Math.sqrt(icon.x * icon.x + icon.z * icon.z),
+        );
+        const targetY = Math.atan2(icon.x, icon.z);
+
+        const currentX = rotationRef.current.x;
+        const currentY = rotationRef.current.y;
+        const distance = Math.sqrt(
+          Math.pow(targetX - currentX, 2) + Math.pow(targetY - currentY, 2),
+        );
+
+        const duration = Math.min(2000, Math.max(800, distance * 1000));
+
+        setTargetRotation({
+          x: targetX,
+          y: targetY,
+          startX: currentX,
+          startY: currentY,
+          distance,
+          startTime: performance.now(),
+          duration,
+        });
+        return;
+      }
+    });
+
+    setIsDragging(true);
+    setLastMousePos({ x: e.clientX, y: e.clientY });
+  };
+
+  const handleMouseMove = (e: React.MouseEvent<HTMLCanvasElement>) => {
+    const rect = canvasRef.current?.getBoundingClientRect();
+    if (rect) {
+      const x = e.clientX - rect.left;
+      const y = e.clientY - rect.top;
+      setMousePos({ x, y });
+    }
+
+    if (isDragging) {
+      const deltaX = e.clientX - lastMousePos.x;
+      const deltaY = e.clientY - lastMousePos.y;
+
+      rotationRef.current = {
+        x: rotationRef.current.x + deltaY * 0.002,
+        y: rotationRef.current.y + deltaX * 0.002,
+      };
+
+      setLastMousePos({ x: e.clientX, y: e.clientY });
+    }
+  };
+
+  const handleMouseUp = () => {
+    setIsDragging(false);
+  };
+
+  // Animation and rendering
+  useEffect(() => {
+    const canvas = canvasRef.current;
+    const ctx = canvas?.getContext("2d");
+    if (!canvas || !ctx) return;
+
+    const animate = () => {
+      ctx.clearRect(0, 0, canvas.width, canvas.height);
+
+      const centerX = canvas.width / 2;
+      const centerY = canvas.height / 2;
+      const maxDistance = Math.sqrt(centerX * centerX + centerY * centerY);
+      const dx = mousePos.x - centerX;
+      const dy = mousePos.y - centerY;
+      const distance = Math.sqrt(dx * dx + dy * dy);
+      const speed = 0.003 + (distance / maxDistance) * 0.01;
+
+      if (targetRotation) {
+        const elapsed = performance.now() - targetRotation.startTime;
+        const progress = Math.min(1, elapsed / targetRotation.duration);
+        const easedProgress = easeOutCubic(progress);
+
+        rotationRef.current = {
+          x:
+            targetRotation.startX +
+            (targetRotation.x - targetRotation.startX) * easedProgress,
+          y:
+            targetRotation.startY +
+            (targetRotation.y - targetRotation.startY) * easedProgress,
+        };
+
+        if (progress >= 1) {
+          setTargetRotation(null);
+        }
+      } else if (!isDragging) {
+        rotationRef.current = {
+          x: rotationRef.current.x + (dy / canvas.height) * speed,
+          y: rotationRef.current.y + (dx / canvas.width) * speed,
+        };
+      }
+
+      iconPositions.forEach((icon, index) => {
+        const cosX = Math.cos(rotationRef.current.x);
+        const sinX = Math.sin(rotationRef.current.x);
+        const cosY = Math.cos(rotationRef.current.y);
+        const sinY = Math.sin(rotationRef.current.y);
+
+        const rotatedX = icon.x * cosY - icon.z * sinY;
+        const rotatedZ = icon.x * sinY + icon.z * cosY;
+        const rotatedY = icon.y * cosX + rotatedZ * sinX;
+
+        const scale = (rotatedZ + 200) / 300;
+        const opacity = Math.max(0.2, Math.min(1, (rotatedZ + 150) / 200));
+
+        ctx.save();
+        ctx.translate(
+          canvas.width / 2 + rotatedX,
+          canvas.height / 2 + rotatedY,
+        );
+        ctx.scale(scale, scale);
+        ctx.globalAlpha = opacity;
+
+        if (icons || images) {
+          // Only try to render icons/images if they exist
+          if (
+            iconCanvasesRef.current[index] &&
+            imagesLoadedRef.current[index]
+          ) {
+            ctx.drawImage(iconCanvasesRef.current[index], -20, -20, 40, 40);
+          }
+        } else {
+          // Show numbered circles if no icons/images are provided
+          ctx.beginPath();
+          ctx.arc(0, 0, 20, 0, Math.PI * 2);
+          ctx.fillStyle = "#4444ff";
+          ctx.fill();
+          ctx.fillStyle = "white";
+          ctx.textAlign = "center";
+          ctx.textBaseline = "middle";
+          ctx.font = "16px Arial";
+          ctx.fillText(`${icon.id + 1}`, 0, 0);
+        }
+
+        ctx.restore();
+      });
+      animationFrameRef.current = requestAnimationFrame(animate);
+    };
+
+    animate();
+
+    return () => {
+      if (animationFrameRef.current) {
+        cancelAnimationFrame(animationFrameRef.current);
+      }
+    };
+  }, [icons, images, iconPositions, isDragging, mousePos, targetRotation]);
+
+  return (
+    <canvas
+      ref={canvasRef}
+      width={400}
+      height={400}
+      onMouseDown={handleMouseDown}
+      onMouseMove={handleMouseMove}
+      onMouseUp={handleMouseUp}
+      onMouseLeave={handleMouseUp}
+      className="rounded-full"
+      aria-label="Interactive 3D Icon Cloud"
+      role="img"
+    />
+  );
+}

package/src/dist/components/ui/scroll-area.tsx

@@ -33,9 +33,9 @@ const ScrollBar = React.forwardRef<
     className={cn(
       "flex touch-none select-none transition-colors",
       orientation === "vertical" &&
-        "h-full w-2.5 border-l border-l-transparent p-[1px]",
+      "h-full w-2.5 border-l border-l-transparent p-px",
       orientation === "horizontal" &&
-        "h-2.5 flex-col border-t border-t-transparent p-[1px]",
+      "h-2.5 flex-col border-t border-t-transparent p-px",
       className
     )}
     {...props}

package/src/dist/components/ui/sheet.tsx

@@ -3,7 +3,7 @@
 import * as React from "react";
 import * as SheetPrimitive from "@radix-ui/react-dialog";
 import { cva, type VariantProps } from "class-variance-authority";
-import { X } from "lucide-react";
+import { PanelRightClose } from "lucide-react";
 
 import { cn } from "@/lib/utils";
 
@@ -51,7 +51,7 @@ const sheetVariants = cva(
 
 interface SheetContentProps
   extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>,
-    VariantProps<typeof sheetVariants> {}
+  VariantProps<typeof sheetVariants> { }
 
 const SheetContent = React.forwardRef<
   React.ElementRef<typeof SheetPrimitive.Content>,
@@ -65,8 +65,8 @@ const SheetContent = React.forwardRef<
       {...props}
     >
       {children}
-      <SheetPrimitive.Close className="absolute right-4 top-7 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary">
-        <X className="h-4 w-4" />
+      <SheetPrimitive.Close className="absolute top-7 right-4 z-50 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary">
+        <PanelRightClose className="w-6 h-6 shrink-0 text-muted-foreground" />
         <span className="sr-only">Close</span>
       </SheetPrimitive.Close>
     </SheetPrimitive.Content>