gladvn 0.2.35 → 0.2.37

package/src/dev/showcase/badge.tsx

@@ -6,7 +6,7 @@ import {
   DocsCode,
   DocsP,
   ExampleGrid,
-  ExampleSection,
+  ShowcaseExample,
   Showcase,
   ShowcaseDocs
 } from "../../dev/components/showcase";
@@ -18,7 +18,7 @@ export default function BadgeShowcase() {
     <Showcase
       title="Badge"
       description="Hiển thị nhãn trạng thái, phân loại hoặc đếm số lượng."
-      generalConcept={
+      guideline={
         <ShowcaseDocs>
           <DocsP>
             Dùng để làm nổi bật trạng thái, nhãn phân loại hoặc số lượng. Thường
@@ -27,57 +27,36 @@ export default function BadgeShowcase() {
           </DocsP>
         </ShowcaseDocs>
       }
-      tabs={[
-        {
-          label: "Micro (Primitive)",
-          content: <BadgeMicroShowcase globalSize={globalSize} /> },
-      ]}
+      micro={{ content: <BadgeMicroShowcase globalSize={globalSize} /> }}
     />
   );
 }
 
 function BadgeMicroShowcase({ globalSize }: { globalSize: Size }) {
   return (
-    <div className="space-y-10 mt-6">
-      {/* ── Variants ── */}
-      <ExampleSection
-        label="Variants"
-        description="Tất cả các kiểu hiển thị hiện có."
-        codeString={`<Badge variant="solid">Solid</Badge>
+    <div className="space-y-10">
+      <ShowcaseExample title="Variants" description="Tất cả các kiểu hiển thị hiện có." code={`<Badge variant="solid">Solid</Badge>
   <Badge variant="soft">Soft</Badge>
-  <Badge variant="outline">Outline</Badge>`}
-      >
-        <Badge variant="solid">Solid</Badge>
-        <Badge variant="soft">Soft</Badge>
-        <Badge variant="outline">Outline</Badge>
-      </ExampleSection>
+  <Badge variant="outline">Outline</Badge>`} preview={
+                  <>
+          <Badge variant="solid">Solid</Badge><Badge variant="soft">Soft</Badge><Badge variant="outline">Outline</Badge>
+                  </>
+                } />
 
-      {/* ── Colors ── */}
       <ExampleGrid>
-        <ExampleSection
-          label="Solid Colors"
-          description="Các màu semantic áp dụng cho Badge dạng Solid."
-          codeString={`<Badge color="primary">Primary</Badge>
+        <ShowcaseExample title="Solid Colors" description="Các màu semantic áp dụng cho Badge dạng Solid." code={`<Badge color="primary">Primary</Badge>
   <Badge color="secondary">Secondary</Badge>
   <Badge color="destructive">Destructive</Badge>
   <Badge color="warning">Warning</Badge>
   <Badge color="success">Success</Badge>
   <Badge color="info">Info</Badge>
-  <Badge color="muted">Muted</Badge>`}
-        >
-          <Badge color="primary">Primary</Badge>
-          <Badge color="secondary">Secondary</Badge>
-          <Badge color="destructive">Destructive</Badge>
-          <Badge color="warning">Warning</Badge>
-          <Badge color="success">Success</Badge>
-          <Badge color="info">Info</Badge>
-          <Badge color="muted">Muted</Badge>
-        </ExampleSection>
+  <Badge color="muted">Muted</Badge>`} preview={
+                      <>
+              <Badge color="primary">Primary</Badge><Badge color="secondary">Secondary</Badge><Badge color="destructive">Destructive</Badge><Badge color="warning">Warning</Badge><Badge color="success">Success</Badge><Badge color="info">Info</Badge><Badge color="muted">Muted</Badge>
+                      </>
+                    } />
 
-        <ExampleSection
-          label="Soft Colors"
-          description="Các màu semantic áp dụng cho Badge dạng Soft."
-          codeString={`<Badge variant="soft" color="primary">
+        <ShowcaseExample title="Soft Colors" description="Các màu semantic áp dụng cho Badge dạng Soft." code={`<Badge variant="soft" color="primary">
     Primary
   </Badge>
   <Badge variant="soft" color="secondary">
@@ -97,37 +76,28 @@ function BadgeMicroShowcase({ globalSize }: { globalSize: Size }) {
   </Badge>
   <Badge variant="soft" color="muted">
     Muted
-  </Badge>`}
-        >
-          <Badge variant="soft" color="primary">
-            Primary
-          </Badge>
-          <Badge variant="soft" color="secondary">
-            Secondary
-          </Badge>
-          <Badge variant="soft" color="destructive">
-            Destructive
-          </Badge>
-          <Badge variant="soft" color="warning">
-            Warning
-          </Badge>
-          <Badge variant="soft" color="success">
-            Success
-          </Badge>
-          <Badge variant="soft" color="info">
-            Info
-          </Badge>
-          <Badge variant="soft" color="muted">
-            Muted
-          </Badge>
-        </ExampleSection>
+  </Badge>`} preview={
+                      <>
+              <Badge variant="soft" color="primary">
+                          Primary
+                        </Badge><Badge variant="soft" color="secondary">
+                          Secondary
+                        </Badge><Badge variant="soft" color="destructive">
+                          Destructive
+                        </Badge><Badge variant="soft" color="warning">
+                          Warning
+                        </Badge><Badge variant="soft" color="success">
+                          Success
+                        </Badge><Badge variant="soft" color="info">
+                          Info
+                        </Badge><Badge variant="soft" color="muted">
+                          Muted
+                        </Badge>
+                      </>
+                    } />
       </ExampleGrid>
 
-      {/* ── With Icons ── */}
-      <ExampleSection
-        label="With Icons"
-        description="Badge kèm icon để bổ sung ngữ cảnh."
-        codeString={`<Badge color="success">
+      <ShowcaseExample title="With Icons" description="Badge kèm icon để bổ sung ngữ cảnh." code={`<Badge color="success">
     <CheckIcon className="size-3.5" />
     Approved
   </Badge>
@@ -145,32 +115,26 @@ function BadgeMicroShowcase({ globalSize }: { globalSize: Size }) {
   <Badge color="info" variant="outline">
     <InfoIcon className="size-3.5" />
     Draft
-  </Badge>`}
-      >
-        <Badge color="success">
-          <CheckIcon className="size-3.5" />
-          Approved
-        </Badge>
-        <Badge color="destructive">
-          <XIcon className="size-3.5" />
-          Rejected
-        </Badge>
-        <Badge color="warning" variant="soft">
-          <AlertTriangleIcon className="size-3.5" />
-          Pending
-        </Badge>
-        <Badge color="info" variant="outline">
-          <InfoIcon className="size-3.5" />
-          Draft
-        </Badge>
-      </ExampleSection>
+  </Badge>`} preview={
+                  <>
+          <Badge color="success">
+                    <CheckIcon className="size-3.5" />
+                    Approved
+                  </Badge><Badge color="destructive">
+                    <XIcon className="size-3.5" />
+                    Rejected
+                  </Badge><Badge color="warning" variant="soft">
+                    <AlertTriangleIcon className="size-3.5" />
+                    Pending
+                  </Badge><Badge color="info" variant="outline">
+                    <InfoIcon className="size-3.5" />
+                    Draft
+                  </Badge>
+                  </>
+                } />
 
-      {/* ── Real-world Use Cases ── */}
       <ExampleGrid>
-        <ExampleSection
-          label="Status Indicators"
-          description="Dùng để hiển thị trạng thái."
-          codeString={`<Badge color="success" variant="soft">
+        <ShowcaseExample title="Status Indicators" description="Dùng để hiển thị trạng thái." code={`<Badge color="success" variant="soft">
     Active
   </Badge>
   <Badge color="secondary" variant="soft">
@@ -181,25 +145,20 @@ function BadgeMicroShowcase({ globalSize }: { globalSize: Size }) {
   </Badge>
   <Badge color="muted" variant="outline">
     Archived
-  </Badge>`}
-        >
-          <Badge color="success" variant="soft">
-            Active
-          </Badge>
-          <Badge color="secondary" variant="soft">
-            Inactive
-          </Badge>
-          <Badge color="destructive" variant="soft">
-            Expired
-          </Badge>
-          <Badge color="muted" variant="outline">
-            Archived
-          </Badge>
-        </ExampleSection>
-        <ExampleSection
-          label="Tags & Categories"
-          description="Dùng để hiển thị danh mục."
-          codeString={`<Badge variant="outline" color="primary">
+  </Badge>`} preview={
+                      <>
+              <Badge color="success" variant="soft">
+                          Active
+                        </Badge><Badge color="secondary" variant="soft">
+                          Inactive
+                        </Badge><Badge color="destructive" variant="soft">
+                          Expired
+                        </Badge><Badge color="muted" variant="outline">
+                          Archived
+                        </Badge>
+                      </>
+                    } />
+        <ShowcaseExample title="Tags & Categories" description="Dùng để hiển thị danh mục." code={`<Badge variant="outline" color="primary">
     React
   </Badge>
   <Badge variant="outline" color="secondary">
@@ -210,28 +169,22 @@ function BadgeMicroShowcase({ globalSize }: { globalSize: Size }) {
   </Badge>
   <Badge variant="outline" color="warning">
     Vite
-  </Badge>`}
-        >
-          <Badge variant="outline" color="primary">
-            React
-          </Badge>
-          <Badge variant="outline" color="secondary">
-            TypeScript
-          </Badge>
-          <Badge variant="outline" color="info">
-            Tailwind
-          </Badge>
-          <Badge variant="outline" color="warning">
-            Vite
-          </Badge>
-        </ExampleSection>
+  </Badge>`} preview={
+                      <>
+              <Badge variant="outline" color="primary">
+                          React
+                        </Badge><Badge variant="outline" color="secondary">
+                          TypeScript
+                        </Badge><Badge variant="outline" color="info">
+                          Tailwind
+                        </Badge><Badge variant="outline" color="warning">
+                          Vite
+                        </Badge>
+                      </>
+                    } />
       </ExampleGrid>
 
-      {/* ── As Link ── */}
-      <ExampleSection
-        label="As Link"
-        description="Badge render dưới dạng thẻ a nhờ prop render."
-        codeString={`<Badge render={<a href="#" />}>Clickable Badge</Badge>
+      <ShowcaseExample title="As Link" description="Badge render dưới dạng thẻ a nhờ prop render." code={`<Badge render={<a href="#" />}>Clickable Badge</Badge>
 
   <Badge color="secondary" render={<a href="#" />}>
     Secondary Link
@@ -239,16 +192,15 @@ function BadgeMicroShowcase({ globalSize }: { globalSize: Size }) {
 
   <Badge variant="outline" render={<a href="#" />}>
     Outline Link
-  </Badge>`}
-      >
-        <Badge render={<a href="#" />}>Clickable Badge</Badge>
-        <Badge color="secondary" render={<a href="#" />}>
-          Secondary Link
-        </Badge>
-        <Badge variant="outline" render={<a href="#" />}>
-          Outline Link
-        </Badge>
-      </ExampleSection>
+  </Badge>`} preview={
+                  <>
+          <Badge render={<a href="#" />}>Clickable Badge</Badge><Badge color="secondary" render={<a href="#" />}>
+                    Secondary Link
+                  </Badge><Badge variant="outline" render={<a href="#" />}>
+                    Outline Link
+                  </Badge>
+                  </>
+                } />
     </div>
   );
 }

package/src/dev/showcase/breadcrumb.tsx

@@ -20,75 +20,61 @@ import {
 import {
   DocsP,
   ExampleGrid,
-  ExampleSection,
+  ShowcaseExample,
   Showcase,
   ShowcaseDocs
 } from "../../dev/components/showcase";
 
-// ──────────────────────────────────────────────────────────
-// SECTION 1: Macro Content
-// ──────────────────────────────────────────────────────────
 function BreadcrumbMacroShowcase() {
   return (
-    <div className="space-y-10 mt-6">
+    <div className="space-y-10">
       <ExampleGrid>
-        <ExampleSection
-          label="Tiêu chuẩn (Standard)"
-          description="Mảng điều hướng cơ bản."
-          codeString={`<BreadcrumbPreset
+        <ShowcaseExample title="Tiêu chuẩn (Standard)" description="Mảng điều hướng cơ bản." code={`<BreadcrumbPreset
     items={[
       { label: "Trang chủ", href: "/" },
       { label: "Thành phần", href: "/components" },
       { label: "Breadcrumb" },
     ]}
-  />`}
-        >
-          <BreadcrumbPreset
-            items={[
-              { label: "Trang chủ", href: "/" },
-              { label: "Thành phần", href: "/components" },
-              { label: "Breadcrumb" },
-            ]}
-          />
-        </ExampleSection>
+  />`} preview={
+                      <>
+              <BreadcrumbPreset
+                          items={[
+                            { label: "Trang chủ", href: "/" },
+                            { label: "Thành phần", href: "/components" },
+                            { label: "Breadcrumb" },
+                          ]}
+                        />
+                      </>
+                    } />
 
-        <ExampleSection
-          label="Nhiều cấp (Deep Navigation)"
-          description="Đường dẫn dài hơn điển hình cho các trang lồng nhau."
-          codeString={`<BreadcrumbPreset
+        <ShowcaseExample title="Nhiều cấp (Deep Navigation)" description="Đường dẫn dài hơn điển hình cho các trang lồng nhau." code={`<BreadcrumbPreset
     items={[
       { label: "Dashboard", href: "/dashboard" },
       { label: "Cài đặt", href: "/settings" },
       { label: "Tài khoản", href: "/settings/account" },
       { label: "Hóa đơn" },
     ]}
-  />`}
-        >
-          <BreadcrumbPreset
-            items={[
-              { label: "Dashboard", href: "/dashboard" },
-              { label: "Cài đặt", href: "/settings" },
-              { label: "Tài khoản", href: "/settings/account" },
-              { label: "Hóa đơn" },
-            ]}
-          />
-        </ExampleSection>
+  />`} preview={
+                      <>
+              <BreadcrumbPreset
+                          items={[
+                            { label: "Dashboard", href: "/dashboard" },
+                            { label: "Cài đặt", href: "/settings" },
+                            { label: "Tài khoản", href: "/settings/account" },
+                            { label: "Hóa đơn" },
+                          ]}
+                        />
+                      </>
+                    } />
       </ExampleGrid>
     </div>
   );
 }
 
-// ──────────────────────────────────────────────────────────
-// SECTION 2: Micro Content
-// ──────────────────────────────────────────────────────────
 function BreadcrumbMicroShowcase() {
   return (
-    <div className="space-y-10 mt-6">
-      <ExampleSection
-        label="Cơ bản (Default)"
-        description="Lắp ráp thủ công các item với dấu phân cách chevron mặc định."
-        fullWidth
-        codeString={`<Breadcrumb className="w-full max-w-lg">
+    <div className="space-y-10">
+      <ShowcaseExample title="Cơ bản (Default)" description="Lắp ráp thủ công các item với dấu phân cách chevron mặc định." code={`<Breadcrumb className="w-full max-w-lg">
     <BreadcrumbList>
       <BreadcrumbItem>
         <BreadcrumbLink href="/">Trang chủ</BreadcrumbLink>
@@ -104,30 +90,28 @@ function BreadcrumbMicroShowcase() {
         <BreadcrumbPage>Breadcrumb</BreadcrumbPage>
       </BreadcrumbItem>
     </BreadcrumbList>
-  </Breadcrumb>`}
-      >
-        <Breadcrumb className="w-full max-w-lg">
-          <BreadcrumbList>
-            <BreadcrumbItem>
-              <BreadcrumbLink href="/">Trang chủ</BreadcrumbLink>
-            </BreadcrumbItem>
-            <BreadcrumbSeparator />
-            <BreadcrumbItem>
-              <BreadcrumbLink href="/components">Thành phần</BreadcrumbLink>
-            </BreadcrumbItem>
-            <BreadcrumbSeparator />
-            <BreadcrumbItem>
-              <BreadcrumbPage>Breadcrumb</BreadcrumbPage>
-            </BreadcrumbItem>
-          </BreadcrumbList>
-        </Breadcrumb>
-      </ExampleSection>
+  </Breadcrumb>`} preview={
+                  <>
+          <Breadcrumb className="w-full max-w-lg">
+                    <BreadcrumbList>
+                      <BreadcrumbItem>
+                        <BreadcrumbLink href="/">Trang chủ</BreadcrumbLink>
+                      </BreadcrumbItem>
+                      <BreadcrumbSeparator />
+                      <BreadcrumbItem>
+                        <BreadcrumbLink href="/components">Thành phần</BreadcrumbLink>
+                      </BreadcrumbItem>
+                      <BreadcrumbSeparator />
+                      <BreadcrumbItem>
+                        <BreadcrumbPage>Breadcrumb</BreadcrumbPage>
+                      </BreadcrumbItem>
+                    </BreadcrumbList>
+                  </Breadcrumb>
+                  </>
+                } />
 
       <ExampleGrid>
-        <ExampleSection
-          label="Đổi dấu phân cách (Custom Separator)"
-          description="Truyền icon bất kỳ (VD: SlashIcon) vào bên trong BreadcrumbSeparator."
-          codeString={`<Breadcrumb className="w-full max-w-lg">
+        <ShowcaseExample title="Đổi dấu phân cách (Custom Separator)" description="Truyền icon bất kỳ (VD: SlashIcon) vào bên trong BreadcrumbSeparator." code={`<Breadcrumb className="w-full max-w-lg">
     <BreadcrumbList>
       <BreadcrumbItem>
         <BreadcrumbLink href="/">Trang chủ</BreadcrumbLink>
@@ -147,33 +131,31 @@ function BreadcrumbMicroShowcase() {
         <BreadcrumbPage>Breadcrumb</BreadcrumbPage>
       </BreadcrumbItem>
     </BreadcrumbList>
-  </Breadcrumb>`}
-        >
-          <Breadcrumb className="w-full max-w-lg">
-            <BreadcrumbList>
-              <BreadcrumbItem>
-                <BreadcrumbLink href="/">Trang chủ</BreadcrumbLink>
-              </BreadcrumbItem>
-              <BreadcrumbSeparator>
-                <SlashIcon className="size-3.5" />
-              </BreadcrumbSeparator>
-              <BreadcrumbItem>
-                <BreadcrumbLink href="/components">Thành phần</BreadcrumbLink>
-              </BreadcrumbItem>
-              <BreadcrumbSeparator>
-                <SlashIcon className="size-3.5" />
-              </BreadcrumbSeparator>
-              <BreadcrumbItem>
-                <BreadcrumbPage>Breadcrumb</BreadcrumbPage>
-              </BreadcrumbItem>
-            </BreadcrumbList>
-          </Breadcrumb>
-        </ExampleSection>
+  </Breadcrumb>`} preview={
+                      <>
+              <Breadcrumb className="w-full max-w-lg">
+                          <BreadcrumbList>
+                            <BreadcrumbItem>
+                              <BreadcrumbLink href="/">Trang chủ</BreadcrumbLink>
+                            </BreadcrumbItem>
+                            <BreadcrumbSeparator>
+                              <SlashIcon className="size-3.5" />
+                            </BreadcrumbSeparator>
+                            <BreadcrumbItem>
+                              <BreadcrumbLink href="/components">Thành phần</BreadcrumbLink>
+                            </BreadcrumbItem>
+                            <BreadcrumbSeparator>
+                              <SlashIcon className="size-3.5" />
+                            </BreadcrumbSeparator>
+                            <BreadcrumbItem>
+                              <BreadcrumbPage>Breadcrumb</BreadcrumbPage>
+                            </BreadcrumbItem>
+                          </BreadcrumbList>
+                        </Breadcrumb>
+                      </>
+                    } />
 
-        <ExampleSection
-          label="Dấu ba chấm (With Ellipsis)"
-          description="Sử dụng BreadcrumbEllipsis cùng DropdownMenu để giấu các đường dẫn trung gian."
-          codeString={`<Breadcrumb className="w-full max-w-lg">
+        <ShowcaseExample title="Dấu ba chấm (With Ellipsis)" description="Sử dụng BreadcrumbEllipsis cùng DropdownMenu để giấu các đường dẫn trung gian." code={`<Breadcrumb className="w-full max-w-lg">
     <BreadcrumbList>
       <BreadcrumbItem>
         <BreadcrumbLink href="/">Trang chủ</BreadcrumbLink>
@@ -205,56 +187,54 @@ function BreadcrumbMicroShowcase() {
         <BreadcrumbPage>Breadcrumb</BreadcrumbPage>
       </BreadcrumbItem>
     </BreadcrumbList>
-  </Breadcrumb>`}
-        >
-          <Breadcrumb className="w-full max-w-lg">
-            <BreadcrumbList>
-              <BreadcrumbItem>
-                <BreadcrumbLink href="/">Trang chủ</BreadcrumbLink>
-              </BreadcrumbItem>
-              <BreadcrumbSeparator />
-              <BreadcrumbItem>
-                <DropdownMenu>
-                  <DropdownMenuTrigger className="flex items-center gap-1 hover:text-foreground">
-                    <BreadcrumbEllipsis className="h-4 w-4" />
-                    <span className="sr-only">Toggle menu</span>
-                  </DropdownMenuTrigger>
-                  
-                    <DropdownMenuContent align="start">
-                      <DropdownMenuItem>Tài liệu</DropdownMenuItem>
-                      <DropdownMenuItem>Giao diện</DropdownMenuItem>
-                      <DropdownMenuItem>GitHub</DropdownMenuItem>
-                    </DropdownMenuContent>
-                  
-                </DropdownMenu>
-              </BreadcrumbItem>
-              <BreadcrumbSeparator />
-              <BreadcrumbItem>
-                <BreadcrumbLink href="/docs/components">
-                  Thành phần
-                </BreadcrumbLink>
-              </BreadcrumbItem>
-              <BreadcrumbSeparator />
-              <BreadcrumbItem>
-                <BreadcrumbPage>Breadcrumb</BreadcrumbPage>
-              </BreadcrumbItem>
-            </BreadcrumbList>
-          </Breadcrumb>
-        </ExampleSection>
+  </Breadcrumb>`} preview={
+                      <>
+              <Breadcrumb className="w-full max-w-lg">
+                          <BreadcrumbList>
+                            <BreadcrumbItem>
+                              <BreadcrumbLink href="/">Trang chủ</BreadcrumbLink>
+                            </BreadcrumbItem>
+                            <BreadcrumbSeparator />
+                            <BreadcrumbItem>
+                              <DropdownMenu>
+                                <DropdownMenuTrigger className="flex items-center gap-1 hover:text-foreground">
+                                  <BreadcrumbEllipsis className="h-4 w-4" />
+                                  <span className="sr-only">Toggle menu</span>
+                                </DropdownMenuTrigger>
+                                
+                                  <DropdownMenuContent align="start">
+                                    <DropdownMenuItem>Tài liệu</DropdownMenuItem>
+                                    <DropdownMenuItem>Giao diện</DropdownMenuItem>
+                                    <DropdownMenuItem>GitHub</DropdownMenuItem>
+                                  </DropdownMenuContent>
+                                
+                              </DropdownMenu>
+                            </BreadcrumbItem>
+                            <BreadcrumbSeparator />
+                            <BreadcrumbItem>
+                              <BreadcrumbLink href="/docs/components">
+                                Thành phần
+                              </BreadcrumbLink>
+                            </BreadcrumbItem>
+                            <BreadcrumbSeparator />
+                            <BreadcrumbItem>
+                              <BreadcrumbPage>Breadcrumb</BreadcrumbPage>
+                            </BreadcrumbItem>
+                          </BreadcrumbList>
+                        </Breadcrumb>
+                      </>
+                    } />
       </ExampleGrid>
     </div>
   );
 }
 
-// ──────────────────────────────────────────────────────────
-// SECTION 3: Entry point
-// ──────────────────────────────────────────────────────────
 export default function BreadcrumbShowcase() {
   return (
     <Showcase
       title="Breadcrumb"
       description="Hiển thị đường dẫn điều hướng, giúp người dùng biết vị trí hiện tại trong hệ thống."
-      generalConcept={
+      guideline={
         <ShowcaseDocs>
           <DocsP>
             Dùng để hiển thị đường dẫn điều hướng, giúp người dùng nhận biết vị
@@ -263,10 +243,8 @@ export default function BreadcrumbShowcase() {
           </DocsP>
         </ShowcaseDocs>
       }
-      tabs={[
-        { label: "Micro (Primitive)", content: <BreadcrumbMicroShowcase /> },
-        { label: "Macro (Preset)", content: <BreadcrumbMacroShowcase /> },
-      ]}
+      micro={{ content: <BreadcrumbMicroShowcase /> }}
+      macro={{ content: <BreadcrumbMacroShowcase /> }}
     />
   );
 }