From fbe1334aed051b2c7b31dee2f2c435d9e4199899 Mon Sep 17 00:00:00 2001
From: Need-an-AwP <1790414525klz@gmail.com>
Date: Fri, 22 Nov 2024 21:01:15 +0800
Subject: [PATCH] add resizable control example in www first commit

---
 .../www/content/docs/components/resizable.mdx | 52 +++++++++++++++++++
 .../default/example/resizable-control.tsx     | 47 +++++++++++++++++
 .../new-york/example/resizable-control.tsx    | 47 +++++++++++++++++
 apps/www/registry/registry-examples.ts        | 11 ++++
 4 files changed, 157 insertions(+)
 create mode 100644 apps/www/registry/default/example/resizable-control.tsx
 create mode 100644 apps/www/registry/new-york/example/resizable-control.tsx

diff --git a/apps/www/content/docs/components/resizable.mdx b/apps/www/content/docs/components/resizable.mdx
index d3acfe40928..049268e0320 100644
--- a/apps/www/content/docs/components/resizable.mdx
+++ b/apps/www/content/docs/components/resizable.mdx
@@ -127,3 +127,55 @@ export default function Example() {
   )
 }
 ```
+
+### Control
+
+You can control the panel status by using refs.
+
+<ComponentPreview
+  name="resizable-control"
+  description="A group of resizable panels with a button to control the panel."
+/>
+
+```tsx showLineNumbers {11,34,13-21}
+import { useRef } from "react"
+import { Button } from "@/components/ui/button"
+import { ImperativePanelHandle } from "react-resizable-panels"
+import {
+    ResizableHandle,
+    ResizablePanel,
+    ResizablePanelGroup,
+} from "@/components/ui/resizable"
+
+export default function Example() {
+    const leftPanelRef = useRef<ImperativePanelHandle>(null)
+
+    const toggleLeftPanel = () => {
+        if (leftPanelRef.current) {
+            if (leftPanelRef.current.isCollapsed()) {
+                leftPanelRef.current.expand()
+            } else {
+                leftPanelRef.current.collapse()
+            }
+        }
+    }
+
+    return (
+        <ResizablePanelGroup direction="horizontal">
+            <ResizablePanel>
+                <Button onClick={toggleLeftPanel}>
+                    Toggle Left Panel
+                </Button>
+            </ResizablePanel>
+            <ResizableHandle />
+            <ResizablePanel
+                defaultSize={50}
+                collapsible={true}
+                ref={leftPanelRef}
+            >
+                Left Panel
+            </ResizablePanel>
+        </ResizablePanelGroup>
+    )
+}
+```
diff --git a/apps/www/registry/default/example/resizable-control.tsx b/apps/www/registry/default/example/resizable-control.tsx
new file mode 100644
index 00000000000..ccdc33429b6
--- /dev/null
+++ b/apps/www/registry/default/example/resizable-control.tsx
@@ -0,0 +1,47 @@
+import { useRef } from "react"
+import { Button } from "@/registry/default/ui/button"
+import {
+    ResizableHandle,
+    ResizablePanel,
+    ResizablePanelGroup,
+} from "@/registry/default/ui/resizable"
+import { ImperativePanelHandle } from "react-resizable-panels"
+
+export default function ResizableDemo() {
+    const leftPanelRef = useRef<ImperativePanelHandle>(null)
+
+    const toggleLeftPanel = () => {
+        if (leftPanelRef.current) {
+            if (leftPanelRef.current.isCollapsed()) {
+                leftPanelRef.current.expand()
+            } else {
+                leftPanelRef.current.collapse()
+            }
+        }
+    }
+
+    return (
+        <ResizablePanelGroup
+            direction="horizontal"
+            className="max-w-md rounded-lg border md:min-w-[450px]"
+        >
+            <ResizablePanel>
+                <div className="flex h-[200px] items-center justify-center p-6">
+                    <Button onClick={toggleLeftPanel}>
+                        Toggle Left Panel
+                    </Button>
+                </div>
+            </ResizablePanel>
+            <ResizableHandle />
+            <ResizablePanel
+                defaultSize={50}
+                collapsible={true}
+                ref={leftPanelRef}
+            >
+                <div className="flex h-[200px] items-center justify-center p-6">
+                    Left Resizable Panel
+                </div>
+            </ResizablePanel>
+        </ResizablePanelGroup>
+    )
+}
\ No newline at end of file
diff --git a/apps/www/registry/new-york/example/resizable-control.tsx b/apps/www/registry/new-york/example/resizable-control.tsx
new file mode 100644
index 00000000000..07f0cdcc5b5
--- /dev/null
+++ b/apps/www/registry/new-york/example/resizable-control.tsx
@@ -0,0 +1,47 @@
+import {
+    ResizableHandle,
+    ResizablePanel,
+    ResizablePanelGroup,
+} from "@/registry/new-york/ui/resizable"
+import { useRef } from "react"
+import { Button } from "@/registry/new-york/ui/button"
+import { ImperativePanelHandle } from "react-resizable-panels"
+
+export default function ResizableDemo() {
+    const leftPanelRef = useRef<ImperativePanelHandle>(null)
+
+    const toggleLeftPanel = () => {
+        if (leftPanelRef.current) {
+            if (leftPanelRef.current.isCollapsed()) {
+                leftPanelRef.current.expand()
+            } else {
+                leftPanelRef.current.collapse()
+            }
+        }
+    }
+
+    return (
+        <ResizablePanelGroup
+            direction="horizontal"
+            className="max-w-md rounded-lg border md:min-w-[450px]"
+        >
+            <ResizablePanel>
+                <div className="flex h-[200px] items-center justify-center p-6">
+                    <Button onClick={toggleLeftPanel}>
+                        Toggle Left Panel
+                    </Button>
+                </div>
+            </ResizablePanel>
+            <ResizableHandle />
+            <ResizablePanel
+                defaultSize={50}
+                collapsible={true}
+                ref={leftPanelRef}
+            >
+                <div className="flex h-[200px] items-center justify-center p-6">
+                    Left Resizable Panel
+                </div>
+            </ResizablePanel>
+        </ResizablePanelGroup>
+    )
+}
\ No newline at end of file
diff --git a/apps/www/registry/registry-examples.ts b/apps/www/registry/registry-examples.ts
index c4806706582..9e68c8982f1 100644
--- a/apps/www/registry/registry-examples.ts
+++ b/apps/www/registry/registry-examples.ts
@@ -962,6 +962,17 @@ export const examples: Registry = [
       },
     ],
   },
+  {
+    name: "resizable-control",
+    type: "registry:example",
+    registryDependencies: ["resizable"],
+    files: [
+      {
+        path: "example/resizable-control.tsx",
+        type: "registry:example",
+      },
+    ],
+  },
   {
     name: "scroll-area-demo",
     type: "registry:example",