index.vue

<script setup lang="ts">
const groups = galleryGroupedByCategory()
const query = ref('')

const filtered = computed(() => {
  const term = query.value.trim().toLowerCase()
  if (!term) return groups
  return groups
    .map((g) => ({
      category: g.category,
      entries: g.entries.filter((e) => e.name.toLowerCase().includes(term)),
    }))
    .filter((g) => g.entries.length > 0)
})

const total = galleryEntries.length
</script>

<template>
  <div class="mx-auto flex max-w-6xl flex-col gap-8">
    <div class="flex flex-col gap-1">
      <h1 class="text-2xl font-semibold tracking-tight">Components</h1>
      <p class="text-sm text-muted">
        {{ total }} Nuxt UI components, themed with the Motif (UniFi) palette.
      </p>
    </div>

    <UInput
      v-model="query"
      icon="i-material-symbols-search"
      placeholder="Search components"
      class="max-w-sm"
      autofocus
    />

    <div v-for="group in filtered" :key="group.category" class="flex flex-col gap-3">
      <h2 class="text-xs font-semibold uppercase tracking-wide text-muted">
        {{ group.category }}
      </h2>
      <div class="grid grid-cols-2 gap-3 sm:grid-cols-3 lg:grid-cols-4">
        <NuxtLink
          v-for="entry in group.entries"
          :key="entry.slug"
          :to="`/components/${entry.slug}`"
          class="group flex items-center justify-between rounded-lg border border-default bg-default px-4 py-3 text-sm font-medium transition-colors hover:border-primary/40 hover:bg-elevated"
        >
          <span>{{ entry.name }}</span>
          <UIcon
            name="i-material-symbols-chevron-right"
            class="size-4 text-dimmed transition-colors group-hover:text-primary"
          />
        </NuxtLink>
      </div>
    </div>

    <div v-if="filtered.length === 0" class="text-sm text-muted">
      No components match "{{ query }}".
    </div>
  </div>
</template>