const routes = [
    // === CONTENT & LAYOUT ===
    {
      name: 'typography',
      path: '/typography',
      component: () => import('@/views/TypographyPage.vue'),
    },
    {
      name: 'cards',
      path: '/cards',
      component: () => import('@/views/CardsPage.vue'),
    },
    {
      name: 'tables',
      path: '/tables',
      component: () => import('@/views/TablesPage.vue'),
    },
    {
      name: 'lists',
      path: '/lists',
      component: () => import('@/views/ListsPage.vue'),
    },
    {
      name: 'avatars-dividers',
      path: '/avatars-dividers',
      component: () => import('@/views/AvatarsDividersPage.vue'),
    },
    
    // === NAVIGATION ===
    {
      name: 'menus',
      path: '/menus',
      component: () => import('@/views/MenusPage.vue'),
    },
    {
      name: 'tabs',
      path: '/tabs',
      component: () => import('@/views/TabsPage.vue'),
    },
    {
      name: 'breadcrumbs',
      path: '/breadcrumbs',
      component: () => import('@/views/BreadcrumbsPage.vue'),
    },
    {
      name: 'steppers',
      path: '/steppers',
      component: () => import('@/views/SteppersPage.vue'),
    },
    
    // === FORM INPUTS ===
    {
      name: 'inputs',
      path: '/inputs',
      component: () => import('@/views/InputsPage.vue'),
    },
    {
      name: 'buttons',
      path: '/buttons',
      component: () => import('@/views/ButtonsPage.vue'),
    },
    
    // === FEEDBACK & INDICATORS ===
    {
      name: 'alerts',
      path: '/alerts',
      component: () => import('@/views/AlertsPage.vue'),
    },
    {
      name: 'snackbars',
      path: '/snackbars',
      component: () => import('@/views/SnackbarsPage.vue'),
    },
    {
      name: 'dialogs',
      path: '/dialogs',
      component: () => import('@/views/DialogsPage.vue'),
    },
    {
      name: 'progress',
      path: '/progress',
      component: () => import('@/views/ProgressPage.vue'),
    },
    {
      name: 'tooltips',
      path: '/tooltips',
      component: () => import('@/views/TooltipsPage.vue'),
    },
    
    // === DATA DISPLAY ===
    {
      name: 'chips',
      path: '/chips',
      component: () => import('@/views/ChipsPage.vue'),
    },
    {
      name: 'badges',
      path: '/badges',
      component: () => import('@/views/BadgesPage.vue'),
    },
    {
      name: 'expansion-panels',
      path: '/expansion-panels',
      component: () => import('@/views/ExpansionPanelsPage.vue'),
    },
  ]
  
  export default routes