gladvn 0.2.36 → 0.2.37

package/src/dev/showcase/dialog.tsx

@@ -23,26 +23,20 @@ import {
   DocsH3,
   DocsP,
   ExampleGrid,
-  ExampleSection,
+  ShowcaseExample,
   Showcase,
   ShowcaseDocs
 } from "../../dev/components/showcase";
 import { type Size } from "../../lib/types";
 import { cn } from "../../lib/utils";
 
-// ──────────────────────────────────────────────────────────
-// Macro Showcase
-// ──────────────────────────────────────────────────────────
 function DialogMacroShowcase({ globalSize }: { globalSize: Size }) {
   const [controlledOpen, setControlledOpen] = useState(false);
 
   return (
     <div className="space-y-10">
       <ExampleGrid>
-        <ExampleSection
-          label="Basic Usage"
-          description="DialogPreset với title, description và footer đơn giản."
-          codeString={`<DialogPreset
+        <ShowcaseExample title="Basic Usage" description="DialogPreset với title, description và footer đơn giản." code={`<DialogPreset
     title="Update Subscription"
     description="Are you sure you want to upgrade your plan to Pro? This will charge your card immediately."
     trigger={
@@ -50,44 +44,42 @@ function DialogMacroShowcase({ globalSize }: { globalSize: Size }) {
     }
     footer={
       <>
-        <Button variant="ghost">Cancel</Button>
+        <Button variant="ghost">Huỷ</Button>
         <Button color="primary">Confirm</Button>
       </>
     }
-  />`}
-        >
-          <DialogPreset
-            size={globalSize}
-            title="Update Subscription"
-            description="Are you sure you want to upgrade your plan to Pro? This will charge your card immediately."
-            trigger={
-              <Button variant="outline" size={globalSize}>
-                Upgrade Plan
-              </Button>
-            }
-            footer={
-              <>
-                <Button variant="ghost" size={globalSize}>
-                  Cancel
-                </Button>
-                <Button color="primary" size={globalSize}>
-                  Confirm
-                </Button>
-              </>
-            }
-          />
-        </ExampleSection>
+  />`} preview={
+                      <>
+              <DialogPreset
+                          size={globalSize}
+                          title="Update Subscription"
+                          description="Are you sure you want to upgrade your plan to Pro? This will charge your card immediately."
+                          trigger={
+                            <Button variant="outline" size={globalSize}>
+                              Upgrade Plan
+                            </Button>
+                          }
+                          footer={
+                            <>
+                              <Button variant="ghost" size={globalSize}>
+                                Cancel
+                              </Button>
+                              <Button color="primary" size={globalSize}>
+                                Confirm
+                              </Button>
+                            </>
+                          }
+                        />
+                      </>
+                    } />
 
-        <ExampleSection
-          label="Forms & Custom Content"
-          description="Sử dụng children để render form hoặc nội dung phức tạp."
-          codeString={`<DialogPreset
-    title="Edit profile"
-    description="Make changes to your profile here. Click save when you're done."
+        <ShowcaseExample title="Forms & Custom Content" description="Sử dụng children để render form hoặc nội dung phức tạp." code={`<DialogPreset
+    title="Chỉnh sửa hồ sơ"
+    description="Thay đổi thông tin hồ sơ của bạn tại đây. Bấm lưu khi hoàn tất."
     trigger={
-      <Button variant="outline">Edit Profile</Button>
+      <Button variant="outline">Chỉnh sửa hồ sơ</Button>
     }
-    footer={<Button type="submit">Save changes</Button>}
+    footer={<Button type="submit">Lưu thay đổi</Button>}
   >
     <div className="grid gap-4 py-4">
       <div className="grid grid-cols-4 items-center gap-4">
@@ -111,57 +103,55 @@ function DialogMacroShowcase({ globalSize }: { globalSize: Size }) {
         />
       </div>
     </div>
-  </DialogPreset>`}
-        >
-          <DialogPreset
-            size={globalSize}
-            title="Edit profile"
-            description="Make changes to your profile here. Click save when you're done."
-            trigger={
-              <Button variant="outline" size={globalSize}>
-                Edit Profile
-              </Button>
-            }
-            footer={
-              <Button type="submit" size={globalSize}>
-                Save changes
-              </Button>
-            }
-          >
-            <div className="grid gap-4 py-4">
-              <div className="grid grid-cols-4 items-center gap-4">
-                <Label htmlFor="name" className="text-right">
-                  Name
-                </Label>
-                <Input
-                  id="name"
-                  defaultValue="Pedro Duarte"
-                  className="col-span-3"
-                />
-              </div>
-              <div className="grid grid-cols-4 items-center gap-4">
-                <Label htmlFor="username" className="text-right">
-                  Username
-                </Label>
-                <Input
-                  id="username"
-                  defaultValue="@peduarte"
-                  className="col-span-3"
-                />
-              </div>
-            </div>
-          </DialogPreset>
-        </ExampleSection>
+  </DialogPreset>`} preview={
+                      <>
+              <DialogPreset
+                          size={globalSize}
+                          title="Chỉnh sửa hồ sơ"
+                          description="Thay đổi thông tin hồ sơ của bạn tại đây. Bấm lưu khi hoàn tất."
+                          trigger={
+                            <Button variant="outline" size={globalSize}>
+                              Chỉnh sửa hồ sơ
+                            </Button>
+                          }
+                          footer={
+                            <Button type="submit" size={globalSize}>
+                              Lưu thay đổi
+                            </Button>
+                          }
+                        >
+                          <div className="grid gap-4 py-4">
+                            <div className="grid grid-cols-4 items-center gap-4">
+                              <Label htmlFor="name" className="text-right">
+                                Name
+                              </Label>
+                              <Input
+                                id="name"
+                                defaultValue="Pedro Duarte"
+                                className="col-span-3"
+                              />
+                            </div>
+                            <div className="grid grid-cols-4 items-center gap-4">
+                              <Label htmlFor="username" className="text-right">
+                                Username
+                              </Label>
+                              <Input
+                                id="username"
+                                defaultValue="@peduarte"
+                                className="col-span-3"
+                              />
+                            </div>
+                          </div>
+                        </DialogPreset>
+                      </>
+                    } />
       </ExampleGrid>
 
       <ExampleGrid>
-        <ExampleSection
-          label="No Close Button"
-          description="Ẩn nút X ở góc trên bằng showCloseButton={false}."
-          codeString={`<DialogPreset
+        <ShowcaseExample title="No Close Button" description="Ẩn nút X ở góc trên bằng showCloseButton={false}." code={`<DialogPreset
     showCloseButton={false}
-    title="Terms of Service"
-    description="You must accept the new terms to continue using the application."
+    title="Điều khoản Dịch vụ"
+    description="Bạn phải chấp nhận điều khoản mới để tiếp tục sử dụng ứng dụng."
     trigger={<Button variant="outline">View Terms</Button>}
     footer={
       <>
@@ -171,43 +161,41 @@ function DialogMacroShowcase({ globalSize }: { globalSize: Size }) {
     }
   >
     <p className="text-sm text-muted-foreground">
-      By clicking accept, you agree to our updated Terms of
-      Service and Privacy Policy.
+      Bằng cách chọn chấp nhận, bạn đồng ý với Điều khoản của
+      Dịch vụ và Chính sách bảo mật.
     </p>
-  </DialogPreset>`}
-        >
-          <DialogPreset
-            size={globalSize}
-            showCloseButton={false}
-            title="Terms of Service"
-            description="You must accept the new terms to continue using the application."
-            trigger={
-              <Button variant="outline" size={globalSize}>
-                View Terms
-              </Button>
-            }
-            footer={
-              <>
-                <Button variant="outline" size={globalSize}>
-                  Decline
-                </Button>
-                <Button size={globalSize}>Accept</Button>
-              </>
-            }
-          >
-            <p className="text-sm text-muted-foreground">
-              By clicking accept, you agree to our updated Terms of Service and
-              Privacy Policy.
-            </p>
-          </DialogPreset>
-        </ExampleSection>
+  </DialogPreset>`} preview={
+                      <>
+              <DialogPreset
+                          size={globalSize}
+                          showCloseButton={false}
+                          title="Điều khoản Dịch vụ"
+                          description="Bạn phải chấp nhận điều khoản mới để tiếp tục sử dụng ứng dụng."
+                          trigger={
+                            <Button variant="outline" size={globalSize}>
+                              View Terms
+                            </Button>
+                          }
+                          footer={
+                            <>
+                              <Button variant="outline" size={globalSize}>
+                                Decline
+                              </Button>
+                              <Button size={globalSize}>Accept</Button>
+                            </>
+                          }
+                        >
+                          <p className="text-sm text-muted-foreground">
+                            Bằng cách chọn chấp nhận, bạn đồng ý với Điều khoản của Service and
+                            Privacy Policy.
+                          </p>
+                        </DialogPreset>
+                      </>
+                    } />
 
-        <ExampleSection
-          label="Large Content Sizing"
-          description="Sử dụng size='lg' cho nội dung lớn hơn."
-          codeString={`<DialogPreset
-    title="Detailed Report"
-    description="Monthly analytics and performance overview."
+        <ShowcaseExample title="Large Content Sizing" description="Sử dụng size='lg' cho nội dung lớn hơn." code={`<DialogPreset
+    title="Báo cáo chi tiết"
+    description="Phân tích hàng tháng và tổng quan hiệu suất."
     trigger={<Button variant="outline">View Report</Button>}
     footer={<Button>Download PDF</Button>}
   >
@@ -216,33 +204,31 @@ function DialogMacroShowcase({ globalSize }: { globalSize: Size }) {
         Large Content Area
       </span>
     </div>
-  </DialogPreset>`}
-        >
-          <DialogPreset
-            size={globalSize}
-            title="Detailed Report"
-            description="Monthly analytics and performance overview."
-            trigger={
-              <Button variant="outline" size={globalSize}>
-                View Report
-              </Button>
-            }
-            footer={<Button size={globalSize}>Download PDF</Button>}
-          >
-            <div className="h-[200px] flex items-center justify-center rounded-md border border-border border-dashed bg-muted/20">
-              <span className="text-muted-foreground text-sm">
-                Large Content Area
-              </span>
-            </div>
-          </DialogPreset>
-        </ExampleSection>
+  </DialogPreset>`} preview={
+                      <>
+              <DialogPreset
+                          size={globalSize}
+                          title="Báo cáo chi tiết"
+                          description="Phân tích hàng tháng và tổng quan hiệu suất."
+                          trigger={
+                            <Button variant="outline" size={globalSize}>
+                              View Report
+                            </Button>
+                          }
+                          footer={<Button size={globalSize}>Download PDF</Button>}
+                        >
+                          <div className="h-[200px] flex items-center justify-center rounded-md border border-border border-dashed bg-muted/20">
+                            <span className="text-muted-foreground text-sm">
+                              Large Content Area
+                            </span>
+                          </div>
+                        </DialogPreset>
+                      </>
+                    } />
       </ExampleGrid>
 
       <ExampleGrid>
-        <ExampleSection
-          label="Controlled State"
-          description="Sử dụng open và onOpenChange để quản lý trạng thái đóng mở bằng React state."
-          codeString={`<div className="w-full flex flex-col gap-4 items-center justify-center">
+        <ShowcaseExample title="Controlled State" description="Sử dụng open và onOpenChange để quản lý trạng thái đóng mở bằng React state." code={`<div className="w-full flex flex-col gap-4 items-center justify-center">
     <div className="flex gap-4 items-center">
       <Button
         onClick={() => setControlledOpen(true)}
@@ -273,60 +259,58 @@ function DialogMacroShowcase({ globalSize }: { globalSize: Size }) {
         Bạn có thể đóng bằng nút bên dưới hoặc dấu X.
       </p>
     </DialogPreset>
-  </div>`}
-        >
-          <div className="w-full flex flex-col gap-4 items-center justify-center">
-            <div className="flex gap-4 items-center">
-              <Button
-                onClick={() => setControlledOpen(true)}
-                variant="outline"
-                size={globalSize}
-              >
-                Open Controlled Dialog
-              </Button>
-              <span className="text-sm text-muted-foreground font-mono">
-                State: {controlledOpen ? "true" : "false"}
-              </span>
-            </div>
+  </div>`} preview={
+                      <>
+              <div className="w-full flex flex-col gap-4 items-center justify-center">
+                          <div className="flex gap-4 items-center">
+                            <Button
+                              onClick={() => setControlledOpen(true)}
+                              variant="outline"
+                              size={globalSize}
+                            >
+                              Open Controlled Dialog
+                            </Button>
+                            <span className="text-sm text-muted-foreground font-mono">
+                              State: {controlledOpen ? "true" : "false"}
+                            </span>
+                          </div>
 
-            <DialogPreset
-              open={controlledOpen}
-              onOpenChange={setControlledOpen}
-              size={globalSize}
-              title="Controlled Dialog"
-              description="Trạng thái của dialog này được quản lý hoàn toàn bởi React state bên ngoài."
-              footer={
-                <Button
-                  color="primary"
-                  onClick={() => setControlledOpen(false)}
-                  size={globalSize}
-                >
-                  Close Manually
-                </Button>
-              }
-            >
-              <p className="text-sm text-foreground">
-                Bạn có thể đóng bằng nút bên dưới hoặc dấu X.
-              </p>
-            </DialogPreset>
-          </div>
-        </ExampleSection>
+                          <DialogPreset
+                            open={controlledOpen}
+                            onOpenChange={setControlledOpen}
+                            size={globalSize}
+                            title="Controlled Dialog"
+                            description="Trạng thái của dialog này được quản lý hoàn toàn bởi React state bên ngoài."
+                            footer={
+                              <Button
+                                color="primary"
+                                onClick={() => setControlledOpen(false)}
+                                size={globalSize}
+                              >
+                                Close Manually
+                              </Button>
+                            }
+                          >
+                            <p className="text-sm text-foreground">
+                              Bạn có thể đóng bằng nút bên dưới hoặc dấu X.
+                            </p>
+                          </DialogPreset>
+                        </div>
+                      </>
+                    } />
 
-        <ExampleSection
-          label="Sticky Footer (Long Content)"
-          description="Layout in-flow giúp footer luôn dính ở dưới cùng khi có thanh cuộn."
-          codeString={`<DialogPreset
+        <ShowcaseExample title="Sticky Footer (Long Content)" description="Layout in-flow giúp footer luôn dính ở dưới cùng khi có thanh cuộn." code={`<DialogPreset
     trigger={
       <Button variant="outline">View Long Content</Button>
     }
-    title="Terms & Conditions"
+    title="Điều khoản & Điều kiện"
     description="Cuộn xuống dưới cùng để có thể đồng ý với điều khoản."
     footer={
       <div className="flex w-full sm:justify-end gap-2">
         <DialogClose render={<Button variant="ghost" />}>
           Cancel
         </DialogClose>
-        <Button>I Agree</Button>
+        <Button>Tôi đồng ý</Button>
       </div>
     }
   >
@@ -344,52 +328,50 @@ function DialogMacroShowcase({ globalSize }: { globalSize: Size }) {
         END OF CONTENT
       </span>
     </div>
-  </DialogPreset>`}
-        >
-          <DialogPreset
-            trigger={
-              <Button variant="outline" size={globalSize}>
-                View Long Content
-              </Button>
-            }
-            size={globalSize}
-            title="Terms & Conditions"
-            description="Cuộn xuống dưới cùng để có thể đồng ý với điều khoản."
-            footer={
-              <div className="flex w-full sm:justify-end gap-2">
-                <DialogClose
-                  render={<Button variant="ghost" size={globalSize} />}
-                >
-                  Cancel
-                </DialogClose>
-                <Button size={globalSize}>I Agree</Button>
-              </div>
-            }
-          >
-            <div className="flex h-[800px] flex-col items-center justify-between rounded-md border border-border border-dashed bg-muted/20 py-8">
-              <span className="text-sm font-medium text-muted-foreground">
-                START OF CONTENT
-              </span>
-              <div className="flex flex-col items-center gap-2">
-                <span className="text-4xl">👇</span>
-                <span className="text-sm text-muted-foreground">
-                  Keep scrolling
-                </span>
-              </div>
-              <span className="text-sm font-medium text-muted-foreground">
-                END OF CONTENT
-              </span>
-            </div>
-          </DialogPreset>
-        </ExampleSection>
+  </DialogPreset>`} preview={
+                      <>
+              <DialogPreset
+                          trigger={
+                            <Button variant="outline" size={globalSize}>
+                              View Long Content
+                            </Button>
+                          }
+                          size={globalSize}
+                          title="Điều khoản & Điều kiện"
+                          description="Cuộn xuống dưới cùng để có thể đồng ý với điều khoản."
+                          footer={
+                            <div className="flex w-full sm:justify-end gap-2">
+                              <DialogClose
+                                render={<Button variant="ghost" size={globalSize} />}
+                              >
+                                Cancel
+                              </DialogClose>
+                              <Button size={globalSize}>Tôi đồng ý</Button>
+                            </div>
+                          }
+                        >
+                          <div className="flex h-[800px] flex-col items-center justify-between rounded-md border border-border border-dashed bg-muted/20 py-8">
+                            <span className="text-sm font-medium text-muted-foreground">
+                              START OF CONTENT
+                            </span>
+                            <div className="flex flex-col items-center gap-2">
+                              <span className="text-4xl">👇</span>
+                              <span className="text-sm text-muted-foreground">
+                                Keep scrolling
+                              </span>
+                            </div>
+                            <span className="text-sm font-medium text-muted-foreground">
+                              END OF CONTENT
+                            </span>
+                          </div>
+                        </DialogPreset>
+                      </>
+                    } />
       </ExampleGrid>
     </div>
   );
 }
 
-// ──────────────────────────────────────────────────────────
-// Micro Showcase
-// ──────────────────────────────────────────────────────────
 function DialogMicroShowcase({ globalSize }: { globalSize: Size }) {
   const [controlledOpen, setControlledOpen] = useState(false);
   const contentClass =
@@ -402,10 +384,7 @@ function DialogMicroShowcase({ globalSize }: { globalSize: Size }) {
   return (
     <div className="space-y-10">
       <ExampleGrid>
-        <ExampleSection
-          label="Basic Usage"
-          description="Sử dụng các thành phần rời rạc để tạo dialog cơ bản."
-          codeString={`<Dialog>
+        <ShowcaseExample title="Basic Usage" description="Sử dụng các thành phần rời rạc để tạo dialog cơ bản." code={`<Dialog>
     <DialogTrigger
       render={
         <Button variant="outline">Upgrade Plan</Button>
@@ -441,66 +420,64 @@ function DialogMicroShowcase({ globalSize }: { globalSize: Size }) {
         </DialogClose>
       </DialogContent>
     
-  </Dialog>`}
-        >
-          <Dialog>
-            <DialogTrigger
-              render={
-                <Button variant="outline" size={globalSize}>
-                  Upgrade Plan
-                </Button>
-              }
-            />
+  </Dialog>`} preview={
+                      <>
+              <Dialog>
+                          <DialogTrigger
+                            render={
+                              <Button variant="outline" size={globalSize}>
+                                Upgrade Plan
+                              </Button>
+                            }
+                          />
 
-              <DialogContent className={contentClass}>
-                <DialogHeader>
-                  <DialogTitle>Update Subscription</DialogTitle>
-                  <DialogDescription>
-                    Are you sure you want to upgrade your plan to Pro? This will
-                    charge your card immediately.
-                  </DialogDescription>
-                </DialogHeader>
-                <DialogFooter className="-mx-4 -mb-4 mt-4 rounded-b-xl border-t border-t-border bg-muted/50 p-4">
-                  <DialogClose
-                    render={<Button variant="ghost" size={globalSize} />}
-                  >
-                    Cancel
-                  </DialogClose>
-                  <Button color="primary" size={globalSize}>
-                    Confirm
-                  </Button>
-                </DialogFooter>
-                <DialogClose
-                  render={
-                    <Button
-                      variant="ghost"
-                      className="absolute top-2 right-2"
-                      size="sm"
-                      iconOnly
-                    />
-                  }
-                >
-                  <XIcon />
-                  <span className="sr-only">Close</span>
-                </DialogClose>
-              </DialogContent>
-            
-          </Dialog>
-        </ExampleSection>
+                            <DialogContent className={contentClass}>
+                              <DialogHeader>
+                                <DialogTitle>Update Subscription</DialogTitle>
+                                <DialogDescription>
+                                  Are you sure you want to upgrade your plan to Pro? This will
+                                  charge your card immediately.
+                                </DialogDescription>
+                              </DialogHeader>
+                              <DialogFooter className="-mx-4 -mb-4 mt-4 rounded-b-xl border-t border-t-border bg-muted/50 p-4">
+                                <DialogClose
+                                  render={<Button variant="ghost" size={globalSize} />}
+                                >
+                                  Cancel
+                                </DialogClose>
+                                <Button color="primary" size={globalSize}>
+                                  Confirm
+                                </Button>
+                              </DialogFooter>
+                              <DialogClose
+                                render={
+                                  <Button
+                                    variant="ghost"
+                                    className="absolute top-2 right-2"
+                                    size="sm"
+                                    iconOnly
+                                  />
+                                }
+                              >
+                                <XIcon />
+                                <span className="sr-only">Close</span>
+                              </DialogClose>
+                            </DialogContent>
+                          
+                        </Dialog>
+                      </>
+                    } />
 
-        <ExampleSection
-          label="Forms & Custom Content"
-          description="Sử dụng form bên trong DialogContent."
-          codeString={`<Dialog>
+        <ShowcaseExample title="Forms & Custom Content" description="Sử dụng form bên trong DialogContent." code={`<Dialog>
     <DialogTrigger
       render={
-        <Button variant="outline">Edit Profile</Button>
+        <Button variant="outline">Chỉnh sửa hồ sơ</Button>
       }
     />
 
       <DialogContent className={contentClass}>
         <DialogHeader>
-          <DialogTitle>Edit profile</DialogTitle>
+          <DialogTitle>Chỉnh sửa hồ sơ</DialogTitle>
           <DialogDescription>
             Make changes to your profile here. Click save
             when you're done.
@@ -532,7 +509,7 @@ function DialogMicroShowcase({ globalSize }: { globalSize: Size }) {
           </div>
         </div>
         <DialogFooter className="-mx-4 -mb-4 mt-4 rounded-b-xl border-t border-t-border bg-muted/50 p-4">
-          <Button type="submit">Save changes</Button>
+          <Button type="submit">Lưu thay đổi</Button>
         </DialogFooter>
         <DialogClose
           render={
@@ -549,91 +526,89 @@ function DialogMicroShowcase({ globalSize }: { globalSize: Size }) {
         </DialogClose>
       </DialogContent>
     
-  </Dialog>`}
-        >
-          <Dialog>
-            <DialogTrigger
-              render={
-                <Button variant="outline" size={globalSize}>
-                  Edit Profile
-                </Button>
-              }
-            />
+  </Dialog>`} preview={
+                      <>
+              <Dialog>
+                          <DialogTrigger
+                            render={
+                              <Button variant="outline" size={globalSize}>
+                                Chỉnh sửa hồ sơ
+                              </Button>
+                            }
+                          />
 
-              <DialogContent className={contentClass}>
-                <DialogHeader>
-                  <DialogTitle>Edit profile</DialogTitle>
-                  <DialogDescription>
-                    Make changes to your profile here. Click save when you're
-                    done.
-                  </DialogDescription>
-                </DialogHeader>
-                <div className="grid gap-4 py-4">
-                  <div className="grid grid-cols-4 items-center gap-4">
-                    <Label htmlFor="name" className="text-right">
-                      Name
-                    </Label>
-                    <Input
-                      id="name"
-                      defaultValue="Pedro Duarte"
-                      className="col-span-3"
-                    />
-                  </div>
-                  <div className="grid grid-cols-4 items-center gap-4">
-                    <Label htmlFor="username" className="text-right">
-                      Username
-                    </Label>
-                    <Input
-                      id="username"
-                      defaultValue="@peduarte"
-                      className="col-span-3"
-                    />
-                  </div>
-                </div>
-                <DialogFooter className="-mx-4 -mb-4 mt-4 rounded-b-xl border-t border-t-border bg-muted/50 p-4">
-                  <Button type="submit" size={globalSize}>
-                    Save changes
-                  </Button>
-                </DialogFooter>
-                <DialogClose
-                  render={
-                    <Button
-                      variant="ghost"
-                      className="absolute top-2 right-2"
-                      size="sm"
-                      iconOnly
-                    />
-                  }
-                >
-                  <XIcon />
-                  <span className="sr-only">Close</span>
-                </DialogClose>
-              </DialogContent>
-            
-          </Dialog>
-        </ExampleSection>
+                            <DialogContent className={contentClass}>
+                              <DialogHeader>
+                                <DialogTitle>Chỉnh sửa hồ sơ</DialogTitle>
+                                <DialogDescription>
+                                  Make changes to your profile here. Click save when you're
+                                  done.
+                                </DialogDescription>
+                              </DialogHeader>
+                              <div className="grid gap-4 py-4">
+                                <div className="grid grid-cols-4 items-center gap-4">
+                                  <Label htmlFor="name" className="text-right">
+                                    Name
+                                  </Label>
+                                  <Input
+                                    id="name"
+                                    defaultValue="Pedro Duarte"
+                                    className="col-span-3"
+                                  />
+                                </div>
+                                <div className="grid grid-cols-4 items-center gap-4">
+                                  <Label htmlFor="username" className="text-right">
+                                    Username
+                                  </Label>
+                                  <Input
+                                    id="username"
+                                    defaultValue="@peduarte"
+                                    className="col-span-3"
+                                  />
+                                </div>
+                              </div>
+                              <DialogFooter className="-mx-4 -mb-4 mt-4 rounded-b-xl border-t border-t-border bg-muted/50 p-4">
+                                <Button type="submit" size={globalSize}>
+                                  Lưu thay đổi
+                                </Button>
+                              </DialogFooter>
+                              <DialogClose
+                                render={
+                                  <Button
+                                    variant="ghost"
+                                    className="absolute top-2 right-2"
+                                    size="sm"
+                                    iconOnly
+                                  />
+                                }
+                              >
+                                <XIcon />
+                                <span className="sr-only">Close</span>
+                              </DialogClose>
+                            </DialogContent>
+                          
+                        </Dialog>
+                      </>
+                    } />
       </ExampleGrid>
 
       <ExampleGrid>
-        <ExampleSection
-          label="No Close Button"
-          description="Không render nút XIcon thủ công."
-          codeString={`<Dialog>
+        <ShowcaseExample title="No Close Button" description="Không render nút XIcon thủ công." code={`<Dialog>
     <DialogTrigger
       render={<Button variant="outline">View Terms</Button>}
     />
 
       <DialogContent className={contentClass}>
         <DialogHeader>
-          <DialogTitle>Terms of Service</DialogTitle>
+          <DialogTitle>Điều khoản Dịch vụ</DialogTitle>
           <DialogDescription>
             You must accept the new terms to continue using
             the application.
           </DialogDescription>
         </DialogHeader>
         <p className="text-sm text-muted-foreground">
-          By clicking accept, you agree to our updated Terms
-          of Service and Privacy Policy.
+          Bằng cách chọn chấp nhận, bạn đồng ý với Điều khoản
+          of Dịch vụ và Chính sách bảo mật.
         </p>
         <DialogFooter className="-mx-4 -mb-4 mt-4 rounded-b-xl border-t border-t-border bg-muted/50 p-4">
           <DialogClose
@@ -645,46 +620,44 @@ function DialogMicroShowcase({ globalSize }: { globalSize: Size }) {
         </DialogFooter>
       </DialogContent>
     
-  </Dialog>`}
-        >
-          <Dialog>
-            <DialogTrigger
-              render={
-                <Button variant="outline" size={globalSize}>
-                  View Terms
-                </Button>
-              }
-            />
+  </Dialog>`} preview={
+                      <>
+              <Dialog>
+                          <DialogTrigger
+                            render={
+                              <Button variant="outline" size={globalSize}>
+                                View Terms
+                              </Button>
+                            }
+                          />
 
-              <DialogContent className={contentClass}>
-                <DialogHeader>
-                  <DialogTitle>Terms of Service</DialogTitle>
-                  <DialogDescription>
-                    You must accept the new terms to continue using the
-                    application.
-                  </DialogDescription>
-                </DialogHeader>
-                <p className="text-sm text-muted-foreground">
-                  By clicking accept, you agree to our updated Terms of Service
-                  and Privacy Policy.
-                </p>
-                <DialogFooter className="-mx-4 -mb-4 mt-4 rounded-b-xl border-t border-t-border bg-muted/50 p-4">
-                  <DialogClose
-                    render={<Button variant="outline" size={globalSize} />}
-                  >
-                    Decline
-                  </DialogClose>
-                  <Button size={globalSize}>Accept</Button>
-                </DialogFooter>
-              </DialogContent>
-            
-          </Dialog>
-        </ExampleSection>
+                            <DialogContent className={contentClass}>
+                              <DialogHeader>
+                                <DialogTitle>Điều khoản Dịch vụ</DialogTitle>
+                                <DialogDescription>
+                                  You must accept the new terms to continue using the
+                                  application.
+                                </DialogDescription>
+                              </DialogHeader>
+                              <p className="text-sm text-muted-foreground">
+                                Bằng cách chọn chấp nhận, bạn đồng ý với Điều khoản của Service
+                                and Privacy Policy.
+                              </p>
+                              <DialogFooter className="-mx-4 -mb-4 mt-4 rounded-b-xl border-t border-t-border bg-muted/50 p-4">
+                                <DialogClose
+                                  render={<Button variant="outline" size={globalSize} />}
+                                >
+                                  Decline
+                                </DialogClose>
+                                <Button size={globalSize}>Accept</Button>
+                              </DialogFooter>
+                            </DialogContent>
+                          
+                        </Dialog>
+                      </>
+                    } />
 
-        <ExampleSection
-          label="Large Content Sizing"
-          description="Sử dụng sm:max-w-lg cho nội dung lớn hơn."
-          codeString={`<Dialog>
+        <ShowcaseExample title="Large Content Sizing" description="Sử dụng sm:max-w-lg cho nội dung lớn hơn." code={`<Dialog>
     <DialogTrigger
       render={
         <Button variant="outline">View Report</Button>
@@ -693,9 +666,9 @@ function DialogMicroShowcase({ globalSize }: { globalSize: Size }) {
 
       <DialogContent className={contentClass}>
         <DialogHeader>
-          <DialogTitle>Detailed Report</DialogTitle>
+          <DialogTitle>Báo cáo chi tiết</DialogTitle>
           <DialogDescription>
-            Monthly analytics and performance overview.
+            Phân tích hàng tháng và tổng quan hiệu suất.
           </DialogDescription>
         </DialogHeader>
         <div className="flex h-[200px] items-center justify-center rounded-md border border-border border-dashed bg-muted/20">
@@ -721,56 +694,54 @@ function DialogMicroShowcase({ globalSize }: { globalSize: Size }) {
         </DialogClose>
       </DialogContent>
     
-  </Dialog>`}
-        >
-          <Dialog>
-            <DialogTrigger
-              render={
-                <Button variant="outline" size={globalSize}>
-                  View Report
-                </Button>
-              }
-            />
+  </Dialog>`} preview={
+                      <>
+              <Dialog>
+                          <DialogTrigger
+                            render={
+                              <Button variant="outline" size={globalSize}>
+                                View Report
+                              </Button>
+                            }
+                          />
 
-              <DialogContent className={contentClass}>
-                <DialogHeader>
-                  <DialogTitle>Detailed Report</DialogTitle>
-                  <DialogDescription>
-                    Monthly analytics and performance overview.
-                  </DialogDescription>
-                </DialogHeader>
-                <div className="flex h-[200px] items-center justify-center rounded-md border border-border border-dashed bg-muted/20">
-                  <span className="text-sm text-muted-foreground">
-                    Large Content Area
-                  </span>
-                </div>
-                <DialogFooter className="-mx-4 -mb-4 mt-4 rounded-b-xl border-t border-t-border bg-muted/50 p-4">
-                  <Button size={globalSize}>Download PDF</Button>
-                </DialogFooter>
-                <DialogClose
-                  render={
-                    <Button
-                      variant="ghost"
-                      className="absolute top-2 right-2"
-                      size="sm"
-                      iconOnly
-                    />
-                  }
-                >
-                  <XIcon />
-                  <span className="sr-only">Close</span>
-                </DialogClose>
-              </DialogContent>
-            
-          </Dialog>
-        </ExampleSection>
+                            <DialogContent className={contentClass}>
+                              <DialogHeader>
+                                <DialogTitle>Báo cáo chi tiết</DialogTitle>
+                                <DialogDescription>
+                                  Phân tích hàng tháng và tổng quan hiệu suất.
+                                </DialogDescription>
+                              </DialogHeader>
+                              <div className="flex h-[200px] items-center justify-center rounded-md border border-border border-dashed bg-muted/20">
+                                <span className="text-sm text-muted-foreground">
+                                  Large Content Area
+                                </span>
+                              </div>
+                              <DialogFooter className="-mx-4 -mb-4 mt-4 rounded-b-xl border-t border-t-border bg-muted/50 p-4">
+                                <Button size={globalSize}>Download PDF</Button>
+                              </DialogFooter>
+                              <DialogClose
+                                render={
+                                  <Button
+                                    variant="ghost"
+                                    className="absolute top-2 right-2"
+                                    size="sm"
+                                    iconOnly
+                                  />
+                                }
+                              >
+                                <XIcon />
+                                <span className="sr-only">Close</span>
+                              </DialogClose>
+                            </DialogContent>
+                          
+                        </Dialog>
+                      </>
+                    } />
       </ExampleGrid>
 
       <ExampleGrid>
-        <ExampleSection
-          label="Controlled State"
-          description="Sử dụng open và onOpenChange để quản lý trạng thái đóng mở bằng React state."
-          codeString={`<div className="w-full flex flex-col gap-4 items-center justify-center">
+        <ShowcaseExample title="Controlled State" description="Sử dụng open và onOpenChange để quản lý trạng thái đóng mở bằng React state." code={`<div className="w-full flex flex-col gap-4 items-center justify-center">
     <div className="flex gap-4 items-center">
       <Button
         onClick={() => setControlledOpen(true)}
@@ -823,67 +794,65 @@ function DialogMicroShowcase({ globalSize }: { globalSize: Size }) {
         </DialogContent>
       
     </Dialog>
-  </div>`}
-        >
-          <div className="w-full flex flex-col gap-4 items-center justify-center">
-            <div className="flex gap-4 items-center">
-              <Button
-                onClick={() => setControlledOpen(true)}
-                variant="outline"
-                size={globalSize}
-              >
-                Open Controlled Dialog
-              </Button>
-              <span className="text-sm text-muted-foreground font-mono">
-                State: {controlledOpen ? "true" : "false"}
-              </span>
-            </div>
+  </div>`} preview={
+                      <>
+              <div className="w-full flex flex-col gap-4 items-center justify-center">
+                          <div className="flex gap-4 items-center">
+                            <Button
+                              onClick={() => setControlledOpen(true)}
+                              variant="outline"
+                              size={globalSize}
+                            >
+                              Open Controlled Dialog
+                            </Button>
+                            <span className="text-sm text-muted-foreground font-mono">
+                              State: {controlledOpen ? "true" : "false"}
+                            </span>
+                          </div>
 
-            <Dialog open={controlledOpen} onOpenChange={setControlledOpen}>
-              
-                <DialogContent className={contentClass}>
-                  <DialogHeader>
-                    <DialogTitle>Controlled Dialog</DialogTitle>
-                    <DialogDescription>
-                      Trạng thái của dialog này được quản lý hoàn toàn bởi React
-                      state bên ngoài.
-                    </DialogDescription>
-                  </DialogHeader>
-                  <p className="text-sm text-foreground">
-                    Bạn có thể đóng bằng nút bên dưới hoặc dấu X.
-                  </p>
-                  <DialogFooter className="-mx-4 -mb-4 mt-4 rounded-b-xl border-t border-t-border bg-muted/50 p-4">
-                    <Button
-                      color="primary"
-                      onClick={() => setControlledOpen(false)}
-                      size={globalSize}
-                    >
-                      Close Manually
-                    </Button>
-                  </DialogFooter>
-                  <DialogClose
-                    render={
-                      <Button
-                        variant="ghost"
-                        className="absolute top-2 right-2"
-                        size="sm"
-                        iconOnly
-                      />
-                    }
-                  >
-                    <XIcon />
-                    <span className="sr-only">Close</span>
-                  </DialogClose>
-                </DialogContent>
-              
-            </Dialog>
-          </div>
-        </ExampleSection>
+                          <Dialog open={controlledOpen} onOpenChange={setControlledOpen}>
+                            
+                              <DialogContent className={contentClass}>
+                                <DialogHeader>
+                                  <DialogTitle>Controlled Dialog</DialogTitle>
+                                  <DialogDescription>
+                                    Trạng thái của dialog này được quản lý hoàn toàn bởi React
+                                    state bên ngoài.
+                                  </DialogDescription>
+                                </DialogHeader>
+                                <p className="text-sm text-foreground">
+                                  Bạn có thể đóng bằng nút bên dưới hoặc dấu X.
+                                </p>
+                                <DialogFooter className="-mx-4 -mb-4 mt-4 rounded-b-xl border-t border-t-border bg-muted/50 p-4">
+                                  <Button
+                                    color="primary"
+                                    onClick={() => setControlledOpen(false)}
+                                    size={globalSize}
+                                  >
+                                    Close Manually
+                                  </Button>
+                                </DialogFooter>
+                                <DialogClose
+                                  render={
+                                    <Button
+                                      variant="ghost"
+                                      className="absolute top-2 right-2"
+                                      size="sm"
+                                      iconOnly
+                                    />
+                                  }
+                                >
+                                  <XIcon />
+                                  <span className="sr-only">Close</span>
+                                </DialogClose>
+                              </DialogContent>
+                            
+                          </Dialog>
+                        </div>
+                      </>
+                    } />
 
-        <ExampleSection
-          label="Sticky Footer (Long Content)"
-          description="Ghi đè class của DialogContent thành flex-col để khóa scroll ở phần body."
-          codeString={`<Dialog>
+        <ShowcaseExample title="Sticky Footer (Long Content)" description="Ghi đè class của DialogContent thành flex-col để khóa scroll ở phần body." code={`<Dialog>
     <DialogTrigger
       render={
         <Button variant="outline">View Long Content</Button>
@@ -897,7 +866,7 @@ function DialogMicroShowcase({ globalSize }: { globalSize: Size }) {
         )}
       >
         <DialogHeader className="shrink-0 p-4 pb-0">
-          <DialogTitle>Terms & Conditions</DialogTitle>
+          <DialogTitle>Điều khoản & Điều kiện</DialogTitle>
           <DialogDescription>
             Cuộn xuống dưới cùng để có thể đồng ý với điều
             khoản.
@@ -923,7 +892,7 @@ function DialogMicroShowcase({ globalSize }: { globalSize: Size }) {
           <DialogClose render={<Button variant="ghost" />}>
             Cancel
           </DialogClose>
-          <Button>I Agree</Button>
+          <Button>Tôi đồng ý</Button>
         </DialogFooter>
         <DialogClose
           render={
@@ -940,77 +909,73 @@ function DialogMicroShowcase({ globalSize }: { globalSize: Size }) {
         </DialogClose>
       </DialogContent>
     
-  </Dialog>`}
-        >
-          <Dialog>
-            <DialogTrigger
-              render={
-                <Button variant="outline" size={globalSize}>
-                  View Long Content
-                </Button>
-              }
-            />
+  </Dialog>`} preview={
+                      <>
+              <Dialog>
+                          <DialogTrigger
+                            render={
+                              <Button variant="outline" size={globalSize}>
+                                View Long Content
+                              </Button>
+                            }
+                          />
 
-              <DialogContent
-                className={cn(
-                  contentClass,
-                  "flex flex-col gap-0 p-0 overflow-hidden",
-                )}
-              >
-                <DialogHeader className="shrink-0 p-4 pb-0">
-                  <DialogTitle>Terms & Conditions</DialogTitle>
-                  <DialogDescription>
-                    Cuộn xuống dưới cùng để có thể đồng ý với điều khoản.
-                  </DialogDescription>
-                </DialogHeader>
-                <div className="flex-1 min-h-0 overflow-y-auto p-4">
-                  <div className="flex h-[800px] flex-col items-center justify-between rounded-md border border-border border-dashed bg-muted/20 py-8">
-                    <span className="text-sm font-medium text-muted-foreground">
-                      START OF CONTENT
-                    </span>
-                    <div className="flex flex-col items-center gap-2">
-                      <span className="text-4xl">👇</span>
-                      <span className="text-sm text-muted-foreground">
-                        Keep scrolling
-                      </span>
-                    </div>
-                    <span className="text-sm font-medium text-muted-foreground">
-                      END OF CONTENT
-                    </span>
-                  </div>
-                </div>
-                <DialogFooter className="shrink-0 rounded-b-xl border-t border-t-border bg-muted/50 p-4">
-                  <DialogClose
-                    render={<Button variant="ghost" size={globalSize} />}
-                  >
-                    Cancel
-                  </DialogClose>
-                  <Button size={globalSize}>I Agree</Button>
-                </DialogFooter>
-                <DialogClose
-                  render={
-                    <Button
-                      variant="ghost"
-                      className="absolute top-2 right-2"
-                      size="sm"
-                      iconOnly
-                    />
-                  }
-                >
-                  <XIcon />
-                  <span className="sr-only">Close</span>
-                </DialogClose>
-              </DialogContent>
-            
-          </Dialog>
-        </ExampleSection>
+                            <DialogContent
+                              className={cn(
+                                contentClass,
+                                "flex flex-col gap-0 p-0 overflow-hidden",
+                              )}
+                            >
+                              <DialogHeader className="shrink-0 p-4 pb-0">
+                                <DialogTitle>Điều khoản & Điều kiện</DialogTitle>
+                                <DialogDescription>
+                                  Cuộn xuống dưới cùng để có thể đồng ý với điều khoản.
+                                </DialogDescription>
+                              </DialogHeader>
+                              <div className="flex-1 min-h-0 overflow-y-auto p-4">
+                                <div className="flex h-[800px] flex-col items-center justify-between rounded-md border border-border border-dashed bg-muted/20 py-8">
+                                  <span className="text-sm font-medium text-muted-foreground">
+                                    START OF CONTENT
+                                  </span>
+                                  <div className="flex flex-col items-center gap-2">
+                                    <span className="text-4xl">👇</span>
+                                    <span className="text-sm text-muted-foreground">
+                                      Keep scrolling
+                                    </span>
+                                  </div>
+                                  <span className="text-sm font-medium text-muted-foreground">
+                                    END OF CONTENT
+                                  </span>
+                                </div>
+                              </div>
+                              <DialogFooter className="shrink-0 rounded-b-xl border-t border-t-border bg-muted/50 p-4">
+                                <DialogClose
+                                  render={<Button variant="ghost" size={globalSize} />}
+                                >
+                                  Cancel
+                                </DialogClose>
+                                <Button size={globalSize}>Tôi đồng ý</Button>
+                              </DialogFooter>
+                              <DialogClose
+                                render={
+                                  <Button
+                                    variant="ghost"
+                                    className="absolute top-2 right-2"
+                                    size="sm"
+                                    iconOnly
+                                  />
+                                }
+                              >
+                                <XIcon />
+                                <span className="sr-only">Close</span>
+                              </DialogClose>
+                            </DialogContent>
+                          
+                        </Dialog>
+                      </>
+                    } />
 
-        {/* ── Use Case Comparison ─────────────────────── */}
-        <ExampleSection
-          label="🧭 Use Case Comparison"
-          description="Các kịch bản thực tế giúp bạn quyết định nên dùng Micro hay Macro."
-          fullWidth
-          codeString={`<div className="grid grid-cols-1 gap-6 md:grid-cols-2">
+        <ShowcaseExample title="🧭 So sánh Use Case" description="Các kịch bản thực tế giúp bạn quyết định nên dùng Micro hay Macro." code={`<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">
@@ -1061,77 +1026,67 @@ function DialogMicroShowcase({ globalSize }: { globalSize: Size }) {
         từng phần.
       </p>
     </div>
-  </div>`}
-        >
-          <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">
-                  <CheckCircle2Icon className="size-4" aria-hidden="true" />
-                </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ảnh báo hoặc Form cơ bản
-                  </h3>
-                </div>
-              </div>
-              <p className="text-xs text-muted-foreground leading-relaxed">
-                Khi bạn chỉ cần một tiêu đề, mô tả và vài nút bấm ở footer (hoặc
-                1 form ngắn), Macro giúp bạn không phải khai báo hàng loạt
-                component con.
-              </p>
-            </div>
+  </div>`} preview={
+                      <>
+              <div className="grid grid-cols-1 gap-6 md:grid-cols-2">
+                          <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">
+                                <CheckCircle2Icon className="size-4" aria-hidden="true" />
+                              </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ảnh báo hoặc Form cơ bản
+                                </h3>
+                              </div>
+                            </div>
+                            <p className="text-xs text-muted-foreground leading-relaxed">
+                              Khi bạn chỉ cần một tiêu đề, mô tả và vài nút bấm ở footer (hoặc
+                              1 form ngắn), Macro giúp bạn không phải khai báo hàng loạt
+                              component con.
+                            </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">
-                  <LayersIcon className="size-4" aria-hidden="true" />
-                </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">
-                    Layout tuỳ chỉnh phức tạp
-                  </h3>
-                </div>
-              </div>
-              <p className="text-xs text-muted-foreground leading-relaxed">
-                Khi bạn muốn Header có hình ảnh/icon đặc biệt, bỏ qua Footer
-                chuẩn, hoặc có layout split-pane phức tạp bên trong Dialog.
-                Micro cho phép bạn tự do thay đổi từng phần.
-              </p>
-            </div>
-          </div>
-        </ExampleSection>
+                          <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">
+                                <LayersIcon className="size-4" aria-hidden="true" />
+                              </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">
+                                  Layout tuỳ chỉnh phức tạp
+                                </h3>
+                              </div>
+                            </div>
+                            <p className="text-xs text-muted-foreground leading-relaxed">
+                              Khi bạn muốn Header có hình ảnh/icon đặc biệt, bỏ qua Footer
+                              chuẩn, hoặc có layout split-pane phức tạp bên trong Dialog.
+                              Micro cho phép bạn tự do thay đổi từng phần.
+                            </p>
+                          </div>
+                        </div>
+                      </>
+                    } />
       </ExampleGrid>
     </div>
   );
 }
 
-// ──────────────────────────────────────────────────────────
-// Main Showcase
-// ──────────────────────────────────────────────────────────
 export default function DialogShowcase() {
   const { size: globalSize } = useDevContext();
   return (
     <Showcase
       title="Dialog"
       description="Một cửa sổ phương thức làm gián đoạn người dùng với nội dung quan trọng và mong đợi phản hồi."
-      tabs={[
-        {
-          label: "Micro (Primitive)",
-          content: <DialogMicroShowcase globalSize={globalSize} /> },
-        {
-          label: "Macro (Preset)",
-          content: <DialogMacroShowcase globalSize={globalSize} /> },
-      ]}
-      generalConcept={
+      micro={{ content: <DialogMicroShowcase globalSize={globalSize} /> }}
+      macro={{ content: <DialogMacroShowcase globalSize={globalSize} /> }}
+      guideline={
         <ShowcaseDocs>
           <DocsH3>Cấu trúc và Định tuyến</DocsH3>
           <DocsP>