gladvn 0.2.17 → 0.2.18

package/src/dev/showcase/drawer.tsx

@@ -6,9 +6,9 @@ import {
   DrawerDescription,
   DrawerFooter,
   DrawerHeader,
+  DrawerPortal,
   DrawerTitle,
   DrawerTrigger,
-  DrawerPortal,
 } from "../../components/micro/drawer";
 import {
   DocsP,
@@ -29,55 +29,56 @@ function DrawerMicroShowcase() {
           label="Bottom Drawer"
           description="Drawer mặc định trượt từ dưới lên."
           codeString={`<Drawer>
-  <DrawerTrigger asChild>
-    <Button variant="outline">Open Bottom</Button>
-  </DrawerTrigger>
-  <DrawerPortal><DrawerContent>
-    <div className="mx-auto w-full max-w-sm">
-      <DrawerHeader>
-        <DrawerTitle>Move Goal</DrawerTitle>
-        <DrawerDescription>
-          Set your daily activity goal.
-        </DrawerDescription>
-      </DrawerHeader>
-      <div className="p-4 pb-0">
-        <div className="flex items-center justify-center space-x-2">
-          <Button
-            variant="outline"
-            size="sm"
-            className="h-8 w-8 rounded-full"
-            onClick={() => {}}
-          >
-            -
-          </Button>
-          <div className="flex-1 text-center">
-            <div className="text-7xl font-bold tracking-tighter">
-              350
-            </div>
-            <div className="text-[0.70rem] uppercase text-muted-foreground">
-              Calories/day
+    <DrawerTrigger asChild>
+      <Button variant="outline">Open Bottom</Button>
+    </DrawerTrigger>
+    <DrawerPortal>
+      <DrawerContent>
+        <div className="mx-auto w-full max-w-sm">
+          <DrawerHeader>
+            <DrawerTitle>Move Goal</DrawerTitle>
+            <DrawerDescription>
+              Set your daily activity goal.
+            </DrawerDescription>
+          </DrawerHeader>
+          <div className="p-4 pb-0">
+            <div className="flex items-center justify-center space-x-2">
+              <Button
+                variant="outline"
+                size="sm"
+                className="h-8 w-8 rounded-full"
+                onClick={() => {}}
+              >
+                -
+              </Button>
+              <div className="flex-1 text-center">
+                <div className="text-7xl font-bold tracking-tighter">
+                  350
+                </div>
+                <div className="text-[0.70rem] uppercase text-muted-foreground">
+                  Calories/day
+                </div>
+              </div>
+              <Button
+                variant="outline"
+                size="sm"
+                className="h-8 w-8 rounded-full"
+                onClick={() => {}}
+              >
+                +
+              </Button>
             </div>
           </div>
-          <Button
-            variant="outline"
-            size="sm"
-            className="h-8 w-8 rounded-full"
-            onClick={() => {}}
-          >
-            +
-          </Button>
+          <DrawerFooter>
+            <Button>Submit</Button>
+            <DrawerClose asChild>
+              <Button variant="outline">Cancel</Button>
+            </DrawerClose>
+          </DrawerFooter>
         </div>
-      </div>
-      <DrawerFooter>
-        <Button>Submit</Button>
-        <DrawerClose asChild>
-          <Button variant="outline">Cancel</Button>
-        </DrawerClose>
-      </DrawerFooter>
-    </div>
-  </DrawerContent></DrawerPortal>
-</Drawer>
-`}
+      </DrawerContent>
+    </DrawerPortal>
+  </Drawer>`}
         >
           <Drawer>
             <DrawerTrigger asChild>
@@ -137,28 +138,30 @@ function DrawerMicroShowcase() {
           label="Simple Message"
           description="Drawer với nội dung văn bản đơn giản."
           codeString={`<Drawer>
-  <DrawerTrigger asChild>
-    <Button variant="outline">Show Info</Button>
-  </DrawerTrigger>
-  <DrawerPortal><DrawerContent>
-    <div className="mx-auto w-full max-w-sm">
-      <DrawerHeader>
-        <DrawerTitle>About this feature</DrawerTitle>
-        <DrawerDescription>
-          This feature is currently in beta. Some functionality may be
-          limited or change without notice. We appreciate your
-          feedback as we work to improve the experience.
-        </DrawerDescription>
-      </DrawerHeader>
-      <DrawerFooter>
-        <DrawerClose asChild>
-          <Button variant="outline">Got it</Button>
-        </DrawerClose>
-      </DrawerFooter>
-    </div>
-  </DrawerContent></DrawerPortal>
-</Drawer>
-`}
+    <DrawerTrigger asChild>
+      <Button variant="outline">Show Info</Button>
+    </DrawerTrigger>
+    <DrawerPortal>
+      <DrawerContent>
+        <div className="mx-auto w-full max-w-sm">
+          <DrawerHeader>
+            <DrawerTitle>About this feature</DrawerTitle>
+            <DrawerDescription>
+              This feature is currently in beta. Some
+              functionality may be limited or change without
+              notice. We appreciate your feedback as we work
+              to improve the experience.
+            </DrawerDescription>
+          </DrawerHeader>
+          <DrawerFooter>
+            <DrawerClose asChild>
+              <Button variant="outline">Got it</Button>
+            </DrawerClose>
+          </DrawerFooter>
+        </div>
+      </DrawerContent>
+    </DrawerPortal>
+  </Drawer>`}
         >
           <Drawer>
             <DrawerTrigger asChild>
@@ -193,53 +196,56 @@ function DrawerMicroShowcase() {
     <DrawerTrigger asChild>
       <Button variant="outline">Open Left</Button>
     </DrawerTrigger>
-    <DrawerPortal><DrawerContent>
-      <DrawerHeader>
-        <DrawerTitle>Sidebar Menu</DrawerTitle>
-        <DrawerDescription>
-          Điều hướng từ cạnh trái của màn hình.
-        </DrawerDescription>
-      </DrawerHeader>
-      <div className="flex-1 p-4">
-        <ul className="space-y-4 text-sm">
-          <li>Dashboard</li>
-          <li>Settings</li>
-          <li>Profile</li>
-        </ul>
-      </div>
-      <DrawerFooter>
-        <DrawerClose asChild>
-          <Button variant="outline">Close</Button>
-        </DrawerClose>
-      </DrawerFooter>
-    </DrawerContent></DrawerPortal>
+    <DrawerPortal>
+      <DrawerContent>
+        <DrawerHeader>
+          <DrawerTitle>Sidebar Menu</DrawerTitle>
+          <DrawerDescription>
+            Điều hướng từ cạnh trái của màn hình.
+          </DrawerDescription>
+        </DrawerHeader>
+        <div className="flex-1 p-4">
+          <ul className="space-y-4 text-sm">
+            <li>Dashboard</li>
+            <li>Settings</li>
+            <li>Profile</li>
+          </ul>
+        </div>
+        <DrawerFooter>
+          <DrawerClose asChild>
+            <Button variant="outline">Close</Button>
+          </DrawerClose>
+        </DrawerFooter>
+      </DrawerContent>
+    </DrawerPortal>
   </Drawer>
 
   <Drawer direction="right">
     <DrawerTrigger asChild>
       <Button variant="outline">Open Right</Button>
     </DrawerTrigger>
-    <DrawerPortal><DrawerContent>
-      <DrawerHeader>
-        <DrawerTitle>Filters</DrawerTitle>
-        <DrawerDescription>
-          Bộ lọc tìm kiếm từ cạnh phải.
-        </DrawerDescription>
-      </DrawerHeader>
-      <div className="flex-1 space-y-2 p-4">
-        <div className="h-4 w-1/2 rounded bg-muted" />
-        <div className="h-4 w-3/4 rounded bg-muted" />
-        <div className="h-4 w-2/3 rounded bg-muted" />
-      </div>
-      <DrawerFooter>
-        <Button>Apply Filters</Button>
-        <DrawerClose asChild>
-          <Button variant="outline">Cancel</Button>
-        </DrawerClose>
-      </DrawerFooter>
-    </DrawerContent></DrawerPortal>
-  </Drawer>
-`}
+    <DrawerPortal>
+      <DrawerContent>
+        <DrawerHeader>
+          <DrawerTitle>Filters</DrawerTitle>
+          <DrawerDescription>
+            Bộ lọc tìm kiếm từ cạnh phải.
+          </DrawerDescription>
+        </DrawerHeader>
+        <div className="flex-1 space-y-2 p-4">
+          <div className="h-4 w-1/2 rounded bg-muted" />
+          <div className="h-4 w-3/4 rounded bg-muted" />
+          <div className="h-4 w-2/3 rounded bg-muted" />
+        </div>
+        <DrawerFooter>
+          <Button>Apply Filters</Button>
+          <DrawerClose asChild>
+            <Button variant="outline">Cancel</Button>
+          </DrawerClose>
+        </DrawerFooter>
+      </DrawerContent>
+    </DrawerPortal>
+  </Drawer>`}
         >
           <Drawer direction="left">
             <DrawerTrigger asChild>
@@ -303,31 +309,32 @@ function DrawerMicroShowcase() {
           label="Top Drawer"
           description="Drawer mở từ phía trên — phù hợp cho notifications, alerts, hoặc search."
           codeString={`<Drawer direction="top">
-  <DrawerTrigger asChild>
-    <Button variant="outline">Open Top</Button>
-  </DrawerTrigger>
-  <DrawerPortal><DrawerContent>
-    <div className="mx-auto w-full max-w-sm">
-      <DrawerHeader>
-        <DrawerTitle>New Notification</DrawerTitle>
-        <DrawerDescription>
-          Bạn có 3 thông báo chưa đọc.
-        </DrawerDescription>
-      </DrawerHeader>
-      <div className="space-y-2 px-4 pb-2 text-sm text-muted-foreground">
-        <p>🔔 Your order has been shipped.</p>
-        <p>🔔 A new comment on your post.</p>
-        <p>🔔 Your subscription renews in 3 days.</p>
-      </div>
-      <DrawerFooter>
-        <DrawerClose asChild>
-          <Button variant="outline">Dismiss all</Button>
-        </DrawerClose>
-      </DrawerFooter>
-    </div>
-  </DrawerContent></DrawerPortal>
-</Drawer>
-`}
+    <DrawerTrigger asChild>
+      <Button variant="outline">Open Top</Button>
+    </DrawerTrigger>
+    <DrawerPortal>
+      <DrawerContent>
+        <div className="mx-auto w-full max-w-sm">
+          <DrawerHeader>
+            <DrawerTitle>New Notification</DrawerTitle>
+            <DrawerDescription>
+              Bạn có 3 thông báo chưa đọc.
+            </DrawerDescription>
+          </DrawerHeader>
+          <div className="space-y-2 px-4 pb-2 text-sm text-muted-foreground">
+            <p>🔔 Your order has been shipped.</p>
+            <p>🔔 A new comment on your post.</p>
+            <p>🔔 Your subscription renews in 3 days.</p>
+          </div>
+          <DrawerFooter>
+            <DrawerClose asChild>
+              <Button variant="outline">Dismiss all</Button>
+            </DrawerClose>
+          </DrawerFooter>
+        </div>
+      </DrawerContent>
+    </DrawerPortal>
+  </Drawer>`}
         >
           <Drawer direction="top">
             <DrawerTrigger asChild>