gallery.ts

// Auto-generated registry of the Nuxt UI components showcased in the gallery.
// Each entry maps to app/components/showcase/<name>.vue (its themed demo).
export interface GalleryEntry {
  name: string
  slug: string
  category: string
}

export const galleryCategories = ["Elements","Forms","Data","Navigation","Feedback","Overlays","Layout","Page","Dashboard","Chat","Content"] as const

export const galleryEntries: GalleryEntry[] = [
  { name: 'Avatar', slug: 'avatar', category: 'Elements' },
  { name: 'AvatarGroup', slug: 'avatar-group', category: 'Elements' },
  { name: 'Badge', slug: 'badge', category: 'Elements' },
  { name: 'Button', slug: 'button', category: 'Elements' },
  { name: 'Chip', slug: 'chip', category: 'Elements' },
  { name: 'Icon', slug: 'icon', category: 'Elements' },
  { name: 'Kbd', slug: 'kbd', category: 'Elements' },
  { name: 'Link', slug: 'link', category: 'Elements' },
  { name: 'Marquee', slug: 'marquee', category: 'Elements' },
  { name: 'Progress', slug: 'progress', category: 'Elements' },
  { name: 'Separator', slug: 'separator', category: 'Elements' },
  { name: 'Skeleton', slug: 'skeleton', category: 'Elements' },
  { name: 'User', slug: 'user', category: 'Elements' },
  { name: 'AuthForm', slug: 'auth-form', category: 'Forms' },
  { name: 'Calendar', slug: 'calendar', category: 'Forms' },
  { name: 'Checkbox', slug: 'checkbox', category: 'Forms' },
  { name: 'CheckboxGroup', slug: 'checkbox-group', category: 'Forms' },
  { name: 'ColorPicker', slug: 'color-picker', category: 'Forms' },
  { name: 'Editor', slug: 'editor', category: 'Forms' },
  { name: 'FieldGroup', slug: 'field-group', category: 'Forms' },
  { name: 'FileUpload', slug: 'file-upload', category: 'Forms' },
  { name: 'Form', slug: 'form', category: 'Forms' },
  { name: 'FormField', slug: 'form-field', category: 'Forms' },
  { name: 'Input', slug: 'input', category: 'Forms' },
  { name: 'InputDate', slug: 'input-date', category: 'Forms' },
  { name: 'InputMenu', slug: 'input-menu', category: 'Forms' },
  { name: 'InputNumber', slug: 'input-number', category: 'Forms' },
  { name: 'InputTags', slug: 'input-tags', category: 'Forms' },
  { name: 'InputTime', slug: 'input-time', category: 'Forms' },
  { name: 'Listbox', slug: 'listbox', category: 'Forms' },
  { name: 'PinInput', slug: 'pin-input', category: 'Forms' },
  { name: 'RadioGroup', slug: 'radio-group', category: 'Forms' },
  { name: 'Select', slug: 'select', category: 'Forms' },
  { name: 'SelectMenu', slug: 'select-menu', category: 'Forms' },
  { name: 'Slider', slug: 'slider', category: 'Forms' },
  { name: 'Switch', slug: 'switch', category: 'Forms' },
  { name: 'Textarea', slug: 'textarea', category: 'Forms' },
  { name: 'Accordion', slug: 'accordion', category: 'Data' },
  { name: 'Carousel', slug: 'carousel', category: 'Data' },
  { name: 'Table', slug: 'table', category: 'Data' },
  { name: 'Timeline', slug: 'timeline', category: 'Data' },
  { name: 'Tree', slug: 'tree', category: 'Data' },
  { name: 'Breadcrumb', slug: 'breadcrumb', category: 'Navigation' },
  { name: 'CommandPalette', slug: 'command-palette', category: 'Navigation' },
  { name: 'ContextMenu', slug: 'context-menu', category: 'Navigation' },
  { name: 'DropdownMenu', slug: 'dropdown-menu', category: 'Navigation' },
  { name: 'NavigationMenu', slug: 'navigation-menu', category: 'Navigation' },
  { name: 'Pagination', slug: 'pagination', category: 'Navigation' },
  { name: 'Stepper', slug: 'stepper', category: 'Navigation' },
  { name: 'Tabs', slug: 'tabs', category: 'Navigation' },
  { name: 'Alert', slug: 'alert', category: 'Feedback' },
  { name: 'Banner', slug: 'banner', category: 'Overlays' },
  { name: 'Drawer', slug: 'drawer', category: 'Overlays' },
  { name: 'Modal', slug: 'modal', category: 'Overlays' },
  { name: 'Popover', slug: 'popover', category: 'Overlays' },
  { name: 'Slideover', slug: 'slideover', category: 'Overlays' },
  { name: 'Toast', slug: 'toast', category: 'Overlays' },
  { name: 'Tooltip', slug: 'tooltip', category: 'Overlays' },
  { name: 'Card', slug: 'card', category: 'Layout' },
  { name: 'Collapsible', slug: 'collapsible', category: 'Layout' },
  { name: 'Container', slug: 'container', category: 'Layout' },
  { name: 'Empty', slug: 'empty', category: 'Layout' },
  { name: 'Footer', slug: 'footer', category: 'Layout' },
  { name: 'FooterColumns', slug: 'footer-columns', category: 'Layout' },
  { name: 'Header', slug: 'header', category: 'Layout' },
  { name: 'ScrollArea', slug: 'scroll-area', category: 'Layout' },
  { name: 'Sidebar', slug: 'sidebar', category: 'Layout' },
  { name: 'Page', slug: 'page', category: 'Page' },
  { name: 'PageAnchors', slug: 'page-anchors', category: 'Page' },
  { name: 'PageAside', slug: 'page-aside', category: 'Page' },
  { name: 'PageBody', slug: 'page-body', category: 'Page' },
  { name: 'PageCard', slug: 'page-card', category: 'Page' },
  { name: 'PageColumns', slug: 'page-columns', category: 'Page' },
  { name: 'PageCTA', slug: 'page-cta', category: 'Page' },
  { name: 'PageFeature', slug: 'page-feature', category: 'Page' },
  { name: 'PageGrid', slug: 'page-grid', category: 'Page' },
  { name: 'PageHeader', slug: 'page-header', category: 'Page' },
  { name: 'PageHero', slug: 'page-hero', category: 'Page' },
  { name: 'PageLinks', slug: 'page-links', category: 'Page' },
  { name: 'PageList', slug: 'page-list', category: 'Page' },
  { name: 'PageLogos', slug: 'page-logos', category: 'Page' },
  { name: 'PageSection', slug: 'page-section', category: 'Page' },
  { name: 'DashboardGroup', slug: 'dashboard-group', category: 'Dashboard' },
  { name: 'DashboardNavbar', slug: 'dashboard-navbar', category: 'Dashboard' },
  { name: 'DashboardPanel', slug: 'dashboard-panel', category: 'Dashboard' },
  { name: 'DashboardSearch', slug: 'dashboard-search', category: 'Dashboard' },
  { name: 'DashboardSidebar', slug: 'dashboard-sidebar', category: 'Dashboard' },
  { name: 'DashboardToolbar', slug: 'dashboard-toolbar', category: 'Dashboard' },
  { name: 'ChatMessage', slug: 'chat-message', category: 'Chat' },
  { name: 'ChatMessages', slug: 'chat-messages', category: 'Chat' },
  { name: 'ChatPalette', slug: 'chat-palette', category: 'Chat' },
  { name: 'ChatPrompt', slug: 'chat-prompt', category: 'Chat' },
  { name: 'ChatPromptSubmit', slug: 'chat-prompt-submit', category: 'Chat' },
  { name: 'ChatReasoning', slug: 'chat-reasoning', category: 'Chat' },
  { name: 'ChatShimmer', slug: 'chat-shimmer', category: 'Chat' },
  { name: 'ChatTool', slug: 'chat-tool', category: 'Chat' },
  { name: 'BlogPost', slug: 'blog-post', category: 'Content' },
  { name: 'BlogPosts', slug: 'blog-posts', category: 'Content' },
  { name: 'ChangelogVersion', slug: 'changelog-version', category: 'Content' },
  { name: 'ChangelogVersions', slug: 'changelog-versions', category: 'Content' },
  { name: 'PricingPlan', slug: 'pricing-plan', category: 'Content' },
  { name: 'PricingPlans', slug: 'pricing-plans', category: 'Content' },
  { name: 'PricingTable', slug: 'pricing-table', category: 'Content' },
]

// Vite glob of every showcase SFC; used to lazily resolve a demo by component name.
const showcaseModules = import.meta.glob('../components/showcase/*.vue')

export function showcaseLoaderFor(name: string) {
  return showcaseModules[`../components/showcase/${name}.vue`]
}

export function galleryEntryBySlug(slug: string): GalleryEntry | undefined {
  return galleryEntries.find((e) => e.slug === slug)
}

export function galleryGroupedByCategory(): { category: string, entries: GalleryEntry[] }[] {
  return galleryCategories
    .map((category) => ({ category, entries: galleryEntries.filter((e) => e.category === category) }))
    .filter((g) => g.entries.length > 0)
}