From 1f0b39e1bda248a8b60a43c15184eba8bd52d501 Mon Sep 17 00:00:00 2001
From: Quan <zhouquan147369@gmail.com>
Date: Sun, 16 Nov 2025 22:15:30 +0800
Subject: [PATCH] feat: enhance ComponentLoader with resizable panels

---
 apps/www/components/ComponentLoader.vue | 20 +++++++++++++++++++-
 1 file changed, 19 insertions(+), 1 deletion(-)

diff --git a/apps/www/components/ComponentLoader.vue b/apps/www/components/ComponentLoader.vue
index 918220f..af1d6d6 100644
--- a/apps/www/components/ComponentLoader.vue
+++ b/apps/www/components/ComponentLoader.vue
@@ -1,4 +1,10 @@
 <script lang="ts" setup>
+import {
+  ResizableHandle,
+  ResizablePanel,
+  ResizablePanelGroup,
+} from '@repo/shadcn-vue/components/ui/resizable'
+
 interface Props {
   componentName?: string
   id?: string
@@ -21,8 +27,20 @@ withDefaults(defineProps<Props>(), {
           :label="label || componentName"
           icon="lucide:laptop-minimal"
         >
-          <ComponentViewer :component-name="componentName" />
+          <ResizablePanelGroup direction="horizontal">
+            <ResizablePanel :default-size="100">
+              <div class="h-[600px] overflow-auto">
+                <ComponentViewer :component-name="componentName" />
+              </div>
+            </ResizablePanel>
+            <ResizableHandle
+              class="translate-x-px border-none [&>div]:shrink-0"
+              with-handle
+            />
+            <ResizablePanel :default-size="0" />
+          </ResizablePanelGroup>
         </div>
+
         <CodeViewerTab
           v-bind="$props"
           label="Code"