gladvn 0.2.17 → 0.2.18

package/src/dev/showcase/avatar.tsx

@@ -1,18 +1,9 @@
-import { useDevContext } from "../../dev/components/dev-context";
-import {
-  DocsP,
-  ExampleGrid,
-  ExampleSection,
-  Showcase,
-  ShowcaseDocs,
-} from "../../dev/components/showcase";
 import {
   CheckCircle2Icon,
   CheckIcon,
   LayersIcon,
   UserIcon,
 } from "lucide-react";
-import { useState } from "react";
 
 import { AvatarPreset } from "../../components/macro/avatar-preset";
 import {
@@ -23,6 +14,14 @@ import {
   AvatarGroupCount,
   AvatarImage,
 } from "../../components/micro/avatar";
+import { useDevContext } from "../../dev/components/dev-context";
+import {
+  DocsP,
+  ExampleGrid,
+  ExampleSection,
+  Showcase,
+  ShowcaseDocs,
+} from "../../dev/components/showcase";
 import { type Size } from "../../lib/types";
 
 // ──────────────────────────────────────────────────────────
@@ -36,11 +35,13 @@ function AvatarMacroShowcase({ globalSize }: { globalSize: Size }) {
           label="Tiêu chuẩn (Standard)"
           description="Avatar tự động fallback dựa vào tên truyền vào alt."
           codeString={`<div className="flex items-center gap-4">
-  <AvatarPreset src="https://github.com/shadcn.png" alt="Shadcn" />
-  <AvatarPreset alt="John Doe" />
-  <AvatarPreset />
-</div>
-`}
+    <AvatarPreset
+      src="https://github.com/shadcn.png"
+      alt="Shadcn"
+    />
+    <AvatarPreset alt="John Doe" />
+    <AvatarPreset />
+  </div>`}
         >
           <div className="flex items-center gap-4">
             <AvatarPreset
@@ -57,11 +58,14 @@ function AvatarMacroShowcase({ globalSize }: { globalSize: Size }) {
           label="Trạng thái (Status)"
           description="Hỗ trợ sẵn các trạng thái: online, offline, away."
           codeString={`<div className="flex items-center gap-4">
-  <AvatarPreset src="https://github.com/shadcn.png" alt="Shadcn" status="online" />
-  <AvatarPreset alt="Alice" status="away" />
-  <AvatarPreset status="offline" />
-</div>
-`}
+    <AvatarPreset
+      src="https://github.com/shadcn.png"
+      alt="Shadcn"
+      status="online"
+    />
+    <AvatarPreset alt="Alice" status="away" />
+    <AvatarPreset status="offline" />
+  </div>`}
         >
           <div className="flex items-center gap-4">
             <AvatarPreset
@@ -81,11 +85,14 @@ function AvatarMacroShowcase({ globalSize }: { globalSize: Size }) {
         description="Kết hợp Preset với AvatarGroup để tiết kiệm code."
         fullWidth
         codeString={`<AvatarGroup>
-  <AvatarPreset src="https://github.com/shadcn.png" alt="Shadcn" />
-  <AvatarPreset alt="Alice Smith" />
-  <AvatarPreset alt="Bob Jones" />
-  <AvatarGroupCount>+3</AvatarGroupCount>
-</AvatarGroup>`}
+    <AvatarPreset
+      src="https://github.com/shadcn.png"
+      alt="Shadcn"
+    />
+    <AvatarPreset alt="Alice Smith" />
+    <AvatarPreset alt="Bob Jones" />
+    <AvatarGroupCount>+3</AvatarGroupCount>
+  </AvatarGroup>`}
       >
         <div className="flex flex-col gap-4">
           <AvatarGroup>
@@ -115,20 +122,28 @@ function AvatarMicroShowcase({ globalSize }: { globalSize: Size }) {
           label="Với Hình ảnh (With Image)"
           description="Hiển thị ảnh và sẽ fallback về chữ nếu ảnh lỗi."
           codeString={`<div className="flex items-center gap-4">
-  <Avatar>
-    <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
-    <AvatarFallback>CN</AvatarFallback>
-  </Avatar>
-  <Avatar>
-    <AvatarImage src="https://github.com/vercel.png" alt="@vercel" />
-    <AvatarFallback>VC</AvatarFallback>
-  </Avatar>
-  <Avatar>
-    <AvatarImage src="https://github.com/leerob.png" alt="@leerob" />
-    <AvatarFallback>LR</AvatarFallback>
-  </Avatar>
-</div>
-`}
+    <Avatar>
+      <AvatarImage
+        src="https://github.com/shadcn.png"
+        alt="@shadcn"
+      />
+      <AvatarFallback>CN</AvatarFallback>
+    </Avatar>
+    <Avatar>
+      <AvatarImage
+        src="https://github.com/vercel.png"
+        alt="@vercel"
+      />
+      <AvatarFallback>VC</AvatarFallback>
+    </Avatar>
+    <Avatar>
+      <AvatarImage
+        src="https://github.com/leerob.png"
+        alt="@leerob"
+      />
+      <AvatarFallback>LR</AvatarFallback>
+    </Avatar>
+  </div>`}
         >
           <div className="flex items-center gap-4">
             <Avatar size={globalSize}>
@@ -150,20 +165,36 @@ function AvatarMicroShowcase({ globalSize }: { globalSize: Size }) {
           label="Lỗi Ảnh & Chỉ có Fallback"
           description="Khi không có ảnh hoặc ảnh lỗi, fallback sẽ hiển thị."
           codeString={`<div className="flex items-center gap-4">
-  <Avatar>
-    <AvatarImage src="https://broken-url.invalid/avatar.png" alt="broken" />
-    <AvatarFallback>BR</AvatarFallback>
-  </Avatar>
-  <Avatar>
-    <AvatarFallback>JD</AvatarFallback>
-  </Avatar>
-  <Avatar>
-    <AvatarFallback>
-      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="size-4"><path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
-    </AvatarFallback>
-  </Avatar>
-</div>
-`}
+    <Avatar>
+      <AvatarImage
+        src="https://broken-url.invalid/avatar.png"
+        alt="broken"
+      />
+      <AvatarFallback>BR</AvatarFallback>
+    </Avatar>
+    <Avatar>
+      <AvatarFallback>JD</AvatarFallback>
+    </Avatar>
+    <Avatar>
+      <AvatarFallback>
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="24"
+          height="24"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="2"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          className="size-4"
+        >
+          <path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2" />
+          <circle cx="12" cy="7" r="4" />
+        </svg>
+      </AvatarFallback>
+    </Avatar>
+  </div>`}
         >
           <div className="flex items-center gap-4">
             <Avatar size={globalSize}>
@@ -203,24 +234,33 @@ function AvatarMicroShowcase({ globalSize }: { globalSize: Size }) {
         label="Huy hiệu (With Badge)"
         description="Bạn có thể tự định vị Badge ở bất cứ đâu trên Avatar."
         codeString={`<div className="flex items-center gap-6">
-  <div className="flex flex-col items-center gap-2">
-    <Avatar>
-      <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
-      <AvatarFallback>CN</AvatarFallback>
-      <AvatarBadge className="absolute z-10 right-0 bottom-0 bg-green-500" />
-    </Avatar>
-    <span className="text-xs text-muted-foreground">Online</span>
-  </div>
-  <div className="flex flex-col items-center gap-2">
-    <Avatar>
-      <AvatarImage src="https://github.com/vercel.png" alt="@vercel" />
-      <AvatarFallback>VC</AvatarFallback>
-      <AvatarBadge className="absolute z-10 right-0 top-0 bg-red-500" />
-    </Avatar>
-    <span className="text-xs text-muted-foreground">Notification</span>
-  </div>
-</div>
-`}
+    <div className="flex flex-col items-center gap-2">
+      <Avatar>
+        <AvatarImage
+          src="https://github.com/shadcn.png"
+          alt="@shadcn"
+        />
+        <AvatarFallback>CN</AvatarFallback>
+        <AvatarBadge className="absolute z-10 right-0 bottom-0 bg-green-500" />
+      </Avatar>
+      <span className="text-xs text-muted-foreground">
+        Online
+      </span>
+    </div>
+    <div className="flex flex-col items-center gap-2">
+      <Avatar>
+        <AvatarImage
+          src="https://github.com/vercel.png"
+          alt="@vercel"
+        />
+        <AvatarFallback>VC</AvatarFallback>
+        <AvatarBadge className="absolute z-10 right-0 top-0 bg-red-500" />
+      </Avatar>
+      <span className="text-xs text-muted-foreground">
+        Notification
+      </span>
+    </div>
+  </div>`}
       >
         <div className="flex items-center gap-6">
           <div className="flex flex-col items-center gap-2">
@@ -247,20 +287,28 @@ function AvatarMicroShowcase({ globalSize }: { globalSize: Size }) {
           label="Nhóm cơ bản (Basic Group)"
           description="Xếp chồng nhiều avatar lên nhau."
           codeString={`<AvatarGroup>
-  <Avatar>
-    <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
-    <AvatarFallback>CN</AvatarFallback>
-  </Avatar>
-  <Avatar>
-    <AvatarImage src="https://github.com/vercel.png" alt="@vercel" />
-    <AvatarFallback>VC</AvatarFallback>
-  </Avatar>
-  <Avatar>
-    <AvatarImage src="https://github.com/leerob.png" alt="@leerob" />
-    <AvatarFallback>LR</AvatarFallback>
-  </Avatar>
-</AvatarGroup>
-`}
+    <Avatar>
+      <AvatarImage
+        src="https://github.com/shadcn.png"
+        alt="@shadcn"
+      />
+      <AvatarFallback>CN</AvatarFallback>
+    </Avatar>
+    <Avatar>
+      <AvatarImage
+        src="https://github.com/vercel.png"
+        alt="@vercel"
+      />
+      <AvatarFallback>VC</AvatarFallback>
+    </Avatar>
+    <Avatar>
+      <AvatarImage
+        src="https://github.com/leerob.png"
+        alt="@leerob"
+      />
+      <AvatarFallback>LR</AvatarFallback>
+    </Avatar>
+  </AvatarGroup>`}
         >
           <AvatarGroup>
             <Avatar size={globalSize}>
@@ -282,17 +330,22 @@ function AvatarMicroShowcase({ globalSize }: { globalSize: Size }) {
           label="Kèm bộ đếm (With Count)"
           description="Hiển thị những avatar còn lại bị ẩn."
           codeString={`<AvatarGroup>
-  <Avatar>
-    <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
-    <AvatarFallback>CN</AvatarFallback>
-  </Avatar>
-  <Avatar>
-    <AvatarImage src="https://github.com/vercel.png" alt="@vercel" />
-    <AvatarFallback>VC</AvatarFallback>
-  </Avatar>
-  <AvatarGroupCount>+12</AvatarGroupCount>
-</AvatarGroup>
-`}
+    <Avatar>
+      <AvatarImage
+        src="https://github.com/shadcn.png"
+        alt="@shadcn"
+      />
+      <AvatarFallback>CN</AvatarFallback>
+    </Avatar>
+    <Avatar>
+      <AvatarImage
+        src="https://github.com/vercel.png"
+        alt="@vercel"
+      />
+      <AvatarFallback>VC</AvatarFallback>
+    </Avatar>
+    <AvatarGroupCount>+12</AvatarGroupCount>
+  </AvatarGroup>`}
         >
           <AvatarGroup>
             <Avatar size={globalSize}>
@@ -313,60 +366,77 @@ function AvatarMicroShowcase({ globalSize }: { globalSize: Size }) {
           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">
-  {/* ── 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">
-          Hiển thị Avatar chuẩn với URL và Fallback
-        </h3>
+    {/* ── 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">
+            Hiển thị Avatar chuẩn với URL và Fallback
+          </h3>
+        </div>
+      </div>
+      <p className="text-xs text-muted-foreground leading-relaxed">
+        Hầu hết các trường hợp bạn chỉ có một URL hình ảnh
+        và một cái tên. Macro tự động hiển thị ảnh, nếu ảnh
+        lỗi thì tự sinh chữ viết tắt dựa trên tên cực kỳ
+        tiện lợi mà không cần viết nhiều code.
+      </p>
+      <div className="rounded-lg bg-muted/50 p-3 flex justify-center">
+        <AvatarPreset
+          src="https://github.com/shadcn.png"
+          alt="Shadcn"
+          size="lg"
+        />
       </div>
     </div>
-    <p className="text-xs text-muted-foreground leading-relaxed">
-      Hầu hết các trường hợp bạn chỉ có một URL hình ảnh và một cái tên. Macro tự động hiển thị ảnh, nếu ảnh lỗi thì tự sinh chữ viết tắt dựa trên tên cực kỳ tiện lợi mà không cần viết nhiều code.
-    </p>
-    <div className="rounded-lg bg-muted/50 p-3 flex justify-center">
-      <AvatarPreset src="https://github.com/shadcn.png" alt="Shadcn" size="lg" />
-    </div>
-  </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 Fallback phức tạp hoặc tích hợp Badge đặc thù
-        </h3>
+    {/* ── 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 Fallback phức tạp hoặc tích hợp Badge đặc
+            thù
+          </h3>
+        </div>
+      </div>
+      <p className="text-xs text-muted-foreground leading-relaxed">
+        Khi bạn muốn Fallback là một Icon thay vì Text, hoặc
+        muốn đính kèm một Badge tùy chỉnh hoàn toàn tự do
+        (như icon viền, thông báo tin nhắn), bạn phải dùng
+        Primitive để lắp ghép.
+      </p>
+      <div className="rounded-lg bg-muted/50 p-3 flex justify-center">
+        <Avatar size="lg">
+          <AvatarImage src="/broken.png" alt="Avatar" />
+          <AvatarFallback>
+            <UserIcon className="size-1/2 text-muted-foreground" />
+          </AvatarFallback>
+          <AvatarBadge className="bg-blue-500">
+            <CheckIcon className="size-2 text-white" />
+          </AvatarBadge>
+        </Avatar>
       </div>
     </div>
-    <p className="text-xs text-muted-foreground leading-relaxed">
-      Khi bạn muốn Fallback là một Icon thay vì Text, hoặc muốn đính kèm một Badge tùy chỉnh hoàn toàn tự do (như icon viền, thông báo tin nhắn), bạn phải dùng Primitive để lắp ghép.
-    </p>
-    <div className="rounded-lg bg-muted/50 p-3 flex justify-center">
-      <Avatar size="lg">
-        <AvatarImage src="/broken.png" alt="Avatar" />
-        <AvatarFallback>
-          <UserIcon className="size-1/2 text-muted-foreground" />
-        </AvatarFallback>
-        <AvatarBadge className="bg-blue-500">
-          <CheckIcon className="size-2 text-white" />
-        </AvatarBadge>
-      </Avatar>
-    </div>
-  </div>
-</div>`}
+  </div>`}
         >
           <div className="grid grid-cols-1 gap-6 md:grid-cols-2">
             {/* ── Story 1: Macro wins ── */}
@@ -451,7 +521,8 @@ export default function AvatarShowcase() {
         <ShowcaseDocs>
           <DocsP>
             Dùng để hiển thị hình ảnh đại diện cho người dùng, nhóm hoặc tổ
-            chức. Hỗ trợ tự động hiển thị chữ cái viết tắt hoặc icon mặc định khi không tải được ảnh.
+            chức. Hỗ trợ tự động hiển thị chữ cái viết tắt hoặc icon mặc định
+            khi không tải được ảnh.
           </DocsP>
         </ShowcaseDocs>
       }

package/src/dev/showcase/badge.tsx

@@ -1,5 +1,7 @@
-import { useDevContext } from "../../dev/components/dev-context";
+import { AlertTriangleIcon, CheckIcon, InfoIcon, XIcon } from "lucide-react";
+
 import { Badge } from "../../components/micro/badge";
+import { useDevContext } from "../../dev/components/dev-context";
 import {
   DocsCode,
   DocsP,
@@ -9,8 +11,6 @@ import {
   ShowcaseDocs,
 } from "../../dev/components/showcase";
 import { type Size } from "../../lib/types";
-import { AlertTriangleIcon, CheckIcon, InfoIcon, XIcon } from "lucide-react";
-import { useState } from "react";
 
 export default function BadgeShowcase() {
   const { size: globalSize } = useDevContext();
@@ -45,8 +45,8 @@ function BadgeMicroShowcase({ globalSize }: { globalSize: Size }) {
         label="Variants"
         description="Tất cả các kiểu hiển thị hiện có."
         codeString={`<Badge variant="solid">Solid</Badge>
-<Badge variant="soft">Soft</Badge>
-<Badge variant="outline">Outline</Badge>`}
+  <Badge variant="soft">Soft</Badge>
+  <Badge variant="outline">Outline</Badge>`}
       >
         <Badge variant="solid">Solid</Badge>
         <Badge variant="soft">Soft</Badge>
@@ -59,12 +59,12 @@ function BadgeMicroShowcase({ globalSize }: { globalSize: Size }) {
           label="Solid Colors"
           description="Các màu semantic áp dụng cho Badge dạng Solid."
           codeString={`<Badge color="primary">Primary</Badge>
-<Badge color="secondary">Secondary</Badge>
-<Badge color="destructive">Destructive</Badge>
-<Badge color="warning">Warning</Badge>
-<Badge color="success">Success</Badge>
-<Badge color="info">Info</Badge>
-<Badge color="muted">Muted</Badge>`}
+  <Badge color="secondary">Secondary</Badge>
+  <Badge color="destructive">Destructive</Badge>
+  <Badge color="warning">Warning</Badge>
+  <Badge color="success">Success</Badge>
+  <Badge color="info">Info</Badge>
+  <Badge color="muted">Muted</Badge>`}
         >
           <Badge color="primary">Primary</Badge>
           <Badge color="secondary">Secondary</Badge>
@@ -78,13 +78,27 @@ function BadgeMicroShowcase({ globalSize }: { globalSize: Size }) {
         <ExampleSection
           label="Soft Colors"
           description="Các màu semantic áp dụng cho Badge dạng Soft."
-          codeString={`<Badge variant="soft" color="primary">Primary</Badge>
-<Badge variant="soft" color="secondary">Secondary</Badge>
-<Badge variant="soft" color="destructive">Destructive</Badge>
-<Badge variant="soft" color="warning">Warning</Badge>
-<Badge variant="soft" color="success">Success</Badge>
-<Badge variant="soft" color="info">Info</Badge>
-<Badge variant="soft" color="muted">Muted</Badge>`}
+          codeString={`<Badge variant="soft" color="primary">
+    Primary
+  </Badge>
+  <Badge variant="soft" color="secondary">
+    Secondary
+  </Badge>
+  <Badge variant="soft" color="destructive">
+    Destructive
+  </Badge>
+  <Badge variant="soft" color="warning">
+    Warning
+  </Badge>
+  <Badge variant="soft" color="success">
+    Success
+  </Badge>
+  <Badge variant="soft" color="info">
+    Info
+  </Badge>
+  <Badge variant="soft" color="muted">
+    Muted
+  </Badge>`}
         >
           <Badge variant="soft" color="primary">
             Primary
@@ -115,24 +129,24 @@ function BadgeMicroShowcase({ globalSize }: { globalSize: Size }) {
         label="With Icons"
         description="Badge kèm icon để bổ sung ngữ cảnh."
         codeString={`<Badge color="success">
-  <CheckIcon className="size-3.5" />
-  Approved
-</Badge>
+    <CheckIcon className="size-3.5" />
+    Approved
+  </Badge>
 
-<Badge color="destructive">
-  <XIcon className="size-3.5" />
-  Rejected
-</Badge>
+  <Badge color="destructive">
+    <XIcon className="size-3.5" />
+    Rejected
+  </Badge>
 
-<Badge color="warning" variant="soft">
-  <AlertTriangleIcon className="size-3.5" />
-  Pending
-</Badge>
+  <Badge color="warning" variant="soft">
+    <AlertTriangleIcon className="size-3.5" />
+    Pending
+  </Badge>
 
-<Badge color="info" variant="outline">
-  <InfoIcon className="size-3.5" />
-  Draft
-</Badge>`}
+  <Badge color="info" variant="outline">
+    <InfoIcon className="size-3.5" />
+    Draft
+  </Badge>`}
       >
         <Badge color="success">
           <CheckIcon className="size-3.5" />
@@ -157,10 +171,18 @@ function BadgeMicroShowcase({ globalSize }: { globalSize: Size }) {
         <ExampleSection
           label="Status Indicators"
           description="Dùng để hiển thị trạng thái."
-          codeString={`<Badge color="success" variant="soft">Active</Badge>
-<Badge color="secondary" variant="soft">Inactive</Badge>
-<Badge color="destructive" variant="soft">Expired</Badge>
-<Badge color="muted" variant="outline">Archived</Badge>`}
+          codeString={`<Badge color="success" variant="soft">
+    Active
+  </Badge>
+  <Badge color="secondary" variant="soft">
+    Inactive
+  </Badge>
+  <Badge color="destructive" variant="soft">
+    Expired
+  </Badge>
+  <Badge color="muted" variant="outline">
+    Archived
+  </Badge>`}
         >
           <Badge color="success" variant="soft">
             Active
@@ -178,10 +200,18 @@ function BadgeMicroShowcase({ globalSize }: { globalSize: Size }) {
         <ExampleSection
           label="Tags & Categories"
           description="Dùng để hiển thị danh mục."
-          codeString={`<Badge variant="outline" color="primary">React</Badge>
-<Badge variant="outline" color="secondary">TypeScript</Badge>
-<Badge variant="outline" color="info">Tailwind</Badge>
-<Badge variant="outline" color="warning">Vite</Badge>`}
+          codeString={`<Badge variant="outline" color="primary">
+    React
+  </Badge>
+  <Badge variant="outline" color="secondary">
+    TypeScript
+  </Badge>
+  <Badge variant="outline" color="info">
+    Tailwind
+  </Badge>
+  <Badge variant="outline" color="warning">
+    Vite
+  </Badge>`}
         >
           <Badge variant="outline" color="primary">
             React
@@ -202,17 +232,15 @@ function BadgeMicroShowcase({ globalSize }: { globalSize: Size }) {
       <ExampleSection
         label="As Link"
         description="Badge render dưới dạng thẻ a nhờ prop render."
-        codeString={`<Badge render={<a href="#" />}>
-  Clickable Badge
-</Badge>
+        codeString={`<Badge render={<a href="#" />}>Clickable Badge</Badge>
 
-<Badge color="secondary" render={<a href="#" />}>
-  Secondary Link
-</Badge>
+  <Badge color="secondary" render={<a href="#" />}>
+    Secondary Link
+  </Badge>
 
-<Badge variant="outline" render={<a href="#" />}>
-  Outline Link
-</Badge>`}
+  <Badge variant="outline" render={<a href="#" />}>
+    Outline Link
+  </Badge>`}
       >
         <Badge render={<a href="#" />}>Clickable Badge</Badge>
         <Badge color="secondary" render={<a href="#" />}>