gladvn 0.2.36 → 0.2.37

package/src/dev/showcase/resizable.tsx

@@ -7,22 +7,15 @@ import {
   DocsCode,
   DocsP,
   ExampleGrid,
-  ExampleSection,
+  ShowcaseExample,
   Showcase,
   ShowcaseDocs
 } from "../../dev/components/showcase";
 
-// ──────────────────────────────────────────────────────────
-// SECTION 1: Micro Content
-// ──────────────────────────────────────────────────────────
 function ResizableMicroShowcase() {
   return (
-    <div className="space-y-10 mt-6">
-      {/* Horizontal split */}
-      <ExampleSection
-        label="Horizontal Split"
-        description="Kéo tay cầm để thay đổi kích thước bảng theo chiều ngang."
-        codeString={`<ResizablePanelGroup
+    <div className="space-y-10">
+      <ShowcaseExample title="Horizontal Split" description="Kéo tay cầm để thay đổi kích thước bảng theo chiều ngang." code={`<ResizablePanelGroup
     orientation="horizontal"
     className="max-w-md rounded-xl border border-border bg-card"
   >
@@ -41,37 +34,34 @@ function ResizableMicroShowcase() {
         </span>
       </div>
     </ResizablePanel>
-  </ResizablePanelGroup>`}
-      >
-        <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>
-      </ExampleSection>
+  </ResizablePanelGroup>`} preview={
+                  <>
+          <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">Thanh bên (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">Nội dung</span>
+                      </div>
+                    </ResizablePanel>
+                  </ResizablePanelGroup>
+                  </>
+                } />
 
-      {/* Vertical split */}
-      <ExampleSection
-        label="Vertical Split"
-        description='orientation="vertical" chia bảng theo chiều dọc.'
-        codeString={`<ResizablePanelGroup
+      <ShowcaseExample title="Vertical Split" description='orientation="vertical" chia bảng theo chiều dọc.' code={`<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>
+        <span className="font-semibold text-sm">Trên</span>
       </div>
     </ResizablePanel>
     <ResizableHandle withHandle />
@@ -82,86 +72,78 @@ function ResizableMicroShowcase() {
         </span>
       </div>
     </ResizablePanel>
-  </ResizablePanelGroup>`}
-      >
-        <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>
-      </ExampleSection>
+  </ResizablePanelGroup>`} preview={
+                  <>
+          <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">Trên</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">Dưới</span>
+                      </div>
+                    </ResizablePanel>
+                  </ResizablePanelGroup>
+                  </>
+                } />
 
-      {/* Handle variants */}
       <ExampleGrid>
-        <ExampleSection
-          label="With Handle Grip"
-          description="withHandle hiển thị thanh tay cầm trực quan ở giữa divider."
-          codeString={`<ResizableHandle withHandle />`}
-        >
-          <ResizablePanelGroup
-            orientation="horizontal"
-            className="rounded-xl border border-border bg-card"
-          >
-            <ResizablePanel defaultSize={50}>
-              <div className="flex h-[120px] items-center justify-center p-4">
-                <span className="text-sm font-medium">Panel A</span>
-              </div>
-            </ResizablePanel>
-            <ResizableHandle withHandle />
-            <ResizablePanel defaultSize={50}>
-              <div className="flex h-full items-center justify-center p-4">
-                <span className="text-sm font-medium">Panel B</span>
-              </div>
-            </ResizablePanel>
-          </ResizablePanelGroup>
-        </ExampleSection>
+        <ShowcaseExample title="With Handle Grip" description="withHandle hiển thị thanh tay cầm trực quan ở giữa divider." code={`<ResizableHandle withHandle />`} preview={
+                      <>
+              <ResizablePanelGroup
+                          orientation="horizontal"
+                          className="rounded-xl border border-border bg-card"
+                        >
+                          <ResizablePanel defaultSize={50}>
+                            <div className="flex h-[120px] items-center justify-center p-4">
+                              <span className="text-sm font-medium">Bảng A</span>
+                            </div>
+                          </ResizablePanel>
+                          <ResizableHandle withHandle />
+                          <ResizablePanel defaultSize={50}>
+                            <div className="flex h-full items-center justify-center p-4">
+                              <span className="text-sm font-medium">Bảng B</span>
+                            </div>
+                          </ResizablePanel>
+                        </ResizablePanelGroup>
+                      </>
+                    } />
 
-        <ExampleSection
-          label="Plain Divider"
-          description="Bỏ withHandle để chỉ hiển thị đường phân cách mỏng, không có visual grip."
-          codeString={`<ResizableHandle />`}
-        >
-          <ResizablePanelGroup
-            orientation="horizontal"
-            className="rounded-xl border border-border bg-card"
-          >
-            <ResizablePanel defaultSize={50}>
-              <div className="flex h-[120px] items-center justify-center p-4">
-                <span className="text-sm font-medium">Panel A</span>
-              </div>
-            </ResizablePanel>
-            <ResizableHandle />
-            <ResizablePanel defaultSize={50}>
-              <div className="flex h-full items-center justify-center p-4">
-                <span className="text-sm font-medium">Panel B</span>
-              </div>
-            </ResizablePanel>
-          </ResizablePanelGroup>
-        </ExampleSection>
+        <ShowcaseExample title="Plain Divider" description="Bỏ withHandle để chỉ hiển thị đường phân cách mỏng, không có visual grip." code={`<ResizableHandle />`} preview={
+                      <>
+              <ResizablePanelGroup
+                          orientation="horizontal"
+                          className="rounded-xl border border-border bg-card"
+                        >
+                          <ResizablePanel defaultSize={50}>
+                            <div className="flex h-[120px] items-center justify-center p-4">
+                              <span className="text-sm font-medium">Bảng A</span>
+                            </div>
+                          </ResizablePanel>
+                          <ResizableHandle />
+                          <ResizablePanel defaultSize={50}>
+                            <div className="flex h-full items-center justify-center p-4">
+                              <span className="text-sm font-medium">Bảng B</span>
+                            </div>
+                          </ResizablePanel>
+                        </ResizablePanelGroup>
+                      </>
+                    } />
       </ExampleGrid>
 
-      {/* Nested layout */}
-      <ExampleSection
-        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
+      <ShowcaseExample title="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." code={`<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>
+        <span className="font-semibold text-sm">Điều hướng</span>
       </div>
     </ResizablePanel>
     <ResizableHandle />
@@ -184,48 +166,46 @@ function ResizableMicroShowcase() {
         </ResizablePanel>
       </ResizablePanelGroup>
     </ResizablePanel>
-  </ResizablePanelGroup>`}
-      >
-        <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>
-      </ExampleSection>
+  </ResizablePanelGroup>`} preview={
+                  <>
+          <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">Điều hướng</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">Thanh trên</span>
+                          </div>
+                        </ResizablePanel>
+                        <ResizableHandle />
+                        <ResizablePanel defaultSize={75}>
+                          <div className="flex h-full items-center justify-center p-6">
+                            <span className="font-semibold text-sm">Nội dung chính</span>
+                          </div>
+                        </ResizablePanel>
+                      </ResizablePanelGroup>
+                    </ResizablePanel>
+                  </ResizablePanelGroup>
+                  </>
+                } />
     </div>
   );
 }
 
-// ──────────────────────────────────────────────────────────
-// SECTION 2: Entry point
-// ──────────────────────────────────────────────────────────
 export default function ResizableShowcase() {
   return (
     <Showcase
       title="Resizable"
       description="Panel có thể thay đổi kích thước với hỗ trợ bàn phím, lồng nhau linh hoạt."
-      generalConcept={
+      guideline={
         <ShowcaseDocs>
           <DocsP>
             Resizable sử dụng thư viện{" "}
@@ -239,9 +219,7 @@ export default function ResizableShowcase() {
           </DocsP>
         </ShowcaseDocs>
       }
-      tabs={[
-        { label: "Micro (Primitive)", content: <ResizableMicroShowcase /> },
-      ]}
+      micro={{ content: <ResizableMicroShowcase /> }}
     />
   );
 }

package/src/dev/showcase/scroll-area.tsx

@@ -4,14 +4,11 @@ import {
   DocsH3,
   DocsP,
   ExampleGrid,
-  ExampleSection,
+  ShowcaseExample,
   Showcase,
   ShowcaseDocs
 } from "../../dev/components/showcase";
 
-// ──────────────────────────────────────────────────────────
-// SECTION 1: Explicit Sub-components for Demo
-// ──────────────────────────────────────────────────────────
 function VerticalList() {
   const items = [
     "Tùy chọn 1",
@@ -75,17 +72,11 @@ function HorizontalList() {
   );
 }
 
-// ──────────────────────────────────────────────────────────
-// SECTION 2: Micro Content (Only Micro exists)
-// ──────────────────────────────────────────────────────────
 function ScrollAreaMicroShowcase() {
   return (
-    <div className="space-y-10 mt-6">
+    <div className="space-y-10">
       <ExampleGrid>
-        <ExampleSection
-          label="Cuộn dọc (Vertical)"
-          description="Danh sách các mục có thể cuộn từ trên xuống dưới."
-          codeString={`<ScrollArea className="h-72 w-full max-w-sm rounded-xl border border-border bg-card">
+        <ShowcaseExample title="Cuộn dọc (Vertical)" description="Danh sách các mục có thể cuộn từ trên xuống dưới." code={`<ScrollArea className="h-72 w-full max-w-sm rounded-xl border border-border bg-card">
     <div className="p-4">
       <h4 className="mb-4 text-sm font-medium leading-none">
         Cài đặt hệ thống
@@ -101,17 +92,15 @@ function ScrollAreaMicroShowcase() {
       </div>
       {/* ... */}
     </div>
-  </ScrollArea>`}
-        >
-          <ScrollArea className="h-72 w-full max-w-sm rounded-xl border border-border bg-card">
-            <VerticalList />
-          </ScrollArea>
-        </ExampleSection>
+  </ScrollArea>`} preview={
+                      <>
+              <ScrollArea className="h-72 w-full max-w-sm rounded-xl border border-border bg-card">
+                          <VerticalList />
+                        </ScrollArea>
+                      </>
+                    } />
 
-        <ExampleSection
-          label="Cuộn ngang (Horizontal)"
-          description="Trình bày danh sách phần tử nằm ngang (thường dùng cho ảnh, card)."
-          codeString={`<ScrollArea className="w-full max-w-sm whitespace-nowrap rounded-xl border border-border bg-card p-4">
+        <ShowcaseExample title="Cuộn ngang (Horizontal)" description="Trình bày danh sách phần tử nằm ngang (thường dùng cho ảnh, card)." code={`<ScrollArea className="w-full max-w-sm whitespace-nowrap rounded-xl border border-border bg-card p-4">
     <div className="flex w-max space-x-4">
       <div className="w-[150px] shrink-0">
         <div className="aspect-[3/4] rounded-md bg-muted" />
@@ -128,27 +117,25 @@ function ScrollAreaMicroShowcase() {
       {/* ... */}
     </div>
     <ScrollBar orientation="horizontal" />
-  </ScrollArea>`}
-        >
-          <ScrollArea className="w-full max-w-sm whitespace-nowrap rounded-xl border border-border bg-card">
-            <HorizontalList />
-            <ScrollBar orientation="horizontal" />
-          </ScrollArea>
-        </ExampleSection>
+  </ScrollArea>`} preview={
+                      <>
+              <ScrollArea className="w-full max-w-sm whitespace-nowrap rounded-xl border border-border bg-card">
+                          <HorizontalList />
+                          <ScrollBar orientation="horizontal" />
+                        </ScrollArea>
+                      </>
+                    } />
       </ExampleGrid>
     </div>
   );
 }
 
-// ──────────────────────────────────────────────────────────
-// SECTION 3: Entry point
-// ──────────────────────────────────────────────────────────
 export default function ScrollAreaShowcase() {
   return (
     <Showcase
       title="Scroll Area"
       description="Khu vực nội dung có thanh cuộn tuỳ biến giao diện, đồng bộ trên mọi trình duyệt thay cho thanh cuộn mặc định."
-      generalConcept={
+      guideline={
         <ShowcaseDocs>
           <DocsH3>Scroll Area (Khu vực cuộn)</DocsH3>
           <DocsP>
@@ -159,9 +146,7 @@ export default function ScrollAreaShowcase() {
           </DocsP>
         </ShowcaseDocs>
       }
-      tabs={[
-        { label: "Micro (Primitive)", content: <ScrollAreaMicroShowcase /> },
-      ]}
+      micro={{ content: <ScrollAreaMicroShowcase /> }}
     />
   );
 }