gladvn 0.2.35 → 0.2.37

package/src/dev/showcase/item.tsx

@@ -18,7 +18,7 @@ import {
   DocsH3,
   DocsP,
   ExampleGrid,
-  ExampleSection,
+  ShowcaseExample,
   Showcase,
   ShowcaseDocs
 } from "../../dev/components/showcase";
@@ -26,34 +26,29 @@ import { type Size } from "../../lib/types";
 
 function ItemMicroShowcase({ globalSize }: { globalSize: Size }) {
   return (
-    <div className="space-y-10 mt-6">
+    <div className="space-y-10">
       <ExampleGrid>
-        <ExampleSection
-          label="Basic Content"
-          description="Item cơ bản với tiêu đề và mô tả."
-          codeString={`<Item className="w-full">
+        <ShowcaseExample title="Nội dung cơ bản" description="Item cơ bản với tiêu đề và mô tả." code={`<Item className="w-full">
     <ItemContent>
       <ItemTitle>Basic Item Content</ItemTitle>
       <ItemDescription>
-        This item shows structured text.
+        Mục này hiển thị văn bản có cấu trúc.
       </ItemDescription>
     </ItemContent>
-  </Item>`}
-        >
-          <Item size={globalSize} className="w-full">
-            <ItemContent>
-              <ItemTitle>Basic Item Content</ItemTitle>
-              <ItemDescription>
-                This item shows structured text.
-              </ItemDescription>
-            </ItemContent>
-          </Item>
-        </ExampleSection>
+  </Item>`} preview={
+                      <>
+              <Item size={globalSize} className="w-full">
+                          <ItemContent>
+                            <ItemTitle>Basic Item Content</ItemTitle>
+                            <ItemDescription>
+                              Mục này hiển thị văn bản có cấu trúc.
+                            </ItemDescription>
+                          </ItemContent>
+                        </Item>
+                      </>
+                    } />
 
-        <ExampleSection
-          label="With Media"
-          description="Item kèm icon hoặc avatar."
-          codeString={`<Item className="w-full">
+        <ShowcaseExample title="Có hình ảnh" description="Item kèm icon hoặc avatar." code={`<Item className="w-full">
     <ItemMedia className="bg-primary/10 text-primary rounded-md p-2">
       <UserIcon className="size-4" />
     </ItemMedia>
@@ -61,25 +56,23 @@ function ItemMicroShowcase({ globalSize }: { globalSize: Size }) {
       <ItemTitle>User Profile</ItemTitle>
       <ItemDescription>Manage your account</ItemDescription>
     </ItemContent>
-  </Item>`}
-        >
-          <Item size={globalSize} className="w-full">
-            <ItemMedia className="bg-primary/10 text-primary rounded-md p-2">
-              <UserIcon className="size-4" />
-            </ItemMedia>
-            <ItemContent>
-              <ItemTitle>User Profile</ItemTitle>
-              <ItemDescription>Manage your account</ItemDescription>
-            </ItemContent>
-          </Item>
-        </ExampleSection>
+  </Item>`} preview={
+                      <>
+              <Item size={globalSize} className="w-full">
+                          <ItemMedia className="bg-primary/10 text-primary rounded-md p-2">
+                            <UserIcon className="size-4" />
+                          </ItemMedia>
+                          <ItemContent>
+                            <ItemTitle>User Profile</ItemTitle>
+                            <ItemDescription>Manage your account</ItemDescription>
+                          </ItemContent>
+                        </Item>
+                      </>
+                    } />
       </ExampleGrid>
 
       <ExampleGrid>
-        <ExampleSection
-          label="Variants"
-          description="Các variant khác nhau: outline, muted."
-          codeString={`<div className="flex flex-col gap-3 w-full">
+        <ShowcaseExample title="Variants" description="Các variant khác nhau: outline, muted." code={`<div className="flex flex-col gap-3 w-full">
     <Item variant="outline">
       <ItemContent>
         <ItemTitle>Outline Variant</ItemTitle>
@@ -90,26 +83,24 @@ function ItemMicroShowcase({ globalSize }: { globalSize: Size }) {
         <ItemTitle>Muted Variant</ItemTitle>
       </ItemContent>
     </Item>
-  </div>`}
-        >
-          <div className="flex flex-col gap-3 w-full">
-            <Item variant="outline" size={globalSize}>
-              <ItemContent>
-                <ItemTitle>Outline Variant</ItemTitle>
-              </ItemContent>
-            </Item>
-            <Item variant="muted" size={globalSize}>
-              <ItemContent>
-                <ItemTitle>Muted Variant</ItemTitle>
-              </ItemContent>
-            </Item>
-          </div>
-        </ExampleSection>
+  </div>`} preview={
+                      <>
+              <div className="flex flex-col gap-3 w-full">
+                          <Item variant="outline" size={globalSize}>
+                            <ItemContent>
+                              <ItemTitle>Outline Variant</ItemTitle>
+                            </ItemContent>
+                          </Item>
+                          <Item variant="muted" size={globalSize}>
+                            <ItemContent>
+                              <ItemTitle>Muted Variant</ItemTitle>
+                            </ItemContent>
+                          </Item>
+                        </div>
+                      </>
+                    } />
 
-        <ExampleSection
-          label="Media Variants"
-          description="ItemMedia hỗ trợ các variant riêng: icon và image."
-          codeString={`<div className="flex flex-col gap-3 w-full">
+        <ShowcaseExample title="Loại hình ảnh" description="ItemMedia hỗ trợ các variant riêng: icon và image." code={`<div className="flex flex-col gap-3 w-full">
     <Item>
       <ItemMedia
         variant="icon"
@@ -129,32 +120,30 @@ function ItemMicroShowcase({ globalSize }: { globalSize: Size }) {
         <ItemTitle>Image Variant</ItemTitle>
       </ItemContent>
     </Item>
-  </div>`}
-        >
-          <div className="flex flex-col gap-3 w-full">
-            <Item size={globalSize}>
-              <ItemMedia variant="icon" className="bg-primary/10 text-primary">
-                <CheckIcon className="size-4" />
-              </ItemMedia>
-              <ItemContent>
-                <ItemTitle>Icon Variant</ItemTitle>
-              </ItemContent>
-            </Item>
-            <Item size={globalSize}>
-              <ItemMedia variant="image" className="bg-muted">
-                <UserIcon className="size-4 text-muted-foreground" />
-              </ItemMedia>
-              <ItemContent>
-                <ItemTitle>Image Variant</ItemTitle>
-              </ItemContent>
-            </Item>
-          </div>
-        </ExampleSection>
+  </div>`} preview={
+                      <>
+              <div className="flex flex-col gap-3 w-full">
+                          <Item size={globalSize}>
+                            <ItemMedia variant="icon" className="bg-primary/10 text-primary">
+                              <CheckIcon className="size-4" />
+                            </ItemMedia>
+                            <ItemContent>
+                              <ItemTitle>Icon Variant</ItemTitle>
+                            </ItemContent>
+                          </Item>
+                          <Item size={globalSize}>
+                            <ItemMedia variant="image" className="bg-muted">
+                              <UserIcon className="size-4 text-muted-foreground" />
+                            </ItemMedia>
+                            <ItemContent>
+                              <ItemTitle>Image Variant</ItemTitle>
+                            </ItemContent>
+                          </Item>
+                        </div>
+                      </>
+                    } />
 
-        <ExampleSection
-          label="With Actions"
-          description="Item có các nút hành động ở cuối (ItemActions)."
-          codeString={`<Item className="w-full">
+        <ShowcaseExample title="Kèm nút thao tác" description="Item có các nút hành động ở cuối (ItemActions)." code={`<Item className="w-full">
     <ItemContent>
       <ItemTitle>Actionable Item</ItemTitle>
     </ItemContent>
@@ -174,28 +163,26 @@ function ItemMicroShowcase({ globalSize }: { globalSize: Size }) {
         <MoreVerticalIcon className="size-4" />
       </Button>
     </ItemActions>
-  </Item>`}
-        >
-          <Item size={globalSize} className="w-full">
-            <ItemContent>
-              <ItemTitle>Actionable Item</ItemTitle>
-            </ItemContent>
-            <ItemActions>
-              <Button variant="ghost" size="sm" className="size-8 p-0" iconOnly>
-                <HeartIcon className="size-4" />
-              </Button>
-              <Button variant="ghost" size="sm" className="size-8 p-0" iconOnly>
-                <MoreVerticalIcon className="size-4" />
-              </Button>
-            </ItemActions>
-          </Item>
-        </ExampleSection>
+  </Item>`} preview={
+                      <>
+              <Item size={globalSize} className="w-full">
+                          <ItemContent>
+                            <ItemTitle>Actionable Item</ItemTitle>
+                          </ItemContent>
+                          <ItemActions>
+                            <Button variant="ghost" size="sm" className="size-8 p-0" iconOnly>
+                              <HeartIcon className="size-4" />
+                            </Button>
+                            <Button variant="ghost" size="sm" className="size-8 p-0" iconOnly>
+                              <MoreVerticalIcon className="size-4" />
+                            </Button>
+                          </ItemActions>
+                        </Item>
+                      </>
+                    } />
       </ExampleGrid>
 
-      <ExampleSection
-        label="Item Group"
-        description="Nhóm các Item và phân cách bằng ItemSeparator."
-        codeString={`<ItemGroup className="w-full max-w-sm mx-auto">
+      <ShowcaseExample title="Nhóm Item" description="Nhóm các Item và phân cách bằng ItemSeparator." code={`<ItemGroup className="w-full max-w-sm mx-auto">
     <Item>
       <ItemContent>
         <ItemTitle>Account Settings</ItemTitle>
@@ -211,37 +198,35 @@ function ItemMicroShowcase({ globalSize }: { globalSize: Size }) {
     <Item>
       <ItemContent>
         <ItemTitle className="text-destructive">
-          Delete Account
+          Xóa tài khoản
         </ItemTitle>
       </ItemContent>
     </Item>
-  </ItemGroup>`}
-      >
-        <ItemGroup className="w-full max-w-sm mx-auto">
-          <Item size={globalSize}>
-            <ItemContent>
-              <ItemTitle>Account Settings</ItemTitle>
-            </ItemContent>
-          </Item>
-          <ItemSeparator />
-          <Item size={globalSize}>
-            <ItemContent>
-              <ItemTitle>Notification Preferences</ItemTitle>
-            </ItemContent>
-          </Item>
-          <ItemSeparator />
-          <Item size={globalSize}>
-            <ItemContent>
-              <ItemTitle className="text-destructive">Delete Account</ItemTitle>
-            </ItemContent>
-          </Item>
-        </ItemGroup>
-      </ExampleSection>
+  </ItemGroup>`} preview={
+                  <>
+          <ItemGroup className="w-full max-w-sm mx-auto">
+                    <Item size={globalSize}>
+                      <ItemContent>
+                        <ItemTitle>Account Settings</ItemTitle>
+                      </ItemContent>
+                    </Item>
+                    <ItemSeparator />
+                    <Item size={globalSize}>
+                      <ItemContent>
+                        <ItemTitle>Notification Preferences</ItemTitle>
+                      </ItemContent>
+                    </Item>
+                    <ItemSeparator />
+                    <Item size={globalSize}>
+                      <ItemContent>
+                        <ItemTitle className="text-destructive">Xóa tài khoản</ItemTitle>
+                      </ItemContent>
+                    </Item>
+                  </ItemGroup>
+                  </>
+                } />
 
-      <ExampleSection
-        label="With Header and Footer"
-        description="Item phức tạp với ItemHeader và ItemFooter."
-        codeString={`<Item className="w-full max-w-sm mx-auto flex-col items-start gap-2">
+      <ShowcaseExample title="Có Header và Footer" description="Item phức tạp với ItemHeader và ItemFooter." code={`<Item className="w-full max-w-sm mx-auto flex-col items-start gap-2">
     <ItemHeader className="text-xs text-muted-foreground">
       Order #12345
     </ItemHeader>
@@ -251,23 +236,24 @@ function ItemMicroShowcase({ globalSize }: { globalSize: Size }) {
     <ItemFooter className="text-xs text-success flex items-center gap-1">
       <CheckIcon className="size-3" /> Delivered
     </ItemFooter>
-  </Item>`}
-      >
-        <Item
-          size={globalSize}
-          className="w-full max-w-sm mx-auto flex-col items-start gap-2"
-        >
-          <ItemHeader className="text-xs text-muted-foreground">
-            Order #12345
-          </ItemHeader>
-          <ItemContent>
-            <ItemTitle>Mechanical Keyboard v2</ItemTitle>
-          </ItemContent>
-          <ItemFooter className="text-xs text-success flex items-center gap-1">
-            <CheckIcon className="size-3" /> Delivered
-          </ItemFooter>
-        </Item>
-      </ExampleSection>
+  </Item>`} preview={
+                  <>
+          <Item
+                    size={globalSize}
+                    className="w-full max-w-sm mx-auto flex-col items-start gap-2"
+                  >
+                    <ItemHeader className="text-xs text-muted-foreground">
+                      Order #12345
+                    </ItemHeader>
+                    <ItemContent>
+                      <ItemTitle>Mechanical Keyboard v2</ItemTitle>
+                    </ItemContent>
+                    <ItemFooter className="text-xs text-success flex items-center gap-1">
+                      <CheckIcon className="size-3" /> Delivered
+                    </ItemFooter>
+                  </Item>
+                  </>
+                } />
     </div>
   );
 }
@@ -278,7 +264,7 @@ export default function ItemShowcase() {
     <Showcase
       title="Item"
       description="Container linh hoạt cho danh sách hoặc khối nội dung có cấu trúc."
-      generalConcept={
+      guideline={
         <ShowcaseDocs>
           <DocsH3>Item</DocsH3>
           <DocsP>
@@ -287,11 +273,7 @@ export default function ItemShowcase() {
           </DocsP>
         </ShowcaseDocs>
       }
-      tabs={[
-        {
-          label: "Micro (Primitive)",
-          content: <ItemMicroShowcase globalSize={globalSize} /> },
-      ]}
+      micro={{ content: <ItemMicroShowcase globalSize={globalSize} /> }}
     />
   );
 }