gladvn 0.2.14

package/src/dev/showcase/badge.tsx

@@ -0,0 +1,227 @@
+import { useDevContext } from "../../dev/components/dev-context";
+import { Badge } from "../../components/micro/badge";
+import {
+  DocsCode,
+  DocsP,
+  ExampleGrid,
+  ExampleSection,
+  Showcase,
+  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();
+  return (
+    <Showcase
+      title="Badge"
+      description="Hiển thị nhãn trạng thái, phân loại hoặc đếm số lượng."
+      generalConcept={
+        <ShowcaseDocs>
+          <DocsP>
+            Dùng để làm nổi bật trạng thái, nhãn phân loại hoặc số lượng. Thường
+            là phần tử không tương tác, nhưng cũng có thể biến thành liên kết
+            bằng cách dùng prop <DocsCode>render</DocsCode>.
+          </DocsP>
+        </ShowcaseDocs>
+      }
+      tabs={[
+        {
+          label: "Micro (Primitive)",
+          content: <BadgeMicroShowcase globalSize={globalSize} />,
+        },
+      ]}
+    />
+  );
+}
+
+function BadgeMicroShowcase({ globalSize }: { globalSize: Size }) {
+  return (
+    <div className="space-y-10 mt-6">
+      {/* ── Variants ── */}
+      <ExampleSection
+        label="Variants"
+        description="Tất cả các kiểu hiển thị hiện có."
+        codeString={`<Badge variant="solid">Solid</Badge>
+<Badge variant="soft">Soft</Badge>
+<Badge variant="outline">Outline</Badge>`}
+      >
+        <Badge variant="solid">Solid</Badge>
+        <Badge variant="soft">Soft</Badge>
+        <Badge variant="outline">Outline</Badge>
+      </ExampleSection>
+
+      {/* ── Colors ── */}
+      <ExampleGrid>
+        <ExampleSection
+          label="Solid Colors"
+          description="Các màu semantic áp dụng cho Badge dạng Solid."
+          codeString={`<Badge color="primary">Primary</Badge>
+<Badge color="secondary">Secondary</Badge>
+<Badge color="destructive">Destructive</Badge>
+<Badge color="warning">Warning</Badge>
+<Badge color="success">Success</Badge>
+<Badge color="info">Info</Badge>
+<Badge color="muted">Muted</Badge>`}
+        >
+          <Badge color="primary">Primary</Badge>
+          <Badge color="secondary">Secondary</Badge>
+          <Badge color="destructive">Destructive</Badge>
+          <Badge color="warning">Warning</Badge>
+          <Badge color="success">Success</Badge>
+          <Badge color="info">Info</Badge>
+          <Badge color="muted">Muted</Badge>
+        </ExampleSection>
+
+        <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>`}
+        >
+          <Badge variant="soft" color="primary">
+            Primary
+          </Badge>
+          <Badge variant="soft" color="secondary">
+            Secondary
+          </Badge>
+          <Badge variant="soft" color="destructive">
+            Destructive
+          </Badge>
+          <Badge variant="soft" color="warning">
+            Warning
+          </Badge>
+          <Badge variant="soft" color="success">
+            Success
+          </Badge>
+          <Badge variant="soft" color="info">
+            Info
+          </Badge>
+          <Badge variant="soft" color="muted">
+            Muted
+          </Badge>
+        </ExampleSection>
+      </ExampleGrid>
+
+      {/* ── With Icons ── */}
+      <ExampleSection
+        label="With Icons"
+        description="Badge kèm icon để bổ sung ngữ cảnh."
+        codeString={`<Badge color="success">
+  <CheckIcon className="size-3.5" />
+  Approved
+</Badge>
+
+<Badge color="destructive">
+  <XIcon className="size-3.5" />
+  Rejected
+</Badge>
+
+<Badge color="warning" variant="soft">
+  <AlertTriangleIcon className="size-3.5" />
+  Pending
+</Badge>
+
+<Badge color="info" variant="outline">
+  <InfoIcon className="size-3.5" />
+  Draft
+</Badge>`}
+      >
+        <Badge color="success">
+          <CheckIcon className="size-3.5" />
+          Approved
+        </Badge>
+        <Badge color="destructive">
+          <XIcon className="size-3.5" />
+          Rejected
+        </Badge>
+        <Badge color="warning" variant="soft">
+          <AlertTriangleIcon className="size-3.5" />
+          Pending
+        </Badge>
+        <Badge color="info" variant="outline">
+          <InfoIcon className="size-3.5" />
+          Draft
+        </Badge>
+      </ExampleSection>
+
+      {/* ── Real-world Use Cases ── */}
+      <ExampleGrid>
+        <ExampleSection
+          label="Status Indicators"
+          description="Dùng để hiển thị trạng thái."
+          codeString={`<Badge color="success" variant="soft">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
+          </Badge>
+          <Badge color="secondary" variant="soft">
+            Inactive
+          </Badge>
+          <Badge color="destructive" variant="soft">
+            Expired
+          </Badge>
+          <Badge color="muted" variant="outline">
+            Archived
+          </Badge>
+        </ExampleSection>
+        <ExampleSection
+          label="Tags & Categories"
+          description="Dùng để hiển thị danh mục."
+          codeString={`<Badge variant="outline" color="primary">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
+          </Badge>
+          <Badge variant="outline" color="secondary">
+            TypeScript
+          </Badge>
+          <Badge variant="outline" color="info">
+            Tailwind
+          </Badge>
+          <Badge variant="outline" color="warning">
+            Vite
+          </Badge>
+        </ExampleSection>
+      </ExampleGrid>
+
+      {/* ── As Link ── */}
+      <ExampleSection
+        label="As Link"
+        description="Badge render dưới dạng thẻ a nhờ prop render."
+        codeString={`<Badge render={<a href="#" />}>
+  Clickable Badge
+</Badge>
+
+<Badge color="secondary" render={<a href="#" />}>
+  Secondary Link
+</Badge>
+
+<Badge variant="outline" render={<a href="#" />}>
+  Outline Link
+</Badge>`}
+      >
+        <Badge render={<a href="#" />}>Clickable Badge</Badge>
+        <Badge color="secondary" render={<a href="#" />}>
+          Secondary Link
+        </Badge>
+        <Badge variant="outline" render={<a href="#" />}>
+          Outline Link
+        </Badge>
+      </ExampleSection>
+    </div>
+  );
+}

package/src/dev/showcase/breadcrumb.tsx

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