1,440th Commit

Shyam-Chen · Apr 27, 2024 · 71a9bcb · 71a9bcb
1 parent da09bd3
commit 71a9bcb
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 0 deletions.
diff --git a/app/src/layouts/baseline/links-list.ts b/app/src/layouts/baseline/links-list.ts
@@ -104,6 +104,7 @@ const links = [
       { name: 'Chip', to: '/data-display/chip' },
       { name: 'Infinite Scroll', to: '/data-display/infinite-scroll' },
       { name: 'Iterator', to: '/data-display/iterator' },
+      { name: 'Listbox', to: '/data-display/listbox' },
       { name: 'Popover', to: '/data-display/popover' },
       {
         name: 'Table',

diff --git a/app/src/routes/(backstage)/(library)/data-display/listbox/+page.vue b/app/src/routes/(backstage)/(library)/data-display/listbox/+page.vue
@@ -0,0 +1,42 @@
+<script lang="ts" setup>
+import { XBreadcrumb, XCard, XListbox } from '@x/ui';
+</script>
+
+<template>
+  <XBreadcrumb :items="[{ text: 'Library' }, { text: 'Data Display' }, { text: 'Listbox' }]" />
+
+  <h1 class="text-4xl font-extrabold my-4">Listbox</h1>
+
+  <section class="my-8">
+    <h2 class="text-3xl font-bold my-4">Basic</h2>
+
+    <XCard>
+      <XListbox>
+        <XListbox.Item class="flex items-center gap-2">
+          <div class="i-material-symbols-arrow-circle-up-outline-rounded size-5"></div>
+          <div>Top</div>
+        </XListbox.Item>
+        <XListbox.Item class="flex items-center gap-2">
+          <div class="i-material-symbols-arrow-circle-right-outline-rounded size-5"></div>
+          <div>Right</div>
+        </XListbox.Item>
+        <XListbox.Item class="flex items-center gap-2">
+          <div class="i-material-symbols-arrow-circle-down-outline-rounded size-5"></div>
+          <div>Bottom</div>
+        </XListbox.Item>
+        <XListbox.Item class="flex items-center gap-2">
+          <div class="i-material-symbols-arrow-circle-left-outline-rounded size-5"></div>
+          <div>Left</div>
+        </XListbox.Item>
+      </XListbox>
+    </XCard>
+  </section>
+
+  <section class="my-8">
+    <h2 class="text-3xl font-bold my-4 pt-6">...</h2>
+
+    <XCard>
+      <!-- ... -->
+    </XCard>
+  </section>
+</template>
diff --git a/app/src/routes/(backstage)/(library)/overview/+page.vue b/app/src/routes/(backstage)/(library)/overview/+page.vue
@@ -90,6 +90,7 @@ import { XBreadcrumb } from '@x/ui';
       <RouterLink to="/data-display/chip" class="card">Chip</RouterLink>
       <RouterLink to="/data-display/infinite-scroll" class="card">Infinite Scroll</RouterLink>
       <RouterLink to="/data-display/iterator" class="card">Iterator</RouterLink>
+      <RouterLink to="/data-display/listbox" class="card">Listbox</RouterLink>
       <RouterLink to="/data-display/popover" class="card">Popover</RouterLink>
       <RouterLink to="/data-display/table/dynamic-table" class="card">Dynamic Table</RouterLink>
       <RouterLink to="/data-display/table/static-table" class="card">Static Table</RouterLink>