gladvn 0.2.16 → 0.2.18

package/src/dev/showcase/combobox.tsx

@@ -1,19 +1,7 @@
-import { useDevContext } from "../../dev/components/dev-context";
 import { zodResolver } from "@hookform/resolvers/zod";
-import { useState } from "react";
 import { Controller, useForm } from "react-hook-form";
 import * as z from "zod";
 
-import {
-  DocsCode,
-  DocsP,
-  ExampleGrid,
-  ExampleSection,
-  Showcase,
-  ShowcaseDocs,
-} from "../../dev/components/showcase";
-import { type Size } from "../../lib/types";
-
 import { ComboboxPreset } from "../../components/macro/combobox-preset";
 import { Button } from "../../components/micro/button";
 import {
@@ -47,6 +35,16 @@ import {
   InputGroupAddon,
   InputGroupInput,
 } from "../../components/micro/input-group";
+import { useDevContext } from "../../dev/components/dev-context";
+import {
+  DocsCode,
+  DocsP,
+  ExampleGrid,
+  ExampleSection,
+  Showcase,
+  ShowcaseDocs,
+} from "../../dev/components/showcase";
+import { type Size } from "../../lib/types";
 
 const frontendFrameworks = ["react", "vue", "svelte"];
 const backendFrameworks = ["express", "nest"];
@@ -148,7 +146,8 @@ function ComboboxMacroShowcase({ globalSize }: { globalSize: Size }) {
         <ExampleSection
           label="Tiêu chuẩn"
           description="Tương tự Select nhưng có thể gõ để tìm kiếm."
-          codeString={`<ComboboxPreset className="w-full"
+          codeString={`<ComboboxPreset
+    className="w-full"
     label="Framework"
     description="Hỗ trợ hàng ngàn bản ghi mà không lag."
     placeholder="Chọn framework..."
@@ -160,8 +159,7 @@ function ComboboxMacroShowcase({ globalSize }: { globalSize: Size }) {
       { value: "angular", label: "Angular" },
       { value: "svelte", label: "Svelte" },
     ]}
-  />
-`}
+  />`}
         >
           <ComboboxPreset
             className="w-full"
@@ -184,14 +182,15 @@ function ComboboxMacroShowcase({ globalSize }: { globalSize: Size }) {
           label="Trạng thái Lỗi (Error)"
           description="Báo lỗi khi bỏ trống form."
           codeString={`<div className="w-full flex flex-col gap-6">
-  <ComboboxPreset
-    label="Khu vực (Lỗi)"
-    placeholder="Chọn khu vực..."
-    options={[{ value: "ap", label: "Châu Á Thái Bình Dương" }]}
-    errorMessage="Khu vực là bắt buộc."
-  />
-</div>
-`}
+    <ComboboxPreset
+      label="Khu vực (Lỗi)"
+      placeholder="Chọn khu vực..."
+      options={[
+        { value: "ap", label: "Châu Á Thái Bình Dương" },
+      ]}
+      errorMessage="Khu vực là bắt buộc."
+    />
+  </div>`}
         >
           <div className="w-full flex flex-col gap-6">
             <ComboboxPreset
@@ -209,7 +208,8 @@ function ComboboxMacroShowcase({ globalSize }: { globalSize: Size }) {
         <ExampleSection
           label="Khóa / Bất hoạt (Disabled)"
           description="Người dùng không thể click hay gõ vào ô."
-          codeString={`<ComboboxPreset className="w-full"
+          codeString={`<ComboboxPreset
+    className="w-full"
     label="Đội nhóm (Team)"
     description="Bạn không có quyền thay đổi đội trong dự án này."
     placeholder="Chọn đội..."
@@ -219,8 +219,7 @@ function ComboboxMacroShowcase({ globalSize }: { globalSize: Size }) {
     ]}
     value="engineering"
     disabled
-  />
-`}
+  />`}
         >
           <ComboboxPreset
             className="w-full"
@@ -240,18 +239,18 @@ function ComboboxMacroShowcase({ globalSize }: { globalSize: Size }) {
         <ExampleSection
           label="Cuộn danh sách dài (Long List)"
           description="Trải nghiệm mượt mà với danh sách ảo hoá."
-          codeString={`<ComboboxPreset className="w-full"
-   
+          codeString={`<ComboboxPreset
+    className="w-full"
+
     label="Múi giờ (Timezone)"
     placeholder="Chọn múi giờ..."
     searchPlaceholder="Tìm kiếm múi giờ..."
     emptyText="Không tìm thấy múi giờ."
     options={Array.from({ length: 50 }).map((_, i) => ({
       value: \`utc\${i - 12}\`,
-      label: \`UTC \${i - 12 > 0 ? '+' : ''}\${i - 12}:00\`,
+      label: \`UTC \${i - 12 > 0 ? "+" : ""}\${i - 12}:00\`,
     }))}
-  />
-`}
+  />`}
         >
           <ComboboxPreset
             className="w-full"
@@ -292,42 +291,51 @@ function ComboboxMicroShowcase({ globalSize }: { globalSize: Size }) {
           label="Cơ bản & Phân nhóm"
           description="Sử dụng InputGroup, ComboboxAnchor, ComboboxGroup."
           codeString={`<Field className="w-full">
-  <FieldLabel>Tìm kiếm Framework</FieldLabel>
-  <FieldContent>
-    <Combobox items={allFrameworks}>
-      <ComboboxAnchor className="w-full">
-        <InputGroup className="w-full">
-          <ComboboxInput
-            placeholder="Tìm framework..."
-            render={<InputGroupInput />}
-          />
-          <InputGroupAddon align="end">
-            <ComboboxTrigger className="flex h-full cursor-default items-center justify-center px-2.5 outline-none group-has-data-[slot=combobox-clear]/input-group:hidden disabled:cursor-not-allowed disabled:opacity-50" />
-            <ComboboxClear />
-          </InputGroupAddon>
-        </InputGroup>
-      </ComboboxAnchor>
-      <ComboboxPortal><ComboboxContent>
-        <ComboboxEmpty>Không tìm thấy.</ComboboxEmpty>
-        <ComboboxList>
-          <ComboboxGroup>
-            <ComboboxLabel>Frontend</ComboboxLabel>
-            <ComboboxItem value="react">React</ComboboxItem>
-            <ComboboxItem value="vue">Vue</ComboboxItem>
-            <ComboboxItem value="svelte">Svelte</ComboboxItem>
-          </ComboboxGroup>
-          <ComboboxSeparator />
-          <ComboboxGroup>
-            <ComboboxLabel>Backend</ComboboxLabel>
-            <ComboboxItem value="express">Express</ComboboxItem>
-            <ComboboxItem value="nest">NestJS</ComboboxItem>
-          </ComboboxGroup>
-        </ComboboxList>
-      </ComboboxContent></ComboboxPortal>
-    </Combobox>
-  </FieldContent>
-</Field>
-`}
+    <FieldLabel>Tìm kiếm Framework</FieldLabel>
+    <FieldContent>
+      <Combobox items={allFrameworks}>
+        <ComboboxAnchor className="w-full">
+          <InputGroup className="w-full">
+            <ComboboxInput
+              placeholder="Tìm framework..."
+              render={<InputGroupInput />}
+            />
+            <InputGroupAddon align="end">
+              <ComboboxTrigger className="flex h-full cursor-default items-center justify-center px-2.5 outline-none group-has-data-[slot=combobox-clear]/input-group:hidden disabled:cursor-not-allowed disabled:opacity-50" />
+              <ComboboxClear />
+            </InputGroupAddon>
+          </InputGroup>
+        </ComboboxAnchor>
+        <ComboboxPortal>
+          <ComboboxContent>
+            <ComboboxEmpty>Không tìm thấy.</ComboboxEmpty>
+            <ComboboxList>
+              <ComboboxGroup>
+                <ComboboxLabel>Frontend</ComboboxLabel>
+                <ComboboxItem value="react">
+                  React
+                </ComboboxItem>
+                <ComboboxItem value="vue">Vue</ComboboxItem>
+                <ComboboxItem value="svelte">
+                  Svelte
+                </ComboboxItem>
+              </ComboboxGroup>
+              <ComboboxSeparator />
+              <ComboboxGroup>
+                <ComboboxLabel>Backend</ComboboxLabel>
+                <ComboboxItem value="express">
+                  Express
+                </ComboboxItem>
+                <ComboboxItem value="nest">
+                  NestJS
+                </ComboboxItem>
+              </ComboboxGroup>
+            </ComboboxList>
+          </ComboboxContent>
+        </ComboboxPortal>
+      </Combobox>
+    </FieldContent>
+  </Field>`}
         >
           <Field size={globalSize} className="w-full">
             <FieldLabel>Tìm kiếm Framework</FieldLabel>
@@ -374,34 +382,43 @@ function ComboboxMicroShowcase({ globalSize }: { globalSize: Size }) {
           label="Chọn nhiều (Multi-select Chips)"
           description="Sử dụng ComboboxChips và ComboboxChip thay cho Input."
           codeString={`<Field className="w-full">
-  <FieldLabel>Gán thẻ (Tags)</FieldLabel>
-  <FieldContent>
-    <Combobox items={tagItems} multiple>
-      <ComboboxChips>
-        <ComboboxChip value="bug">Lỗi (Bug)</ComboboxChip>
-        <ComboboxChip value="feature">
-          Tính năng (Feature)
-        </ComboboxChip>
-        <ComboboxChipsInput placeholder="Thêm thẻ..." />
-      </ComboboxChips>
-      <ComboboxPortal><ComboboxContent>
-        <ComboboxEmpty>Không tìm thấy thẻ.</ComboboxEmpty>
-        <ComboboxList>
-          <ComboboxItem value="bug">Lỗi (Bug)</ComboboxItem>
-          <ComboboxItem value="feature">
+    <FieldLabel>Gán thẻ (Tags)</FieldLabel>
+    <FieldContent>
+      <Combobox items={tagItems} multiple>
+        <ComboboxChips>
+          <ComboboxChip value="bug">Lỗi (Bug)</ComboboxChip>
+          <ComboboxChip value="feature">
             Tính năng (Feature)
-          </ComboboxItem>
-          <ComboboxItem value="enhancement">Cải thiện</ComboboxItem>
-          <ComboboxItem value="docs">Tài liệu</ComboboxItem>
-        </ComboboxList>
-      </ComboboxContent></ComboboxPortal>
-    </Combobox>
-  </FieldContent>
-  <FieldDescription>
-    Bạn có thể chọn nhiều thẻ cùng lúc.
-  </FieldDescription>
-</Field>
-`}
+          </ComboboxChip>
+          <ComboboxChipsInput placeholder="Thêm thẻ..." />
+        </ComboboxChips>
+        <ComboboxPortal>
+          <ComboboxContent>
+            <ComboboxEmpty>
+              Không tìm thấy thẻ.
+            </ComboboxEmpty>
+            <ComboboxList>
+              <ComboboxItem value="bug">
+                Lỗi (Bug)
+              </ComboboxItem>
+              <ComboboxItem value="feature">
+                Tính năng (Feature)
+              </ComboboxItem>
+              <ComboboxItem value="enhancement">
+                Cải thiện
+              </ComboboxItem>
+              <ComboboxItem value="docs">
+                Tài liệu
+              </ComboboxItem>
+            </ComboboxList>
+          </ComboboxContent>
+        </ComboboxPortal>
+      </Combobox>
+    </FieldContent>
+    <FieldDescription>
+      Bạn có thể chọn nhiều thẻ cùng lúc.
+    </FieldDescription>
+  </Field>`}
         >
           <Field size={globalSize} className="w-full">
             <FieldLabel>Gán thẻ (Tags)</FieldLabel>
@@ -442,30 +459,36 @@ function ComboboxMicroShowcase({ globalSize }: { globalSize: Size }) {
           label="Disabled thủ công"
           description="Truyền disabled vào InputGroupInput và ComboboxTrigger."
           codeString={`<Field className="w-full">
-  <FieldLabel>Tìm kiếm (Disabled)</FieldLabel>
-  <FieldContent>
-    <Combobox items={["react"]}>
-      <ComboboxAnchor className="w-full">
-        <InputGroup className="w-full">
-          <ComboboxInput
-            placeholder="Tìm kiếm..."
-            disabled
-            render={<InputGroupInput disabled />}
-          />
-          <InputGroupAddon align="end">
-            <ComboboxTrigger className="flex h-full cursor-default items-center justify-center px-2.5 outline-none group-has-data-[slot=combobox-clear]/input-group:hidden disabled:cursor-not-allowed disabled:opacity-50" disabled />
-          </InputGroupAddon>
-        </InputGroup>
-      </ComboboxAnchor>
-      <ComboboxPortal><ComboboxContent>
-        <ComboboxList>
-          <ComboboxItem value="react">React</ComboboxItem>
-        </ComboboxList>
-      </ComboboxContent></ComboboxPortal>
-    </Combobox>
-  </FieldContent>
-</Field>
-`}
+    <FieldLabel>Tìm kiếm (Disabled)</FieldLabel>
+    <FieldContent>
+      <Combobox items={["react"]}>
+        <ComboboxAnchor className="w-full">
+          <InputGroup className="w-full">
+            <ComboboxInput
+              placeholder="Tìm kiếm..."
+              disabled
+              render={<InputGroupInput disabled />}
+            />
+            <InputGroupAddon align="end">
+              <ComboboxTrigger
+                className="flex h-full cursor-default items-center justify-center px-2.5 outline-none group-has-data-[slot=combobox-clear]/input-group:hidden disabled:cursor-not-allowed disabled:opacity-50"
+                disabled
+              />
+            </InputGroupAddon>
+          </InputGroup>
+        </ComboboxAnchor>
+        <ComboboxPortal>
+          <ComboboxContent>
+            <ComboboxList>
+              <ComboboxItem value="react">
+                React
+              </ComboboxItem>
+            </ComboboxList>
+          </ComboboxContent>
+        </ComboboxPortal>
+      </Combobox>
+    </FieldContent>
+  </Field>`}
         >
           <Field size={globalSize} className="w-full">
             <FieldLabel>Tìm kiếm (Disabled)</FieldLabel>
@@ -503,34 +526,41 @@ function ComboboxMicroShowcase({ globalSize }: { globalSize: Size }) {
           label="Trạng thái Lỗi (Invalid)"
           description="Gắn aria-invalid vào ô nhập liệu."
           codeString={`<Field data-invalid={true} className="w-full">
-  <FieldLabel>Mã giảm giá</FieldLabel>
-  <FieldContent>
-    <Combobox items={["sale20", "sale50"]}>
-      <ComboboxAnchor className="w-full">
-        <InputGroup className="w-full">
-          <ComboboxInput
-            placeholder="Nhập mã..."
-            aria-invalid={true}
-            render={<InputGroupInput />}
-          />
-          <InputGroupAddon align="end">
-            <ComboboxTrigger className="flex h-full cursor-default items-center justify-center px-2.5 outline-none group-has-data-[slot=combobox-clear]/input-group:hidden disabled:cursor-not-allowed disabled:opacity-50" />
-            <ComboboxClear />
-          </InputGroupAddon>
-        </InputGroup>
-      </ComboboxAnchor>
-      <ComboboxPortal><ComboboxContent>
-        <ComboboxEmpty>Không tìm thấy mã.</ComboboxEmpty>
-        <ComboboxList>
-          <ComboboxItem value="sale20">Giảm 20%</ComboboxItem>
-          <ComboboxItem value="sale50">Giảm 50%</ComboboxItem>
-        </ComboboxList>
-      </ComboboxContent></ComboboxPortal>
-    </Combobox>
-  </FieldContent>
-  <FieldError>Mã này đã hết hạn.</FieldError>
-</Field>
-`}
+    <FieldLabel>Mã giảm giá</FieldLabel>
+    <FieldContent>
+      <Combobox items={["sale20", "sale50"]}>
+        <ComboboxAnchor className="w-full">
+          <InputGroup className="w-full">
+            <ComboboxInput
+              placeholder="Nhập mã..."
+              aria-invalid={true}
+              render={<InputGroupInput />}
+            />
+            <InputGroupAddon align="end">
+              <ComboboxTrigger className="flex h-full cursor-default items-center justify-center px-2.5 outline-none group-has-data-[slot=combobox-clear]/input-group:hidden disabled:cursor-not-allowed disabled:opacity-50" />
+              <ComboboxClear />
+            </InputGroupAddon>
+          </InputGroup>
+        </ComboboxAnchor>
+        <ComboboxPortal>
+          <ComboboxContent>
+            <ComboboxEmpty>
+              Không tìm thấy mã.
+            </ComboboxEmpty>
+            <ComboboxList>
+              <ComboboxItem value="sale20">
+                Giảm 20%
+              </ComboboxItem>
+              <ComboboxItem value="sale50">
+                Giảm 50%
+              </ComboboxItem>
+            </ComboboxList>
+          </ComboboxContent>
+        </ComboboxPortal>
+      </Combobox>
+    </FieldContent>
+    <FieldError>Mã này đã hết hạn.</FieldError>
+  </Field>`}
         >
           <Field size={globalSize} data-invalid={true} className="w-full">
             <FieldLabel>Mã giảm giá</FieldLabel>
@@ -571,31 +601,36 @@ function ComboboxMicroShowcase({ globalSize }: { globalSize: Size }) {
           label="Giao diện Nút (With Trigger)"
           description="Combobox dùng nút bấm (giống Select) thay vì ô nhập chữ (Input)."
           codeString={`<Field className="w-full">
-  <FieldLabel>Chọn Engine</FieldLabel>
-  <FieldContent>
-    <Combobox items={engineItems}>
-      <ComboboxTrigger className="w-full justify-between flex items-center border border-border rounded-md p-2 hover:bg-accent focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring">
-        <ComboboxValue placeholder="Chọn một engine" />
-      </ComboboxTrigger>
-      <ComboboxPortal><ComboboxContent>
-        <div className="p-1">
-          <InputGroup className="w-full">
-            <ComboboxInput
-              placeholder="Tìm engine..."
-              render={<InputGroupInput />}
-            />
-          </InputGroup>
-        </div>
-        <ComboboxEmpty>Không tìm thấy.</ComboboxEmpty>
-        <ComboboxList>
-          <ComboboxItem value="v8">V8 (Chrome)</ComboboxItem>
-          <ComboboxItem value="spidermonkey">SpiderMonkey (Firefox)</ComboboxItem>
-        </ComboboxList>
-      </ComboboxContent></ComboboxPortal>
-    </Combobox>
-  </FieldContent>
-</Field>
-`}
+    <FieldLabel>Chọn Engine</FieldLabel>
+    <FieldContent>
+      <Combobox items={engineItems}>
+        <ComboboxTrigger className="w-full justify-between flex items-center border border-border rounded-md p-2 hover:bg-accent focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring">
+          <ComboboxValue placeholder="Chọn một engine" />
+        </ComboboxTrigger>
+        <ComboboxPortal>
+          <ComboboxContent>
+            <div className="p-1">
+              <InputGroup className="w-full">
+                <ComboboxInput
+                  placeholder="Tìm engine..."
+                  render={<InputGroupInput />}
+                />
+              </InputGroup>
+            </div>
+            <ComboboxEmpty>Không tìm thấy.</ComboboxEmpty>
+            <ComboboxList>
+              <ComboboxItem value="v8">
+                V8 (Chrome)
+              </ComboboxItem>
+              <ComboboxItem value="spidermonkey">
+                SpiderMonkey (Firefox)
+              </ComboboxItem>
+            </ComboboxList>
+          </ComboboxContent>
+        </ComboboxPortal>
+      </Combobox>
+    </FieldContent>
+  </Field>`}
         >
           <Field size={globalSize} className="w-full">
             <FieldLabel>Chọn Engine</FieldLabel>
@@ -635,39 +670,77 @@ function ComboboxMicroShowcase({ globalSize }: { globalSize: Size }) {
         description="So sánh nhanh khi nào dùng Micro và 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">
-        <svg xmlns="http://www.w3.org/2000/svg" className="size-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>
-      </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">Single Select tự động hoàn thành</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">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            className="size-4"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="2"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            aria-hidden="true"
+          >
+            <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" />
+          </svg>
+        </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">
+            Single Select tự động hoàn thành
+          </h3>
+        </div>
       </div>
+      <p className="text-xs text-muted-foreground leading-relaxed">
+        Bạn cần một form chọn Thành phố. Số lượng thành phố
+        quá lớn nên không dùng Select được, phải dùng
+        Combobox để gõ tìm.{" "}
+        <DocsCode>ComboboxPreset</DocsCode> sinh ra để giải
+        quyết đúng bài toán chọn 1 giá trị từ tập lớn này.
+      </p>
     </div>
-    <p className="text-xs text-muted-foreground leading-relaxed">
-      Bạn cần một form chọn Thành phố. Số lượng thành phố quá lớn nên không dùng Select được, phải dùng Combobox để gõ tìm. <DocsCode>ComboboxPreset</DocsCode> sinh ra để giải quyết đúng bài toán chọn 1 giá trị từ tập lớn này.
-    </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">
-        <svg xmlns="http://www.w3.org/2000/svg" className="size-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"/></svg>
-      </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">Gán thẻ (Multi-select)</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">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            className="size-4"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="2"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            aria-hidden="true"
+          >
+            <path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z" />
+          </svg>
+        </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">
+            Gán thẻ (Multi-select)
+          </h3>
+        </div>
       </div>
+      <p className="text-xs text-muted-foreground leading-relaxed">
+        Bạn làm form tạo bài viết mới và cần gán nhiều Thẻ
+        (Tags) cho bài viết. Macro không hỗ trợ
+        Multi-select. Bạn buộc phải dùng Micro kết hợp với
+        cụm <DocsCode>{\`<ComboboxChips />\`}</DocsCode>.
+      </p>
     </div>
-    <p className="text-xs text-muted-foreground leading-relaxed">
-      Bạn làm form tạo bài viết mới và cần gán nhiều Thẻ (Tags) cho bài viết. Macro không hỗ trợ Multi-select. Bạn buộc phải dùng Micro kết hợp với cụm <DocsCode>{\`<ComboboxChips />\`}</DocsCode>.
-    </p>
-  </div>
-</div>
-`}
+  </div>`}
       >
         <div className="grid grid-cols-1 gap-6 md:grid-cols-2">
           {/* Story 1: Macro wins */}