From 71a9bcb835907339cf590873907824e857c239a7 Mon Sep 17 00:00:00 2001
From: Shyam-Chen <shyamchen1994@gmail.com>
Date: Sat, 27 Apr 2024 17:09:35 +0800
Subject: [PATCH] 1,440th Commit

---
 app/src/layouts/baseline/links-list.ts        |  1 +
 .../(library)/data-display/listbox/+page.vue  | 42 +++++++++++++++++++
 .../(backstage)/(library)/overview/+page.vue  |  1 +
 3 files changed, 44 insertions(+)
 create mode 100644 app/src/routes/(backstage)/(library)/data-display/listbox/+page.vue

diff --git a/app/src/layouts/baseline/links-list.ts b/app/src/layouts/baseline/links-list.ts
index e8d8a35a..d83743c7 100644
--- 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
new file mode 100644
index 00000000..df49dd95
--- /dev/null
+++ 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
index 6cc82793..a9435834 100644
--- 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>