gladvn 0.2.16 → 0.2.18

package/src/dev/showcase/navigation-menu.tsx

@@ -1,3 +1,5 @@
+import React from "react";
+
 import {
   NavigationMenu,
   NavigationMenuContent,
@@ -7,7 +9,6 @@ import {
   NavigationMenuPortal,
   NavigationMenuPositioner,
   NavigationMenuTrigger,
-  NavigationMenuViewport,
   navigationMenuTriggerStyle,
 } from "../../components/micro/navigation-menu";
 import {
@@ -17,7 +18,6 @@ import {
   ShowcaseDocs,
 } from "../../dev/components/showcase";
 import { cn } from "../../lib/utils";
-import React from "react";
 
 const ListItem = React.forwardRef<
   React.ComponentRef<"a">,
@@ -57,166 +57,172 @@ function NavigationMenuMicroShowcase() {
         label="Default"
         description="Điều hướng đa cấp với bảng thả xuống."
         codeString={`<NavigationMenu>
-  <NavigationMenuList>
-    <NavigationMenuItem>
-      <NavigationMenuTrigger>Getting started</NavigationMenuTrigger>
-      <NavigationMenuContent>
-        <ul className="grid gap-3 p-4 md:w-[400px] lg:w-[500px] lg:grid-cols-[.75fr_1fr]">
-          <li className="row-span-3">
-            <NavigationMenuLink
-              render={
-                <a
-                  className="flex h-full w-full select-none flex-col justify-end rounded-md bg-gradient-to-b from-muted/50 to-muted p-6 no-underline outline-none focus:shadow-md"
-                  href="/"
-                />
-              }
+    <NavigationMenuList>
+      <NavigationMenuItem>
+        <NavigationMenuTrigger>
+          Getting started
+        </NavigationMenuTrigger>
+        <NavigationMenuContent>
+          <ul className="grid gap-3 p-4 md:w-[400px] lg:w-[500px] lg:grid-cols-[.75fr_1fr]">
+            <li className="row-span-3">
+              <NavigationMenuLink
+                render={
+                  <a
+                    className="flex h-full w-full select-none flex-col justify-end rounded-md bg-gradient-to-b from-muted/50 to-muted p-6 no-underline outline-none focus:shadow-md"
+                    href="/"
+                  />
+                }
+              >
+                <div className="mb-2 mt-4 text-lg font-medium">
+                  gladvn/ui
+                </div>
+                <p className="text-sm leading-tight text-muted-foreground">
+                  Beautifully designed components built with
+                  Radix UI and Tailwind CSS.
+                </p>
+              </NavigationMenuLink>
+            </li>
+            <ListItem href="/docs" title="Introduction">
+              Re-usable components built using Radix UI and
+              Tailwind CSS.
+            </ListItem>
+            <ListItem
+              href="/docs/installation"
+              title="Installation"
             >
-              <div className="mb-2 mt-4 text-lg font-medium">
-                gladvn/ui
-              </div>
-              <p className="text-sm leading-tight text-muted-foreground">
-                Beautifully designed components built with Radix UI and
-                Tailwind CSS.
-              </p>
-            </NavigationMenuLink>
-          </li>
-          <ListItem href="/docs" title="Introduction">
-            Re-usable components built using Radix UI and Tailwind CSS.
-          </ListItem>
-          <ListItem href="/docs/installation" title="Installation">
-            How to install dependencies and structure your app.
-          </ListItem>
-          <ListItem
-            href="/docs/primitives/typography"
-            title="Typography"
-          >
-            Styles for headings, paragraphs, lists...etc
-          </ListItem>
-        </ul>
-      </NavigationMenuContent>
-    </NavigationMenuItem>
-    <NavigationMenuItem>
-      <NavigationMenuTrigger>Components</NavigationMenuTrigger>
-      <NavigationMenuContent>
-        <ul className="grid w-[400px] gap-3 p-4 md:w-[500px] md:grid-cols-2 lg:w-[600px] ">
-          <ListItem
-            title="Alert Dialog"
-            href="/docs/primitives/alert-dialog"
-          >
-            A modal dialog that interrupts the user with important
-            content and expects a response.
-          </ListItem>
-          <ListItem
-            title="Hover Card"
-            href="/docs/primitives/hover-card"
-          >
-            For sighted users to preview content available behind a
-            link.
-          </ListItem>
-          <ListItem title="Progress" href="/docs/primitives/progress">
-            Displays an indicator showing the completion progress of a
-            task.
-          </ListItem>
-          <ListItem
-            title="Scroll-area"
-            href="/docs/primitives/scroll-area"
-          >
-            Visually or semantically separates content.
-          </ListItem>
-        </ul>
-      </NavigationMenuContent>
-    </NavigationMenuItem>
-    <NavigationMenuItem>
-      <NavigationMenuLink
-        href="/docs"
-        className={navigationMenuTriggerStyle()}
-      >
-        Documentation
-      </NavigationMenuLink>
-    </NavigationMenuItem>
-  </NavigationMenuList>
-  <NavigationMenuPortal>
-    <NavigationMenuPositioner />
-  </NavigationMenuPortal>
-</NavigationMenu>
-`}
+              How to install dependencies and structure your
+              app.
+            </ListItem>
+            <ListItem
+              href="/docs/primitives/typography"
+              title="Typography"
+            >
+              Styles for headings, paragraphs, lists...etc
+            </ListItem>
+          </ul>
+        </NavigationMenuContent>
+      </NavigationMenuItem>
+      <NavigationMenuItem>
+        <NavigationMenuTrigger>
+          Components
+        </NavigationMenuTrigger>
+        <NavigationMenuContent>
+          <ul className="grid w-[400px] gap-3 p-4 md:w-[500px] md:grid-cols-2 lg:w-[600px] ">
+            <ListItem
+              title="Alert Dialog"
+              href="/docs/primitives/alert-dialog"
+            >
+              A modal dialog that interrupts the user with
+              important content and expects a response.
+            </ListItem>
+            <ListItem
+              title="Hover Card"
+              href="/docs/primitives/hover-card"
+            >
+              For sighted users to preview content available
+              behind a link.
+            </ListItem>
+            <ListItem
+              title="Progress"
+              href="/docs/primitives/progress"
+            >
+              Displays an indicator showing the completion
+              progress of a task.
+            </ListItem>
+            <ListItem
+              title="Scroll-area"
+              href="/docs/primitives/scroll-area"
+            >
+              Visually or semantically separates content.
+            </ListItem>
+          </ul>
+        </NavigationMenuContent>
+      </NavigationMenuItem>
+      <NavigationMenuItem>
+        <NavigationMenuLink
+          href="/docs"
+          className={navigationMenuTriggerStyle()}
+        >
+          Documentation
+        </NavigationMenuLink>
+      </NavigationMenuItem>
+    </NavigationMenuList>
+    <NavigationMenuPortal>
+      <NavigationMenuPositioner />
+    </NavigationMenuPortal>
+  </NavigationMenu>`}
       >
         <NavigationMenu>
           <NavigationMenuList>
             <NavigationMenuItem>
               <NavigationMenuTrigger>Getting started</NavigationMenuTrigger>
 
-              
-                <NavigationMenuContent>
-                  <ul className="grid gap-3 p-4 md:w-[400px] lg:w-[500px] lg:grid-cols-[.75fr_1fr]">
-                    <li className="row-span-3">
-                      <NavigationMenuLink
-                        render={
-                          <a
-                            className="flex h-full w-full select-none flex-col justify-end rounded-md bg-gradient-to-b from-muted/50 to-muted p-6 no-underline outline-none focus:shadow-md"
-                            href="/"
-                          />
-                        }
-                      >
-                        <div className="mb-2 mt-4 text-lg font-medium">
-                          gladvn/ui
-                        </div>
-                        <p className="text-sm leading-tight text-muted-foreground">
-                          Beautifully designed components built with Radix UI
-                          and Tailwind CSS.
-                        </p>
-                      </NavigationMenuLink>
-                    </li>
-                    <ListItem href="/docs" title="Introduction">
-                      Re-usable components built using Radix UI and Tailwind
-                      CSS.
-                    </ListItem>
-                    <ListItem href="/docs/installation" title="Installation">
-                      How to install dependencies and structure your app.
-                    </ListItem>
-                    <ListItem
-                      href="/docs/primitives/typography"
-                      title="Typography"
+              <NavigationMenuContent>
+                <ul className="grid gap-3 p-4 md:w-[400px] lg:w-[500px] lg:grid-cols-[.75fr_1fr]">
+                  <li className="row-span-3">
+                    <NavigationMenuLink
+                      render={
+                        <a
+                          className="flex h-full w-full select-none flex-col justify-end rounded-md bg-gradient-to-b from-muted/50 to-muted p-6 no-underline outline-none focus:shadow-md"
+                          href="/"
+                        />
+                      }
                     >
-                      Styles for headings, paragraphs, lists...etc
-                    </ListItem>
-                  </ul>
-                </NavigationMenuContent>
-              
+                      <div className="mb-2 mt-4 text-lg font-medium">
+                        gladvn/ui
+                      </div>
+                      <p className="text-sm leading-tight text-muted-foreground">
+                        Beautifully designed components built with Radix UI and
+                        Tailwind CSS.
+                      </p>
+                    </NavigationMenuLink>
+                  </li>
+                  <ListItem href="/docs" title="Introduction">
+                    Re-usable components built using Radix UI and Tailwind CSS.
+                  </ListItem>
+                  <ListItem href="/docs/installation" title="Installation">
+                    How to install dependencies and structure your app.
+                  </ListItem>
+                  <ListItem
+                    href="/docs/primitives/typography"
+                    title="Typography"
+                  >
+                    Styles for headings, paragraphs, lists...etc
+                  </ListItem>
+                </ul>
+              </NavigationMenuContent>
             </NavigationMenuItem>
             <NavigationMenuItem>
               <NavigationMenuTrigger>Components</NavigationMenuTrigger>
 
-              
-                <NavigationMenuContent>
-                  <ul className="grid w-[400px] gap-3 p-4 md:w-[500px] md:grid-cols-2 lg:w-[600px] ">
-                    <ListItem
-                      title="Alert Dialog"
-                      href="/docs/primitives/alert-dialog"
-                    >
-                      A modal dialog that interrupts the user with important
-                      content and expects a response.
-                    </ListItem>
-                    <ListItem
-                      title="Hover Card"
-                      href="/docs/primitives/hover-card"
-                    >
-                      For sighted users to preview content available behind a
-                      link.
-                    </ListItem>
-                    <ListItem title="Progress" href="/docs/primitives/progress">
-                      Displays an indicator showing the completion progress of a
-                      task.
-                    </ListItem>
-                    <ListItem
-                      title="Scroll-area"
-                      href="/docs/primitives/scroll-area"
-                    >
-                      Visually or semantically separates content.
-                    </ListItem>
-                  </ul>
-                </NavigationMenuContent>
-              
+              <NavigationMenuContent>
+                <ul className="grid w-[400px] gap-3 p-4 md:w-[500px] md:grid-cols-2 lg:w-[600px] ">
+                  <ListItem
+                    title="Alert Dialog"
+                    href="/docs/primitives/alert-dialog"
+                  >
+                    A modal dialog that interrupts the user with important
+                    content and expects a response.
+                  </ListItem>
+                  <ListItem
+                    title="Hover Card"
+                    href="/docs/primitives/hover-card"
+                  >
+                    For sighted users to preview content available behind a
+                    link.
+                  </ListItem>
+                  <ListItem title="Progress" href="/docs/primitives/progress">
+                    Displays an indicator showing the completion progress of a
+                    task.
+                  </ListItem>
+                  <ListItem
+                    title="Scroll-area"
+                    href="/docs/primitives/scroll-area"
+                  >
+                    Visually or semantically separates content.
+                  </ListItem>
+                </ul>
+              </NavigationMenuContent>
             </NavigationMenuItem>
             <NavigationMenuItem>
               <NavigationMenuLink
@@ -237,19 +243,22 @@ function NavigationMenuMicroShowcase() {
         label="Disabled State"
         description="Menu trigger ở trạng thái vô hiệu hóa."
         codeString={`<NavigationMenu>
-  <NavigationMenuList>
-    <NavigationMenuItem>
-      <NavigationMenuTrigger disabled>Disabled Trigger</NavigationMenuTrigger>
-      <NavigationMenuContent>
-        <div className="p-4 w-[200px]">Content will not be visible</div>
-      </NavigationMenuContent>
-    </NavigationMenuItem>
-  </NavigationMenuList>
-  <NavigationMenuPortal>
-    <NavigationMenuPositioner />
-  </NavigationMenuPortal>
-</NavigationMenu>
-`}
+    <NavigationMenuList>
+      <NavigationMenuItem>
+        <NavigationMenuTrigger disabled>
+          Disabled Trigger
+        </NavigationMenuTrigger>
+        <NavigationMenuContent>
+          <div className="p-4 w-[200px]">
+            Content will not be visible
+          </div>
+        </NavigationMenuContent>
+      </NavigationMenuItem>
+    </NavigationMenuList>
+    <NavigationMenuPortal>
+      <NavigationMenuPositioner />
+    </NavigationMenuPortal>
+  </NavigationMenu>`}
       >
         <NavigationMenu>
           <NavigationMenuList>
@@ -258,13 +267,9 @@ function NavigationMenuMicroShowcase() {
                 Disabled Trigger
               </NavigationMenuTrigger>
 
-              
-                <NavigationMenuContent>
-                  <div className="p-4 w-[200px]">
-                    Content will not be visible
-                  </div>
-                </NavigationMenuContent>
-              
+              <NavigationMenuContent>
+                <div className="p-4 w-[200px]">Content will not be visible</div>
+              </NavigationMenuContent>
             </NavigationMenuItem>
           </NavigationMenuList>
           <NavigationMenuPortal>