docs: replace import of custom 'ListItem' component with inline html in Navigation Menu (#642)

apps/www/__registry__/index.ts

@@ -752,13 +752,6 @@ export const Index = {
       component: () => import("../src/lib/registry/default/example/NavigationMenuDemo.vue").then((m) => m.default),
       files: ["../src/lib/registry/default/example/NavigationMenuDemo.vue"],
     },
-    "NavigationMenuDemoItem": {
-      name: "NavigationMenuDemoItem",
-      type: "components:example",
-      registryDependencies: ["utils","navigation-menu"],
-      component: () => import("../src/lib/registry/default/example/NavigationMenuDemoItem.vue").then((m) => m.default),
-      files: ["../src/lib/registry/default/example/NavigationMenuDemoItem.vue"],
-    },
     "NumberFieldCurrency": {
       name: "NumberFieldCurrency",
       type: "components:example",
@@ -2202,13 +2195,6 @@ export const Index = {
       component: () => import("../src/lib/registry/new-york/example/NavigationMenuDemo.vue").then((m) => m.default),
       files: ["../src/lib/registry/new-york/example/NavigationMenuDemo.vue"],
     },
-    "NavigationMenuDemoItem": {
-      name: "NavigationMenuDemoItem",
-      type: "components:example",
-      registryDependencies: ["utils","navigation-menu"],
-      component: () => import("../src/lib/registry/new-york/example/NavigationMenuDemoItem.vue").then((m) => m.default),
-      files: ["../src/lib/registry/new-york/example/NavigationMenuDemoItem.vue"],
-    },
     "NumberFieldCurrency": {
       name: "NumberFieldCurrency",
       type: "components:example",

apps/www/src/lib/registry/default/example/NavigationMenuDemo.vue

@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import ListItem from './NavigationMenuDemoItem.vue'
 import {
   NavigationMenu,
   NavigationMenuContent,
@@ -73,15 +72,46 @@ const components: { title: string, href: string, description: string }[] = [
                 </a>
               </NavigationMenuLink>
             </li>
-            <ListItem href="/docs" title="Introduction">
+
+            <li>
+              <NavigationMenuLink as-child>
+                <a
+                  href="/docs"
+                  class="block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground"
+                >
+                  <div class="text-sm font-medium leading-none">Introduction</div>
+                  <p class="line-clamp-2 text-sm leading-snug text-muted-foreground">
                     Re-usable components built using Radix UI and Tailwind CSS.
-            </ListItem>
-            <ListItem href="/docs/installation" title="Installation">
+                  </p>
+                </a>
+              </NavigationMenuLink>
+            </li>
+            <li>
+              <NavigationMenuLink as-child>
+                <a
+                  href="/docs/installation"
+                  class="block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground"
+                >
+                  <div class="text-sm font-medium leading-none">Installation</div>
+                  <p class="line-clamp-2 text-sm leading-snug text-muted-foreground">
                     How to install dependencies and structure your app.
-            </ListItem>
-            <ListItem href="/docs/primitives/typography" title="Typography">
+                  </p>
+                </a>
+              </NavigationMenuLink>
+            </li>
+            <li>
+              <NavigationMenuLink as-child>
+                <a
+                  href="/docs/primitives/typography"
+                  class="block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground"
+                >
+                  <div class="text-sm font-medium leading-none">Typography</div>
+                  <p class="line-clamp-2 text-sm leading-snug text-muted-foreground">
                     Styles for headings, paragraphs, lists...etc
-            </ListItem>
+                  </p>
+                </a>
+              </NavigationMenuLink>
+            </li>
           </ul>
         </NavigationMenuContent>
       </NavigationMenuItem>
@@ -89,14 +119,19 @@ const components: { title: string, href: string, description: string }[] = [
         <NavigationMenuTrigger>Components</NavigationMenuTrigger>
         <NavigationMenuContent>
           <ul class="grid w-[400px] gap-3 p-4 md:w-[500px] md:grid-cols-2 lg:w-[600px] ">
-            <ListItem
-              v-for="component in components"
-              :key="component.title"
-              :title="component.title"
+            <li v-for="component in components" :key="component.title">
+              <NavigationMenuLink as-child>
+                <a
                   :href="component.href"
+                  class="block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground"
                 >
+                  <div class="text-sm font-medium leading-none">{{ component.title }}</div>
+                  <p class="line-clamp-2 text-sm leading-snug text-muted-foreground">
                     {{ component.description }}
-            </ListItem>
+                  </p>
+                </a>
+              </NavigationMenuLink>
+            </li>
           </ul>
         </NavigationMenuContent>
       </NavigationMenuItem>

apps/www/src/lib/registry/default/example/NavigationMenuDemoItem.vue

@@ -1,27 +0,0 @@
-<script setup lang="ts">
-import { cn } from '@/lib/utils'
-import {
-  NavigationMenuLink,
-} from '@/lib/registry/default/ui/navigation-menu'
-
-defineProps<{ title?: string, href?: string }>()
-</script>
-
-<template>
-  <li>
-    <NavigationMenuLink as-child>
-      <a
-        :href="href"
-        :class="cn(
-          'block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground',
-          $attrs.class ?? '',
-        )"
-      >
-        <div class="text-sm font-medium leading-none">{{ title }}</div>
-        <p class="line-clamp-2 text-sm leading-snug text-muted-foreground">
-          <slot />
-        </p>
-      </a>
-    </NavigationMenuLink>
-  </li>
-</template>

apps/www/src/lib/registry/new-york/example/NavigationMenuDemo.vue

@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import ListItem from './NavigationMenuDemoItem.vue'
 import {
   NavigationMenu,
   NavigationMenuContent,
@@ -73,15 +72,45 @@ const components: { title: string, href: string, description: string }[] = [
                 </a>
               </NavigationMenuLink>
             </li>
-            <ListItem href="/docs" title="Introduction">
+            <li>
+              <NavigationMenuLink as-child>
+                <a
+                  href="/docs"
+                  class="block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground"
+                >
+                  <div class="text-sm font-medium leading-none">Introduction</div>
+                  <p class="line-clamp-2 text-sm leading-snug text-muted-foreground">
                     Re-usable components built using Radix UI and Tailwind CSS.
-            </ListItem>
-            <ListItem href="/docs/installation" title="Installation">
+                  </p>
+                </a>
+              </NavigationMenuLink>
+            </li>
+            <li>
+              <NavigationMenuLink as-child>
+                <a
+                  href="/docs/installation"
+                  class="block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground"
+                >
+                  <div class="text-sm font-medium leading-none">Installation</div>
+                  <p class="line-clamp-2 text-sm leading-snug text-muted-foreground">
                     How to install dependencies and structure your app.
-            </ListItem>
-            <ListItem href="/docs/primitives/typography" title="Typography">
+                  </p>
+                </a>
+              </NavigationMenuLink>
+            </li>
+            <li>
+              <NavigationMenuLink as-child>
+                <a
+                  href="/docs/primitives/typography"
+                  class="block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground"
+                >
+                  <div class="text-sm font-medium leading-none">Typography</div>
+                  <p class="line-clamp-2 text-sm leading-snug text-muted-foreground">
                     Styles for headings, paragraphs, lists...etc
-            </ListItem>
+                  </p>
+                </a>
+              </NavigationMenuLink>
+            </li>
           </ul>
         </NavigationMenuContent>
       </NavigationMenuItem>
@@ -89,14 +118,19 @@ const components: { title: string, href: string, description: string }[] = [
         <NavigationMenuTrigger>Components</NavigationMenuTrigger>
         <NavigationMenuContent>
           <ul class="grid w-[400px] gap-3 p-4 md:w-[500px] md:grid-cols-2 lg:w-[600px] ">
-            <ListItem
-              v-for="component in components"
-              :key="component.title"
-              :title="component.title"
+            <li v-for="component in components" :key="component.title">
+              <NavigationMenuLink as-child>
+                <a
                   :href="component.href"
+                  class="block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground"
                 >
+                  <div class="text-sm font-medium leading-none">{{ component.title }}</div>
+                  <p class="line-clamp-2 text-sm leading-snug text-muted-foreground">
                     {{ component.description }}
-            </ListItem>
+                  </p>
+                </a>
+              </NavigationMenuLink>
+            </li>
           </ul>
         </NavigationMenuContent>
       </NavigationMenuItem>

apps/www/src/lib/registry/new-york/example/NavigationMenuDemoItem.vue

@@ -1,27 +0,0 @@
-<script setup lang="ts">
-import { cn } from '@/lib/utils'
-import {
-  NavigationMenuLink,
-} from '@/lib/registry/new-york/ui/navigation-menu'
-
-defineProps<{ title?: string, href?: string }>()
-</script>
-
-<template>
-  <li>
-    <NavigationMenuLink as-child>
-      <a
-        :href="href"
-        :class="cn(
-          'block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground',
-          $attrs.class ?? '',
-        )"
-      >
-        <div class="text-sm font-medium leading-none">{{ title }}</div>
-        <p class="line-clamp-2 text-sm leading-snug text-muted-foreground">
-          <slot />
-        </p>
-      </a>
-    </NavigationMenuLink>
-  </li>
-</template>