gladvn 0.2.35 → 0.2.37

package/src/dev/showcase/card.tsx

@@ -15,75 +15,65 @@ import { useDevContext } from "../../dev/components/dev-context";
 import {
   DocsP,
   ExampleGrid,
-  ExampleSection,
+  ShowcaseExample,
   Showcase,
   ShowcaseDocs
 } from "../../dev/components/showcase";
 import { type Size } from "../../lib/types";
 
-// ──────────────────────────────────────────────────────────
-// SECTION 1: Macro Content
-// ──────────────────────────────────────────────────────────
 function CardMacroShowcase({ globalSize }: { globalSize: Size }) {
   return (
-    <div className="space-y-10 mt-6">
+    <div className="space-y-10">
       <ExampleGrid>
-        <ExampleSection
-          label="Tiêu chuẩn (Standard)"
-          description="Card cài sẵn với đầy đủ tiêu đề, nội dung và chân trang."
-          codeString={`<CardPreset
-    title="Account Settings"
+        <ShowcaseExample title="Tiêu chuẩn (Standard)" description="Card cài sẵn với đầy đủ tiêu đề, nội dung và chân trang." code={`<CardPreset
+    title="Cài đặt tài khoản"
     description="Quản lý các cài đặt và tùy chọn cho tài khoản của bạn."
-    footer={<Button>Save Changes</Button>}
+    footer={<Button>Lưu thay đổi</Button>}
     className="w-full"
   >
     <div className="text-sm text-muted-foreground bg-muted/30 p-4 rounded-lg border border-dashed border-border/50">
       Settings form content goes here.
     </div>
-  </CardPreset>`}
-        >
-          <CardPreset
-            size={globalSize}
-            title="Account Settings"
-            description="Quản lý các cài đặt và tùy chọn cho tài khoản của bạn."
-            footer={<Button size={globalSize}>Save Changes</Button>}
-            className="w-full"
-          >
-            <div className="text-sm text-muted-foreground bg-muted/30 p-4 rounded-lg border border-dashed border-border/50">
-              Settings form content goes here.
-            </div>
-          </CardPreset>
-        </ExampleSection>
+  </CardPreset>`} preview={
+                      <>
+              <CardPreset
+                          size={globalSize}
+                          title="Cài đặt tài khoản"
+                          description="Quản lý các cài đặt và tùy chọn cho tài khoản của bạn."
+                          footer={<Button size={globalSize}>Lưu thay đổi</Button>}
+                          className="w-full"
+                        >
+                          <div className="text-sm text-muted-foreground bg-muted/30 p-4 rounded-lg border border-dashed border-border/50">
+                            Settings form content goes here.
+                          </div>
+                        </CardPreset>
+                      </>
+                    } />
 
-        <ExampleSection
-          label="Không có Footer"
-          description="Bỏ qua prop footer để ẩn hoàn toàn phần chân trang."
-          codeString={`<CardPreset
-    title="Notification Preferences"
+        <ShowcaseExample title="Không có Footer" description="Bỏ qua prop footer để ẩn hoàn toàn phần chân trang." code={`<CardPreset
+    title="Tùy chọn thông báo"
     description="Chọn những thông tin mà bạn muốn nhận thông báo."
     className="w-full"
   >
     <div className="text-sm text-muted-foreground bg-muted/30 p-4 rounded-lg border border-dashed border-border/50">
       Switches and toggles go here.
     </div>
-  </CardPreset>`}
-        >
-          <CardPreset
-            size={globalSize}
-            title="Notification Preferences"
-            description="Chọn những thông tin mà bạn muốn nhận thông báo."
-            className="w-full"
-          >
-            <div className="text-sm text-muted-foreground bg-muted/30 p-4 rounded-lg border border-dashed border-border/50">
-              Switches and toggles go here.
-            </div>
-          </CardPreset>
-        </ExampleSection>
+  </CardPreset>`} preview={
+                      <>
+              <CardPreset
+                          size={globalSize}
+                          title="Tùy chọn thông báo"
+                          description="Chọn những thông tin mà bạn muốn nhận thông báo."
+                          className="w-full"
+                        >
+                          <div className="text-sm text-muted-foreground bg-muted/30 p-4 rounded-lg border border-dashed border-border/50">
+                            Switches and toggles go here.
+                          </div>
+                        </CardPreset>
+                      </>
+                    } />
 
-        <ExampleSection
-          label="Custom Title Node"
-          description="Tiêu đề hỗ trợ nhận ReactNode thay vì string."
-          codeString={`<CardPreset
+        <ShowcaseExample title="Custom Title Node" description="Tiêu đề hỗ trợ nhận ReactNode thay vì string." code={`<CardPreset
     title={
       <div className="flex items-center gap-2">
         <span>API Keys</span>
@@ -99,37 +89,35 @@ function CardMacroShowcase({ globalSize }: { globalSize: Size }) {
         Copy
       </Button>
     </div>
-  </CardPreset>`}
-        >
-          <CardPreset
-            size={globalSize}
-            title={
-              <div className="flex items-center gap-2">
-                <span>API Keys</span>
-                <Badge color="warning">Experimental</Badge>
-              </div>
-            }
-            description="Quản lý các khóa API bí mật của bạn."
-            className="w-full"
-          >
-            <div className="text-sm text-muted-foreground bg-muted/30 p-4 rounded-lg border border-dashed border-border/50 flex items-center justify-between">
-              <span className="font-mono">sk_live_123...</span>
-              <Button size="sm" variant="outline">
-                Copy
-              </Button>
-            </div>
-          </CardPreset>
-        </ExampleSection>
+  </CardPreset>`} preview={
+                      <>
+              <CardPreset
+                          size={globalSize}
+                          title={
+                            <div className="flex items-center gap-2">
+                              <span>API Keys</span>
+                              <Badge color="warning">Experimental</Badge>
+                            </div>
+                          }
+                          description="Quản lý các khóa API bí mật của bạn."
+                          className="w-full"
+                        >
+                          <div className="text-sm text-muted-foreground bg-muted/30 p-4 rounded-lg border border-dashed border-border/50 flex items-center justify-between">
+                            <span className="font-mono">sk_live_123...</span>
+                            <Button size="sm" variant="outline">
+                              Copy
+                            </Button>
+                          </div>
+                        </CardPreset>
+                      </>
+                    } />
 
-        <ExampleSection
-          label="Với Form Controls"
-          description="Sử dụng children để đặt input form bên trong nội dung."
-          codeString={`<CardPreset
-    title="Update Profile"
+        <ShowcaseExample title="Với Form Controls" description="Sử dụng children để đặt input form bên trong nội dung." code={`<CardPreset
+    title="Cập nhật hồ sơ"
     description="Thay đổi tên hiển thị và email của bạn."
     footer={
       <div className="flex justify-between w-full">
-        <Button variant="ghost">Cancel</Button>
+        <Button variant="ghost">Huỷ</Button>
         <Button>Save</Button>
       </div>
     }
@@ -152,53 +140,48 @@ function CardMacroShowcase({ globalSize }: { globalSize: Size }) {
         />
       </div>
     </div>
-  </CardPreset>`}
-        >
-          <CardPreset
-            size={globalSize}
-            title="Update Profile"
-            description="Thay đổi tên hiển thị và email của bạn."
-            footer={
-              <div className="flex justify-between w-full">
-                <Button variant="ghost" size={globalSize}>
-                  Cancel
-                </Button>
-                <Button size={globalSize}>Save</Button>
-              </div>
-            }
-            className="w-full"
-          >
-            <div className="grid gap-4">
-              <div className="flex flex-col space-y-1.5">
-                <Label htmlFor="macro-name">Name</Label>
-                <Input id="macro-name" placeholder="Enter your name" />
-              </div>
-              <div className="flex flex-col space-y-1.5">
-                <Label htmlFor="macro-email">Email</Label>
-                <Input
-                  id="macro-email"
-                  type="email"
-                  placeholder="hello@example.com"
-                />
-              </div>
-            </div>
-          </CardPreset>
-        </ExampleSection>
+  </CardPreset>`} preview={
+                      <>
+              <CardPreset
+                          size={globalSize}
+                          title="Cập nhật hồ sơ"
+                          description="Thay đổi tên hiển thị và email của bạn."
+                          footer={
+                            <div className="flex justify-between w-full">
+                              <Button variant="ghost" size={globalSize}>
+                                Cancel
+                              </Button>
+                              <Button size={globalSize}>Save</Button>
+                            </div>
+                          }
+                          className="w-full"
+                        >
+                          <div className="grid gap-4">
+                            <div className="flex flex-col space-y-1.5">
+                              <Label htmlFor="macro-name">Name</Label>
+                              <Input id="macro-name" placeholder="Enter your name" />
+                            </div>
+                            <div className="flex flex-col space-y-1.5">
+                              <Label htmlFor="macro-email">Email</Label>
+                              <Input
+                                id="macro-email"
+                                type="email"
+                                placeholder="hello@example.com"
+                              />
+                            </div>
+                          </div>
+                        </CardPreset>
+                      </>
+                    } />
       </ExampleGrid>
     </div>
   );
 }
 
-// ──────────────────────────────────────────────────────────
-// SECTION 2: Micro Content
-// ──────────────────────────────────────────────────────────
 function CardMicroShowcase({ globalSize }: { globalSize: Size }) {
   return (
-    <div className="space-y-10 mt-6">
-      <ExampleSection
-        label="Cơ bản (Standard)"
-        description="Lắp ráp thủ công từ CardHeader, CardTitle, CardContent, CardFooter."
-        codeString={`<Card className="w-full max-w-sm">
+    <div className="space-y-10">
+      <ShowcaseExample title="Cơ bản (Standard)" description="Lắp ráp thủ công từ CardHeader, CardTitle, CardContent, CardFooter." code={`<Card className="w-full max-w-sm">
     <CardHeader>
       <CardTitle>Create project</CardTitle>
       <CardDescription>
@@ -219,42 +202,40 @@ function CardMicroShowcase({ globalSize }: { globalSize: Size }) {
       </form>
     </CardContent>
     <CardFooter className="flex justify-between">
-      <Button variant="outline">Cancel</Button>
-      <Button>Deploy</Button>
+      <Button variant="outline">Huỷ</Button>
+      <Button>Triển khai</Button>
     </CardFooter>
-  </Card>`}
-      >
-        <Card size={globalSize} className="w-full max-w-sm">
-          <CardHeader>
-            <CardTitle>Create project</CardTitle>
-            <CardDescription>
-              Deploy your new project in one-click.
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <form>
-              <div className="grid w-full items-center gap-4">
-                <div className="flex flex-col space-y-1.5">
-                  <Label htmlFor="name">Name</Label>
-                  <Input id="name" placeholder="Name of your project" />
-                </div>
-              </div>
-            </form>
-          </CardContent>
-          <CardFooter className="flex justify-between">
-            <Button variant="outline" size={globalSize}>
-              Cancel
-            </Button>
-            <Button size={globalSize}>Deploy</Button>
-          </CardFooter>
-        </Card>
-      </ExampleSection>
+  </Card>`} preview={
+                  <>
+          <Card size={globalSize} className="w-full max-w-sm">
+                    <CardHeader>
+                      <CardTitle>Create project</CardTitle>
+                      <CardDescription>
+                        Deploy your new project in one-click.
+                      </CardDescription>
+                    </CardHeader>
+                    <CardContent>
+                      <form>
+                        <div className="grid w-full items-center gap-4">
+                          <div className="flex flex-col space-y-1.5">
+                            <Label htmlFor="name">Name</Label>
+                            <Input id="name" placeholder="Name of your project" />
+                          </div>
+                        </div>
+                      </form>
+                    </CardContent>
+                    <CardFooter className="flex justify-between">
+                      <Button variant="outline" size={globalSize}>
+                        Cancel
+                      </Button>
+                      <Button size={globalSize}>Triển khai</Button>
+                    </CardFooter>
+                  </Card>
+                  </>
+                } />
 
       <ExampleGrid>
-        <ExampleSection
-          label="Chỉ có nội dung (Content Only)"
-          description="Dùng Card như một container bọc ngoài đơn giản."
-          codeString={`<Card className="w-full">
+        <ShowcaseExample title="Chỉ có nội dung (Content Only)" description="Dùng Card như một container bọc ngoài đơn giản." code={`<Card className="w-full">
     <CardContent>
       <p className="text-sm text-muted-foreground pt-4 md:pt-6">
         This is a simple content-only card without a header
@@ -262,31 +243,29 @@ function CardMicroShowcase({ globalSize }: { globalSize: Size }) {
         container.
       </p>
     </CardContent>
-  </Card>`}
-        >
-          <Card size={globalSize} className="w-full">
-            <CardContent>
-              <p className="text-sm text-muted-foreground pt-4 md:pt-6">
-                This is a simple content-only card without a header or footer.
-                Useful for wrapping any content in a card container.
-              </p>
-            </CardContent>
-          </Card>
-        </ExampleSection>
+  </Card>`} preview={
+                      <>
+              <Card size={globalSize} className="w-full">
+                          <CardContent>
+                            <p className="text-sm text-muted-foreground pt-4 md:pt-6">
+                              This is a simple content-only card without a header or footer.
+                              Useful for wrapping any content in a card container.
+                            </p>
+                          </CardContent>
+                        </Card>
+                      </>
+                    } />
 
-        <ExampleSection
-          label="Header đặc chế"
-          description="Tích hợp menu góc phải mà Preset khó thực hiện."
-          codeString={`<Card className="w-full">
+        <ShowcaseExample title="Header đặc chế" description="Tích hợp menu góc phải mà Preset khó thực hiện." code={`<Card className="w-full">
     <CardHeader>
       <div className="flex items-center justify-between">
         <div className="flex flex-col gap-1.5">
           <div className="flex items-center gap-2">
-            <CardTitle>Notifications</CardTitle>
+            <CardTitle>Thông báo</CardTitle>
             <Badge color="secondary">3 new</Badge>
           </div>
           <CardDescription>
-            You have 3 unread messages.
+            Bạn có 3 tin nhắn chưa đọc.
           </CardDescription>
         </div>
         <Button
@@ -314,55 +293,52 @@ function CardMicroShowcase({ globalSize }: { globalSize: Size }) {
         </Button>
       </div>
     </CardHeader>
-  </Card>`}
-        >
-          <Card size={globalSize} className="w-full">
-            <CardHeader>
-              <div className="flex items-center justify-between">
-                <div className="flex flex-col gap-1.5">
-                  <div className="flex items-center gap-2">
-                    <CardTitle>Notifications</CardTitle>
-                    <Badge color="secondary">3 new</Badge>
-                  </div>
-                  <CardDescription>You have 3 unread messages.</CardDescription>
-                </div>
-                <Button
-                  variant="ghost"
-                  size="sm"
-                  iconOnly
-                  className="h-8 w-8 rounded-full"
-                >
-                  <span className="sr-only">Open menu</span>
-                  <svg
-                    width="15"
-                    height="15"
-                    viewBox="0 0 15 15"
-                    fill="none"
-                    xmlns="http://www.w3.org/2000/svg"
-                    className="h-4 w-4"
-                  >
-                    <path
-                      d="M3.625 7.5C3.625 8.12132 3.12132 8.625 2.5 8.625C1.87868 8.625 1.375 8.12132 1.375 7.5C1.375 6.87868 1.87868 6.375 2.5 6.375C3.12132 6.375 3.625 6.87868 3.625 7.5ZM8.625 7.5C8.625 8.12132 8.12132 8.625 7.5 8.625C6.87868 8.625 6.375 8.12132 6.375 7.5C6.375 6.87868 6.87868 6.375 7.5 6.375C8.12132 6.375 8.625 6.87868 8.625 7.5ZM13.625 7.5C13.625 8.12132 13.1213 8.625 12.5 8.625C11.8787 8.625 11.375 8.12132 11.375 7.5C11.375 6.87868 11.8787 6.375 12.5 6.375C13.1213 6.375 13.625 6.87868 13.625 7.5Z"
-                      fill="currentColor"
-                      fillRule="evenodd"
-                      clipRule="evenodd"
-                    ></path>
-                  </svg>
-                </Button>
-              </div>
-            </CardHeader>
-          </Card>
-        </ExampleSection>
+  </Card>`} preview={
+                      <>
+              <Card size={globalSize} className="w-full">
+                          <CardHeader>
+                            <div className="flex items-center justify-between">
+                              <div className="flex flex-col gap-1.5">
+                                <div className="flex items-center gap-2">
+                                  <CardTitle>Thông báo</CardTitle>
+                                  <Badge color="secondary">3 new</Badge>
+                                </div>
+                                <CardDescription>Bạn có 3 tin nhắn chưa đọc.</CardDescription>
+                              </div>
+                              <Button
+                                variant="ghost"
+                                size="sm"
+                                iconOnly
+                                className="h-8 w-8 rounded-full"
+                              >
+                                <span className="sr-only">Open menu</span>
+                                <svg
+                                  width="15"
+                                  height="15"
+                                  viewBox="0 0 15 15"
+                                  fill="none"
+                                  xmlns="http://www.w3.org/2000/svg"
+                                  className="h-4 w-4"
+                                >
+                                  <path
+                                    d="M3.625 7.5C3.625 8.12132 3.12132 8.625 2.5 8.625C1.87868 8.625 1.375 8.12132 1.375 7.5C1.375 6.87868 1.87868 6.375 2.5 6.375C3.12132 6.375 3.625 6.87868 3.625 7.5ZM8.625 7.5C8.625 8.12132 8.12132 8.625 7.5 8.625C6.87868 8.625 6.375 8.12132 6.375 7.5C6.375 6.87868 6.87868 6.375 7.5 6.375C8.12132 6.375 8.625 6.87868 8.625 7.5ZM13.625 7.5C13.625 8.12132 13.1213 8.625 12.5 8.625C11.8787 8.625 11.375 8.12132 11.375 7.5C11.375 6.87868 11.8787 6.375 12.5 6.375C13.1213 6.375 13.625 6.87868 13.625 7.5Z"
+                                    fill="currentColor"
+                                    fillRule="evenodd"
+                                    clipRule="evenodd"
+                                  ></path>
+                                </svg>
+                              </Button>
+                            </div>
+                          </CardHeader>
+                        </Card>
+                      </>
+                    } />
       </ExampleGrid>
 
-      <ExampleSection
-        label="Thẻ chỉ số KPI (Stats Cards)"
-        description="Thiết kế thẻ dashboard thông dụng trong thực tế."
-        fullWidth
-        codeString={`<div className="grid grid-cols-1 md:grid-cols-3 gap-6 w-full">
+      <ShowcaseExample title="Thẻ chỉ số KPI (Stats Cards)" description="Thiết kế thẻ dashboard thông dụng trong thực tế." code={`<div className="grid grid-cols-1 md:grid-cols-3 gap-6 w-full">
     <Card>
       <CardHeader className="pb-2">
-        <CardDescription>Total Revenue</CardDescription>
+        <CardDescription>Tổng doanh thu</CardDescription>
         <CardTitle className="text-3xl">
           $45,231.89
         </CardTitle>
@@ -375,7 +351,7 @@ function CardMicroShowcase({ globalSize }: { globalSize: Size }) {
     </Card>
     <Card>
       <CardHeader className="pb-2">
-        <CardDescription>Subscriptions</CardDescription>
+        <CardDescription>Lượt đăng ký</CardDescription>
         <CardTitle className="text-3xl">+2,350</CardTitle>
       </CardHeader>
       <CardContent>
@@ -386,7 +362,7 @@ function CardMicroShowcase({ globalSize }: { globalSize: Size }) {
     </Card>
     <Card>
       <CardHeader className="pb-2">
-        <CardDescription>Active Now</CardDescription>
+        <CardDescription>Đang hoạt động</CardDescription>
         <CardTitle className="text-3xl">+573</CardTitle>
       </CardHeader>
       <CardContent>
@@ -395,58 +371,56 @@ function CardMicroShowcase({ globalSize }: { globalSize: Size }) {
         </p>
       </CardContent>
     </Card>
-  </div>`}
-      >
-        <div className="grid grid-cols-1 md:grid-cols-3 gap-6 w-full">
-          <Card size={globalSize}>
-            <CardHeader className="pb-2">
-              <CardDescription>Total Revenue</CardDescription>
-              <CardTitle className="text-3xl">$45,231.89</CardTitle>
-            </CardHeader>
-            <CardContent>
-              <p className="text-xs text-muted-foreground">
-                +20.1% from last month
-              </p>
-            </CardContent>
-          </Card>
-          <Card size={globalSize}>
-            <CardHeader className="pb-2">
-              <CardDescription>Subscriptions</CardDescription>
-              <CardTitle className="text-3xl">+2,350</CardTitle>
-            </CardHeader>
-            <CardContent>
-              <p className="text-xs text-muted-foreground">
-                +180.1% from last month
-              </p>
-            </CardContent>
-          </Card>
-          <Card size={globalSize}>
-            <CardHeader className="pb-2">
-              <CardDescription>Active Now</CardDescription>
-              <CardTitle className="text-3xl">+573</CardTitle>
-            </CardHeader>
-            <CardContent>
-              <p className="text-xs text-muted-foreground">
-                +201 since last hour
-              </p>
-            </CardContent>
-          </Card>
-        </div>
-      </ExampleSection>
+  </div>`} preview={
+                  <>
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-6 w-full">
+                    <Card size={globalSize}>
+                      <CardHeader className="pb-2">
+                        <CardDescription>Tổng doanh thu</CardDescription>
+                        <CardTitle className="text-3xl">$45,231.89</CardTitle>
+                      </CardHeader>
+                      <CardContent>
+                        <p className="text-xs text-muted-foreground">
+                          +20.1% from last month
+                        </p>
+                      </CardContent>
+                    </Card>
+                    <Card size={globalSize}>
+                      <CardHeader className="pb-2">
+                        <CardDescription>Lượt đăng ký</CardDescription>
+                        <CardTitle className="text-3xl">+2,350</CardTitle>
+                      </CardHeader>
+                      <CardContent>
+                        <p className="text-xs text-muted-foreground">
+                          +180.1% from last month
+                        </p>
+                      </CardContent>
+                    </Card>
+                    <Card size={globalSize}>
+                      <CardHeader className="pb-2">
+                        <CardDescription>Đang hoạt động</CardDescription>
+                        <CardTitle className="text-3xl">+573</CardTitle>
+                      </CardHeader>
+                      <CardContent>
+                        <p className="text-xs text-muted-foreground">
+                          +201 since last hour
+                        </p>
+                      </CardContent>
+                    </Card>
+                  </div>
+                  </>
+                } />
     </div>
   );
 }
 
-// ──────────────────────────────────────────────────────────
-// SECTION 3: Entry point
-// ──────────────────────────────────────────────────────────
 export default function CardShowcase() {
   const { size: globalSize } = useDevContext();
   return (
     <Showcase
       title="Card"
       description="Thẻ hiển thị thông tin đóng gói có cấu trúc (tiêu đề, nội dung, footer)."
-      generalConcept={
+      guideline={
         <ShowcaseDocs>
           <DocsP>
             Dùng để nhóm các thông tin liên quan lại với nhau trong một
@@ -455,14 +429,8 @@ export default function CardShowcase() {
           </DocsP>
         </ShowcaseDocs>
       }
-      tabs={[
-        {
-          label: "Micro (Primitive)",
-          content: <CardMicroShowcase globalSize={globalSize} /> },
-        {
-          label: "Macro (Preset)",
-          content: <CardMacroShowcase globalSize={globalSize} /> },
-      ]}
+      micro={{ content: <CardMicroShowcase globalSize={globalSize} /> }}
+      macro={{ content: <CardMacroShowcase globalSize={globalSize} /> }}
     />
   );
 }