gladvn 0.2.17 → 0.2.18

package/src/dev/showcase/radio-group.tsx

@@ -1,9 +1,13 @@
-import { useDevContext } from "../../dev/components/dev-context";
 import { zodResolver } from "@hookform/resolvers/zod";
-import { useState } from "react";
 import { Controller, useForm } from "react-hook-form";
 import * as z from "zod";
 
+import { RadioGroupPreset } from "../../components/macro/radio-group-preset";
+import { Button } from "../../components/micro/button";
+import { Field, FieldError, FieldLabel } from "../../components/micro/field";
+import { Label } from "../../components/micro/label";
+import { RadioGroup, RadioGroupItem } from "../../components/micro/radio-group";
+import { useDevContext } from "../../dev/components/dev-context";
 import {
   DocsCode,
   DocsH3,
@@ -15,12 +19,6 @@ import {
 } from "../../dev/components/showcase";
 import { type Size } from "../../lib/types";
 
-import { RadioGroupPreset } from "../../components/macro/radio-group-preset";
-import { Button } from "../../components/micro/button";
-import { Field, FieldError, FieldLabel } from "../../components/micro/field";
-import { Label } from "../../components/micro/label";
-import { RadioGroup, RadioGroupItem } from "../../components/micro/radio-group";
-
 // ──────────────────────────────────────────────────────────
 // RHF Form Demo (Macro)
 // ──────────────────────────────────────────────────────────
@@ -108,7 +106,8 @@ function RadioGroupMacroShowcase({ globalSize }: { globalSize: Size }) {
         <ExampleSection
           label="Tiêu chuẩn"
           description="Nhóm radio cơ bản với mảng options."
-          codeString={`<RadioGroupPreset className="w-full"
+          codeString={`<RadioGroupPreset
+    className="w-full"
     label="Sở thích"
     description="Chọn một ngôn ngữ lập trình bạn yêu thích nhất."
     options={[
@@ -117,8 +116,7 @@ function RadioGroupMacroShowcase({ globalSize }: { globalSize: Size }) {
       { value: "rust", label: "Rust" },
     ]}
     defaultValue="ts"
-  />
-`}
+  />`}
         >
           <RadioGroupPreset
             className="w-full"
@@ -138,16 +136,15 @@ function RadioGroupMacroShowcase({ globalSize }: { globalSize: Size }) {
           label="Trạng thái Lỗi (Error)"
           description="Báo lỗi khi form submit mà user chưa chọn."
           codeString={`<div className="w-full flex flex-col gap-6">
-  <RadioGroupPreset
-    label="Gói dịch vụ (Lỗi)"
-    options={[
-      { value: "free", label: "Miễn phí" }, 
-      { value: "pro", label: "Trả phí" }
-    ]}
-    errorMessage="Vui lòng chọn một gói dịch vụ để tiếp tục."
-  />
-</div>
-`}
+    <RadioGroupPreset
+      label="Gói dịch vụ (Lỗi)"
+      options={[
+        { value: "free", label: "Miễn phí" },
+        { value: "pro", label: "Trả phí" },
+      ]}
+      errorMessage="Vui lòng chọn một gói dịch vụ để tiếp tục."
+    />
+  </div>`}
         >
           <div className="w-full flex flex-col gap-6">
             <RadioGroupPreset
@@ -167,17 +164,21 @@ function RadioGroupMacroShowcase({ globalSize }: { globalSize: Size }) {
         <ExampleSection
           label="Mô tả cho từng Option"
           description="Truyền description vào mảng options để chú thích chi tiết."
-          codeString={`<RadioGroupPreset className="w-full"
+          codeString={`<RadioGroupPreset
+    className="w-full"
     label="Giao diện (Theme)"
     description="Chế độ Mặc định hệ thống sẽ tự động đồng bộ theo OS."
     options={[
       { value: "light", label: "Sáng (Light)" },
       { value: "dark", label: "Tối (Dark)" },
-      { value: "system", label: "Theo hệ thống", description: "Khuyên dùng để tiết kiệm pin" },
+      {
+        value: "system",
+        label: "Theo hệ thống",
+        description: "Khuyên dùng để tiết kiệm pin",
+      },
     ]}
     defaultValue="system"
-  />
-`}
+  />`}
         >
           <RadioGroupPreset
             className="w-full"
@@ -200,7 +201,8 @@ function RadioGroupMacroShowcase({ globalSize }: { globalSize: Size }) {
         <ExampleSection
           label="Khóa / Bất hoạt (Disabled)"
           description="Người dùng không thể tương tác với form."
-          codeString={`<RadioGroupPreset className="w-full"
+          codeString={`<RadioGroupPreset
+    className="w-full"
     label="Phiên bản (Disabled)"
     description="Bạn không thể hạ cấp phiên bản tại thời điểm này."
     options={[
@@ -209,8 +211,7 @@ function RadioGroupMacroShowcase({ globalSize }: { globalSize: Size }) {
     ]}
     defaultValue="v2"
     disabled
-  />
-`}
+  />`}
         >
           <RadioGroupPreset
             className="w-full"
@@ -250,17 +251,29 @@ function RadioGroupMicroShowcase({ globalSize }: { globalSize: Size }) {
         <ExampleSection
           label="Cơ bản (Primitive)"
           description="Ghép nối thủ công RadioGroupItem và Label."
-          codeString={`<RadioGroup defaultValue="comfortable" className="flex flex-col gap-2 w-full">
-  <div className="flex items-center gap-3">
-    <RadioGroupItem value="default" id="rg-m-1" />
-    <Label htmlFor="rg-m-1" className="cursor-pointer font-normal">Mặc định</Label>
-  </div>
-  <div className="flex items-center gap-3">
-    <RadioGroupItem value="comfortable" id="rg-m-2" />
-    <Label htmlFor="rg-m-2" className="cursor-pointer font-normal">Thoải mái</Label>
-  </div>
-</RadioGroup>
-`}
+          codeString={`<RadioGroup
+    defaultValue="comfortable"
+    className="flex flex-col gap-2 w-full"
+  >
+    <div className="flex items-center gap-3">
+      <RadioGroupItem value="default" id="rg-m-1" />
+      <Label
+        htmlFor="rg-m-1"
+        className="cursor-pointer font-normal"
+      >
+        Mặc định
+      </Label>
+    </div>
+    <div className="flex items-center gap-3">
+      <RadioGroupItem value="comfortable" id="rg-m-2" />
+      <Label
+        htmlFor="rg-m-2"
+        className="cursor-pointer font-normal"
+      >
+        Thoải mái
+      </Label>
+    </div>
+  </RadioGroup>`}
         >
           <RadioGroup
             defaultValue="comfortable"
@@ -289,23 +302,42 @@ function RadioGroupMicroShowcase({ globalSize }: { globalSize: Size }) {
           label="Bố cục Ngang (Horizontal)"
           description="Hiển thị các tuỳ chọn trên một hàng ngang."
           codeString={`<div className="space-y-3 w-full">
-  <Label className="block text-muted-foreground">Kích thước</Label>
-  <RadioGroup defaultValue="m" className="flex items-center gap-6">
-    <div className="flex items-center gap-2">
-      <RadioGroupItem value="s" id="rg-s" />
-      <Label htmlFor="rg-s" className="cursor-pointer font-normal">S</Label>
-    </div>
-    <div className="flex items-center gap-2">
-      <RadioGroupItem value="m" id="rg-m" />
-      <Label htmlFor="rg-m" className="cursor-pointer font-normal">M</Label>
-    </div>
-    <div className="flex items-center gap-2">
-      <RadioGroupItem value="l" id="rg-l" />
-      <Label htmlFor="rg-l" className="cursor-pointer font-normal">L</Label>
-    </div>
-  </RadioGroup>
-</div>
-`}
+    <Label className="block text-muted-foreground">
+      Kích thước
+    </Label>
+    <RadioGroup
+      defaultValue="m"
+      className="flex items-center gap-6"
+    >
+      <div className="flex items-center gap-2">
+        <RadioGroupItem value="s" id="rg-s" />
+        <Label
+          htmlFor="rg-s"
+          className="cursor-pointer font-normal"
+        >
+          S
+        </Label>
+      </div>
+      <div className="flex items-center gap-2">
+        <RadioGroupItem value="m" id="rg-m" />
+        <Label
+          htmlFor="rg-m"
+          className="cursor-pointer font-normal"
+        >
+          M
+        </Label>
+      </div>
+      <div className="flex items-center gap-2">
+        <RadioGroupItem value="l" id="rg-l" />
+        <Label
+          htmlFor="rg-l"
+          className="cursor-pointer font-normal"
+        >
+          L
+        </Label>
+      </div>
+    </RadioGroup>
+  </div>`}
         >
           <div className="space-y-3 w-full">
             <Label className="block text-muted-foreground">Kích thước</Label>
@@ -338,38 +370,40 @@ function RadioGroupMicroShowcase({ globalSize }: { globalSize: Size }) {
           label="Ghép nối Field thủ công"
           description="Tạo layout RadioGroup phức tạp với Field."
           codeString={`<Field data-invalid={true} className="w-full gap-4">
-  <FieldLabel>Gói cước của bạn</FieldLabel>
-  <RadioGroup defaultValue="monthly" className="flex flex-col gap-2">
-    <Field orientation="horizontal">
-      <RadioGroupItem
-        value="monthly"
-        id="plan-1"
-        aria-invalid={true}
-      />
-      <FieldLabel
-        htmlFor="plan-1"
-        className="font-normal cursor-pointer"
-      >
-        Thanh toán tháng (\$10/mo)
-      </FieldLabel>
-    </Field>
-    <Field orientation="horizontal">
-      <RadioGroupItem
-        value="yearly"
-        id="plan-2"
-        aria-invalid={true}
-      />
-      <FieldLabel
-        htmlFor="plan-2"
-        className="font-normal cursor-pointer"
-      >
-        Thanh toán năm (\$100/yr)
-      </FieldLabel>
-    </Field>
-  </RadioGroup>
-  <FieldError>Thẻ của bạn đã bị từ chối.</FieldError>
-</Field>
-`}
+    <FieldLabel>Gói cước của bạn</FieldLabel>
+    <RadioGroup
+      defaultValue="monthly"
+      className="flex flex-col gap-2"
+    >
+      <Field orientation="horizontal">
+        <RadioGroupItem
+          value="monthly"
+          id="plan-1"
+          aria-invalid={true}
+        />
+        <FieldLabel
+          htmlFor="plan-1"
+          className="font-normal cursor-pointer"
+        >
+          Thanh toán tháng ($10/mo)
+        </FieldLabel>
+      </Field>
+      <Field orientation="horizontal">
+        <RadioGroupItem
+          value="yearly"
+          id="plan-2"
+          aria-invalid={true}
+        />
+        <FieldLabel
+          htmlFor="plan-2"
+          className="font-normal cursor-pointer"
+        >
+          Thanh toán năm ($100/yr)
+        </FieldLabel>
+      </Field>
+    </RadioGroup>
+    <FieldError>Thẻ của bạn đã bị từ chối.</FieldError>
+  </Field>`}
         >
           <Field data-invalid={true} className="w-full gap-4">
             <FieldLabel>Gói cước của bạn</FieldLabel>
@@ -410,25 +444,35 @@ function RadioGroupMicroShowcase({ globalSize }: { globalSize: Size }) {
         <ExampleSection
           label="Card Layout (UI Nâng cao)"
           description="Radio nhưng thiết kế dưới dạng Card để bấm."
-          codeString={`<RadioGroup defaultValue="card-2" className="grid grid-cols-2 gap-4 w-full">
-  <Label
-    htmlFor="card-1"
-    className="flex flex-col items-center justify-between rounded-md border-2 border-muted bg-popover p-4 hover:bg-accent hover:text-accent-foreground [&:has([data-state=checked])]:border-primary cursor-pointer gap-4"
+          codeString={`<RadioGroup
+    defaultValue="card-2"
+    className="grid grid-cols-2 gap-4 w-full"
   >
-    <RadioGroupItem value="card-1" id="card-1" className="sr-only" />
-    <div className="text-xl">☀️</div>
-    <span>Sáng</span>
-  </Label>
-  <Label
-    htmlFor="card-2"
-    className="flex flex-col items-center justify-between rounded-md border-2 border-muted bg-popover p-4 hover:bg-accent hover:text-accent-foreground [&:has([data-state=checked])]:border-primary cursor-pointer gap-4"
-  >
-    <RadioGroupItem value="card-2" id="card-2" className="sr-only" />
-    <div className="text-xl">🌙</div>
-    <span>Tối</span>
-  </Label>
-</RadioGroup>
-`}
+    <Label
+      htmlFor="card-1"
+      className="flex flex-col items-center justify-between rounded-md border-2 border-muted bg-popover p-4 hover:bg-accent hover:text-accent-foreground [&:has([data-state=checked])]:border-primary cursor-pointer gap-4"
+    >
+      <RadioGroupItem
+        value="card-1"
+        id="card-1"
+        className="sr-only"
+      />
+      <div className="text-xl">☀️</div>
+      <span>Sáng</span>
+    </Label>
+    <Label
+      htmlFor="card-2"
+      className="flex flex-col items-center justify-between rounded-md border-2 border-muted bg-popover p-4 hover:bg-accent hover:text-accent-foreground [&:has([data-state=checked])]:border-primary cursor-pointer gap-4"
+    >
+      <RadioGroupItem
+        value="card-2"
+        id="card-2"
+        className="sr-only"
+      />
+      <div className="text-xl">🌙</div>
+      <span>Tối</span>
+    </Label>
+  </RadioGroup>`}
         >
           <RadioGroup
             defaultValue="card-2"
@@ -459,39 +503,78 @@ function RadioGroupMicroShowcase({ globalSize }: { globalSize: Size }) {
         description="So sánh nhanh khi nào dùng Micro và Macro."
         fullWidth
         codeString={`<div className="grid grid-cols-1 gap-6 md:grid-cols-2">
-  {/* Story 1: Macro wins */}
-  <div className="rounded-xl border border-border bg-card p-5 flex flex-col gap-4">
-    <div className="flex items-start gap-3">
-      <span className="mt-0.5 shrink-0 rounded-full bg-green-500/10 p-1.5 text-green-600">
-        <svg xmlns="http://www.w3.org/2000/svg" className="size-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>
-      </span>
-      <div>
-        <p className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">Story 1 · Dùng Macro</p>
-        <h3 className="mt-0.5 text-sm font-semibold text-foreground">Câu hỏi khảo sát</h3>
+    {/* Story 1: Macro wins */}
+    <div className="rounded-xl border border-border bg-card p-5 flex flex-col gap-4">
+      <div className="flex items-start gap-3">
+        <span className="mt-0.5 shrink-0 rounded-full bg-green-500/10 p-1.5 text-green-600">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            className="size-4"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="2"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            aria-hidden="true"
+          >
+            <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" />
+          </svg>
+        </span>
+        <div>
+          <p className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">
+            Story 1 · Dùng Macro
+          </p>
+          <h3 className="mt-0.5 text-sm font-semibold text-foreground">
+            Câu hỏi khảo sát
+          </h3>
+        </div>
       </div>
+      <p className="text-xs text-muted-foreground leading-relaxed">
+        Bạn cần làm một danh sách dài các tuỳ chọn dạng chữ
+        từ trên xuống dưới. Macro{" "}
+        <DocsCode>RadioGroupPreset</DocsCode> sinh ra để xử
+        lý việc này nhanh gọn qua thuộc tính{" "}
+        <DocsCode>options</DocsCode>.
+      </p>
     </div>
-    <p className="text-xs text-muted-foreground leading-relaxed">
-      Bạn cần làm một danh sách dài các tuỳ chọn dạng chữ từ trên xuống dưới. Macro <DocsCode>RadioGroupPreset</DocsCode> sinh ra để xử lý việc này nhanh gọn qua thuộc tính <DocsCode>options</DocsCode>.
-    </p>
-  </div>
 
-  {/* Story 2: Micro wins */}
-  <div className="rounded-xl border border-border bg-card p-5 flex flex-col gap-4">
-    <div className="flex items-start gap-3">
-      <span className="mt-0.5 shrink-0 rounded-full bg-blue-500/10 p-1.5 text-blue-600">
-        <svg xmlns="http://www.w3.org/2000/svg" className="size-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"/></svg>
-      </span>
-      <div>
-        <p className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">Story 2 · Dùng Micro</p>
-        <h3 className="mt-0.5 text-sm font-semibold text-foreground">Radio Ẩn (Hidden Radio Card)</h3>
+    {/* Story 2: Micro wins */}
+    <div className="rounded-xl border border-border bg-card p-5 flex flex-col gap-4">
+      <div className="flex items-start gap-3">
+        <span className="mt-0.5 shrink-0 rounded-full bg-blue-500/10 p-1.5 text-blue-600">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            className="size-4"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="2"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            aria-hidden="true"
+          >
+            <path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z" />
+          </svg>
+        </span>
+        <div>
+          <p className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">
+            Story 2 · Dùng Micro
+          </p>
+          <h3 className="mt-0.5 text-sm font-semibold text-foreground">
+            Radio Ẩn (Hidden Radio Card)
+          </h3>
+        </div>
       </div>
+      <p className="text-xs text-muted-foreground leading-relaxed">
+        Bạn muốn người dùng click vào một khối Card lớn
+        (chứa ảnh sản phẩm, mô tả) thay vì click vào nút
+        tròn. Bạn sẽ dùng Micro để ẩn đi{" "}
+        <DocsCode>RadioGroupItem</DocsCode> và style{" "}
+        <DocsCode>Label</DocsCode> thành 1 cái thẻ Card.
+      </p>
     </div>
-    <p className="text-xs text-muted-foreground leading-relaxed">
-      Bạn muốn người dùng click vào một khối Card lớn (chứa ảnh sản phẩm, mô tả) thay vì click vào nút tròn. Bạn sẽ dùng Micro để ẩn đi <DocsCode>RadioGroupItem</DocsCode> và style <DocsCode>Label</DocsCode> thành 1 cái thẻ Card.
-    </p>
-  </div>
-</div>
-`}
+  </div>`}
       >
         <div className="grid grid-cols-1 gap-6 md:grid-cols-2">
           {/* Story 1: Macro wins */}

package/src/dev/showcase/resizable.tsx

@@ -23,21 +23,25 @@ function ResizableMicroShowcase() {
         label="Horizontal Split"
         description="Kéo tay cầm để thay đổi kích thước bảng theo chiều ngang."
         codeString={`<ResizablePanelGroup
-  orientation="horizontal"
-  className="max-w-md rounded-xl border border-border bg-card"
->
-  <ResizablePanel defaultSize={50}>
-    <div className="flex h-[200px] items-center justify-center p-6">
-      <span className="font-semibold text-sm">Sidebar</span>
-    </div>
-  </ResizablePanel>
-  <ResizableHandle withHandle />
-  <ResizablePanel defaultSize={50}>
-    <div className="flex h-full items-center justify-center p-6">
-      <span className="font-semibold text-sm">Content</span>
-    </div>
-  </ResizablePanel>
-</ResizablePanelGroup>`}
+    orientation="horizontal"
+    className="max-w-md rounded-xl border border-border bg-card"
+  >
+    <ResizablePanel defaultSize={50}>
+      <div className="flex h-[200px] items-center justify-center p-6">
+        <span className="font-semibold text-sm">
+          Sidebar
+        </span>
+      </div>
+    </ResizablePanel>
+    <ResizableHandle withHandle />
+    <ResizablePanel defaultSize={50}>
+      <div className="flex h-full items-center justify-center p-6">
+        <span className="font-semibold text-sm">
+          Content
+        </span>
+      </div>
+    </ResizablePanel>
+  </ResizablePanelGroup>`}
       >
         <ResizablePanelGroup
           orientation="horizontal"
@@ -62,21 +66,23 @@ function ResizableMicroShowcase() {
         label="Vertical Split"
         description='orientation="vertical" chia bảng theo chiều dọc.'
         codeString={`<ResizablePanelGroup
-  orientation="vertical"
-  className="max-w-md rounded-xl border border-border bg-card"
->
-  <ResizablePanel defaultSize={50}>
-    <div className="flex h-[120px] items-center justify-center p-6">
-      <span className="font-semibold text-sm">Top</span>
-    </div>
-  </ResizablePanel>
-  <ResizableHandle withHandle />
-  <ResizablePanel defaultSize={50}>
-    <div className="flex h-[120px] items-center justify-center p-6">
-      <span className="font-semibold text-sm">Bottom</span>
-    </div>
-  </ResizablePanel>
-</ResizablePanelGroup>`}
+    orientation="vertical"
+    className="max-w-md rounded-xl border border-border bg-card"
+  >
+    <ResizablePanel defaultSize={50}>
+      <div className="flex h-[120px] items-center justify-center p-6">
+        <span className="font-semibold text-sm">Top</span>
+      </div>
+    </ResizablePanel>
+    <ResizableHandle withHandle />
+    <ResizablePanel defaultSize={50}>
+      <div className="flex h-[120px] items-center justify-center p-6">
+        <span className="font-semibold text-sm">
+          Bottom
+        </span>
+      </div>
+    </ResizablePanel>
+  </ResizablePanelGroup>`}
       >
         <ResizablePanelGroup
           orientation="vertical"
@@ -150,31 +156,35 @@ function ResizableMicroShowcase() {
         label="Nested Layout"
         description="Bố cục phức tạp với các nhóm có thể thay đổi kích thước lồng nhau."
         codeString={`<ResizablePanelGroup
-  orientation="horizontal"
-  className="max-w-md rounded-xl border border-border bg-card"
->
-  <ResizablePanel defaultSize={25} minSize={15}>
-    <div className="flex h-[250px] items-center justify-center p-6">
-      <span className="font-semibold text-sm">Nav</span>
-    </div>
-  </ResizablePanel>
-  <ResizableHandle />
-  <ResizablePanel defaultSize={75}>
-    <ResizablePanelGroup orientation="vertical">
-      <ResizablePanel defaultSize={25} minSize={20}>
-        <div className="flex h-full items-center justify-center p-6">
-          <span className="font-semibold text-sm">Top Bar</span>
-        </div>
-      </ResizablePanel>
-      <ResizableHandle />
-      <ResizablePanel defaultSize={75}>
-        <div className="flex h-full items-center justify-center p-6">
-          <span className="font-semibold text-sm">Main Content</span>
-        </div>
-      </ResizablePanel>
-    </ResizablePanelGroup>
-  </ResizablePanel>
-</ResizablePanelGroup>`}
+    orientation="horizontal"
+    className="max-w-md rounded-xl border border-border bg-card"
+  >
+    <ResizablePanel defaultSize={25} minSize={15}>
+      <div className="flex h-[250px] items-center justify-center p-6">
+        <span className="font-semibold text-sm">Nav</span>
+      </div>
+    </ResizablePanel>
+    <ResizableHandle />
+    <ResizablePanel defaultSize={75}>
+      <ResizablePanelGroup orientation="vertical">
+        <ResizablePanel defaultSize={25} minSize={20}>
+          <div className="flex h-full items-center justify-center p-6">
+            <span className="font-semibold text-sm">
+              Top Bar
+            </span>
+          </div>
+        </ResizablePanel>
+        <ResizableHandle />
+        <ResizablePanel defaultSize={75}>
+          <div className="flex h-full items-center justify-center p-6">
+            <span className="font-semibold text-sm">
+              Main Content
+            </span>
+          </div>
+        </ResizablePanel>
+      </ResizablePanelGroup>
+    </ResizablePanel>
+  </ResizablePanelGroup>`}
       >
         <ResizablePanelGroup
           orientation="horizontal"