gladvn 0.2.17 → 0.2.18

package/src/dev/showcase/collapsible.tsx

@@ -1,3 +1,7 @@
+import * as React from "react";
+
+import { ChevronsUpDownIcon } from "lucide-react";
+
 import { Button } from "../../components/micro/button";
 import {
   Collapsible,
@@ -11,8 +15,6 @@ import {
   Showcase,
   ShowcaseDocs,
 } from "../../dev/components/showcase";
-import { ChevronsUpDownIcon } from "lucide-react";
-import * as React from "react";
 
 function CollapsibleMicroShowcase() {
   const [isOpen, setIsOpen] = React.useState(false);
@@ -24,34 +26,37 @@ function CollapsibleMicroShowcase() {
           label="Default"
           description="Nhấn để mở rộng hoặc thu gọn."
           codeString={`<Collapsible className="w-full space-y-2">
-  <div className="flex items-center justify-between space-x-4 px-4">
-    <h4 className="text-sm font-semibold">
-      @peduarte starred 3 repositories
-    </h4>
-    <CollapsibleTrigger
-      render={
-        <Button variant="ghost" size="sm" className="w-9 p-0" />
-      }
-    >
-      <ChevronsUpDownIcon className="h-4 w-4" />
-      <span className="sr-only">Toggle</span>
-    </CollapsibleTrigger>
-  </div>
-  <div className="rounded-md border border-border bg-muted/50 px-4 py-3 font-mono text-sm">
-    @radix-ui/primitives
-  </div>
-  <CollapsibleContent>
-    <div className="flex flex-col gap-2">
-      <div className="rounded-md border border-border bg-muted/50 px-4 py-3 font-mono text-sm">
-        @radix-ui/colors
-      </div>
-      <div className="rounded-md border border-border bg-muted/50 px-4 py-3 font-mono text-sm">
-        @stitches/react
-      </div>
+    <div className="flex items-center justify-between space-x-4 px-4">
+      <h4 className="text-sm font-semibold">
+        @peduarte starred 3 repositories
+      </h4>
+      <CollapsibleTrigger
+        render={
+          <Button
+            variant="ghost"
+            size="sm"
+            className="w-9 p-0"
+          />
+        }
+      >
+        <ChevronsUpDownIcon className="h-4 w-4" />
+        <span className="sr-only">Toggle</span>
+      </CollapsibleTrigger>
     </div>
-  </CollapsibleContent>
-</Collapsible>
-`}
+    <div className="rounded-md border border-border bg-muted/50 px-4 py-3 font-mono text-sm">
+      @radix-ui/primitives
+    </div>
+    <CollapsibleContent>
+      <div className="flex flex-col gap-2">
+        <div className="rounded-md border border-border bg-muted/50 px-4 py-3 font-mono text-sm">
+          @radix-ui/colors
+        </div>
+        <div className="rounded-md border border-border bg-muted/50 px-4 py-3 font-mono text-sm">
+          @stitches/react
+        </div>
+      </div>
+    </CollapsibleContent>
+  </Collapsible>`}
         >
           <Collapsible className="w-full space-y-2">
             <div className="flex items-center justify-between space-x-4 px-4">
@@ -87,32 +92,37 @@ function CollapsibleMicroShowcase() {
           label="Default Open"
           description="Bắt đầu ở trạng thái mở rộng."
           codeString={`<Collapsible defaultOpen className="w-full space-y-2">
-  <div className="flex items-center justify-between space-x-4 px-4">
-    <h4 className="text-sm font-semibold">Recent activity</h4>
-    <CollapsibleTrigger
-      render={
-        <Button variant="ghost" size="sm" className="w-9 p-0" />
-      }
-    >
-      <ChevronsUpDownIcon className="h-4 w-4" />
-      <span className="sr-only">Toggle</span>
-    </CollapsibleTrigger>
-  </div>
-  <div className="rounded-md border border-border bg-muted/50 px-4 py-3 font-mono text-sm">
-    Pushed to main
-  </div>
-  <CollapsibleContent>
-    <div className="flex flex-col gap-2">
-      <div className="rounded-md border border-border bg-muted/50 px-4 py-3 font-mono text-sm">
-        Merged PR #42
-      </div>
-      <div className="rounded-md border border-border bg-muted/50 px-4 py-3 font-mono text-sm">
-        Opened issue #43
-      </div>
+    <div className="flex items-center justify-between space-x-4 px-4">
+      <h4 className="text-sm font-semibold">
+        Recent activity
+      </h4>
+      <CollapsibleTrigger
+        render={
+          <Button
+            variant="ghost"
+            size="sm"
+            className="w-9 p-0"
+          />
+        }
+      >
+        <ChevronsUpDownIcon className="h-4 w-4" />
+        <span className="sr-only">Toggle</span>
+      </CollapsibleTrigger>
     </div>
-  </CollapsibleContent>
-</Collapsible>
-`}
+    <div className="rounded-md border border-border bg-muted/50 px-4 py-3 font-mono text-sm">
+      Pushed to main
+    </div>
+    <CollapsibleContent>
+      <div className="flex flex-col gap-2">
+        <div className="rounded-md border border-border bg-muted/50 px-4 py-3 font-mono text-sm">
+          Merged PR #42
+        </div>
+        <div className="rounded-md border border-border bg-muted/50 px-4 py-3 font-mono text-sm">
+          Opened issue #43
+        </div>
+      </div>
+    </CollapsibleContent>
+  </Collapsible>`}
         >
           <Collapsible defaultOpen className="w-full space-y-2">
             <div className="flex items-center justify-between space-x-4 px-4">
@@ -145,14 +155,22 @@ function CollapsibleMicroShowcase() {
         <ExampleSection
           label="Controlled Mode"
           description="Trạng thái mở được kiểm soát bằng state."
-          codeString={`const [isOpen, setIsOpen] = React.useState(false)
-
-return (
-  <Collapsible open={isOpen} onOpenChange={setIsOpen} className="w-full space-y-2">
+          codeString={`const [isOpen, setIsOpen] = React.useState(false) return (
+  <Collapsible
+    open={isOpen}
+    onOpenChange={setIsOpen}
+    className="w-full space-y-2"
+  >
     <div className="flex items-center justify-between space-x-4 px-4">
-      <h4 className="text-sm font-semibold">Bảng hiển thị nội dung</h4>
+      <h4 className="text-sm font-semibold">
+        Bảng hiển thị nội dung
+      </h4>
       <CollapsibleTrigger asChild>
-        <Button variant="ghost" size="sm" className="w-9 p-0">
+        <Button
+          variant="ghost"
+          size="sm"
+          className="w-9 p-0"
+        >
           <ChevronsUpDown className="h-4 w-4" />
           <span className="sr-only">Toggle</span>
         </Button>
@@ -160,11 +178,12 @@ return (
     </div>
     <CollapsibleContent>
       <div className="rounded-md border border-border bg-muted/50 px-4 py-3 font-mono text-sm">
-        Nội dung này được điều khiển bởi nút bên ngoài hoặc mũi tên ở trên!
+        Nội dung này được điều khiển bởi nút bên ngoài hoặc
+        mũi tên ở trên!
       </div>
     </CollapsibleContent>
   </Collapsible>
-)`}
+  )`}
         >
           <div className="w-full space-y-4">
             {/* Đây là nút nằm HOÀN TOÀN BÊN NGOÀI thẻ Collapsible */}
@@ -217,29 +236,34 @@ return (
           label="Disabled"
           description="Không thể tương tác (Vô hiệu hóa)."
           codeString={`<Collapsible disabled className="w-full space-y-2">
-  <div className="flex items-center justify-between space-x-4 px-4 opacity-50">
-    <h4 className="text-sm font-semibold">Archived Repositories</h4>
-    <CollapsibleTrigger
-      render={
-        <Button variant="ghost" size="sm" className="w-9 p-0" />
-      }
-    >
-      <ChevronsUpDownIcon className="h-4 w-4" />
-      <span className="sr-only">Toggle</span>
-    </CollapsibleTrigger>
-  </div>
-  <div className="rounded-md border border-border bg-muted/50 px-4 py-3 font-mono text-sm opacity-50">
-    @radix-ui/react-toolbar
-  </div>
-  <CollapsibleContent>
-    <div className="flex flex-col gap-2">
-      <div className="rounded-md border border-border bg-muted/50 px-4 py-3 font-mono text-sm opacity-50">
-        @radix-ui/react-popover
-      </div>
+    <div className="flex items-center justify-between space-x-4 px-4 opacity-50">
+      <h4 className="text-sm font-semibold">
+        Archived Repositories
+      </h4>
+      <CollapsibleTrigger
+        render={
+          <Button
+            variant="ghost"
+            size="sm"
+            className="w-9 p-0"
+          />
+        }
+      >
+        <ChevronsUpDownIcon className="h-4 w-4" />
+        <span className="sr-only">Toggle</span>
+      </CollapsibleTrigger>
     </div>
-  </CollapsibleContent>
-</Collapsible>
-`}
+    <div className="rounded-md border border-border bg-muted/50 px-4 py-3 font-mono text-sm opacity-50">
+      @radix-ui/react-toolbar
+    </div>
+    <CollapsibleContent>
+      <div className="flex flex-col gap-2">
+        <div className="rounded-md border border-border bg-muted/50 px-4 py-3 font-mono text-sm opacity-50">
+          @radix-ui/react-popover
+        </div>
+      </div>
+    </CollapsibleContent>
+  </Collapsible>`}
         >
           <Collapsible disabled className="w-full space-y-2">
             <div className="flex items-center justify-between space-x-4 px-4 opacity-50">