sidebars

packages/website/package.json

@@ -40,6 +40,7 @@
     "@next/third-parties": "^14.2.3",
     "@radix-ui/react-accordion": "^1.2.1",
     "@radix-ui/react-checkbox": "^1.1.2",
+    "@radix-ui/react-collapsible": "^1.1.1",
     "@radix-ui/react-dialog": "^1.1.2",
     "@radix-ui/react-icons": "^1.3.1",
     "@radix-ui/react-label": "^2.1.0",

packages/website/src/components/ui/collapsible.tsx

@@ -0,0 +1,9 @@
+import * as CollapsiblePrimitive from '@radix-ui/react-collapsible';
+
+const Collapsible = CollapsiblePrimitive.Root;
+
+const CollapsibleTrigger = CollapsiblePrimitive.CollapsibleTrigger;
+
+const CollapsibleContent = CollapsiblePrimitive.CollapsibleContent;
+
+export { Collapsible, CollapsibleTrigger, CollapsibleContent };

packages/website/src/features/Debug/DebugPage.tsx

@@ -1,7 +1,6 @@
 'use client';
 import { ExternalLink } from 'lucide-react'; // for external link icon
 import { CommandPreview } from '@/components/CommandPreview';
-import Image from 'next/image';
 import Link from 'next/link';
 
 export const DebugPage = () => {
@@ -98,7 +97,11 @@ export const DebugPage = () => {
       </div>
 
       <div className="mb-4 w-full overflow-x-auto">
-        <Image src="/images/guide_debug_1.png" alt="first debug guide" />
+        <img
+          width="100%"
+          src="/images/guide_debug_1.png"
+          alt="first debug guide"
+        />
       </div>
 
       <h3 className="text-xl font-semibold mb-3 mt-9">Trace</h3>
@@ -154,11 +157,10 @@ export const DebugPage = () => {
       </div>
 
       <div className="mb-4 w-full overflow-x-auto">
-        <Image
+        <img
           src="/images/guide_debug_2.png"
           alt="second debug guide"
-          width={800} // adjust based on your needs
-          height={400} // adjust based on your needs
+          width="100%"
         />
       </div>