refactor(ui): better ui demo preview menu (#664)

src/ui/demo/demo-home.page.vue

@@ -4,10 +4,8 @@ import { demoRoutes } from './demo.routes';
 
 <template>
   <div grid grid-cols-5 gap-2>
-    <c-card v-for="{ name } of demoRoutes" :key="name" :title="String(name)">
-      <c-button :to="{ name }">
-        {{ name }}
-      </c-button>
-    </c-card>
+    <c-button v-for="{ name } of demoRoutes" :key="name" :to="{ name }">
+      {{ name }}
+    </c-button>
   </div>
 </template>

src/ui/demo/demo-wrapper.vue

@@ -12,7 +12,7 @@ const componentName = computed(() => _.startCase(String(route.name).replace(/^c-
     <h1>c-lib components</h1>
 
     <div flex>
-      <div w-30 b-r b-gray b-op-10 b-r-solid pr-4>
+      <div w-200px b-r b-gray b-op-10 b-r-solid pr-4>
         <c-button
           v-for="{ name } of demoRoutes"
           :key="name"
@@ -20,6 +20,7 @@ const componentName = computed(() => _.startCase(String(route.name).replace(/^c-
           :to="{ name }"
           w-full
           important:justify-start
+          important:text-left
           :type="route.name === name ? 'primary' : 'default'"
         >
           {{ name }}

src/ui/demo/demo.routes.ts

@@ -1,16 +1,16 @@
 import type { RouteRecordRaw } from 'vue-router';
 import DemoHome from './demo-home.page.vue';
 
-const demoPages = import.meta.glob('../*/*.demo.vue');
+const demoPages = import.meta.glob('../*/*.demo.vue', { eager: true });
 
-export const demoRoutes = Object.keys(demoPages).map((path) => {
-  const [, , fileName] = path.split('/');
-  const name = fileName.split('.').shift();
+export const demoRoutes = Object.keys(demoPages).map((demoComponentPath) => {
+  const [, , fileName] = demoComponentPath.split('/');
+  const demoComponentName = fileName.split('.').shift();
 
   return {
-    path: name,
-    name,
-    component: () => import(/* @vite-ignore */ path),
+    path: demoComponentName,
+    name: demoComponentName,
+    component: () => import(/* @vite-ignore */ demoComponentPath),
   } as RouteRecordRaw;
 });