add script filter

JarkaP · Oct 26, 2024 · 13f511c · 13f511c
1 parent 96a526b
commit 13f511c
Showing 1 changed file with 35 additions and 8 deletions.
diff --git a/src/pages/index.astro b/src/pages/index.astro
@@ -5,38 +5,65 @@ import { getCollection } from 'astro:content'
 const glyphs = (await getCollection('glyphs')).sort(
     (a, b) => a.data.unicodeDecimal - b.data.unicodeDecimal
 )
+
+const scripts = [...new Set(glyphs.map((glyph) => glyph.data.script))]
 ---
 
 <Layout title="O glyphs">
-    <table>
+    <div class="mb-8 flex w-full justify-end">
+        <select
+            id="scriptFilter"
+            aria-label="Script"
+            class="rounded-md border border-stone-300 bg-white px-3 focus:border-stone-700 focus:outline-none focus:ring-2 focus:ring-stone-700 sm:text-sm"
+        >
+            <option value="">all</option>
+            {scripts.map((script) => <option value={script}>{script}</option>)}
+        </select>
+    </div>
+    <table id="glyphs">
         <thead>
             <tr>
-                <th class="xs:text-lg text-sm md:text-xl lg:text-2xl">Name</th>
-                <th class="xs:text-lg text-sm md:text-xl lg:text-2xl">Glyph</th>
-                <th class="xs:text-lg text-sm md:text-xl lg:text-2xl">Script</th>
+                <th class="text-sm xs:text-lg md:text-xl lg:text-2xl">Name</th>
+                <th class="text-sm xs:text-lg md:text-xl lg:text-2xl">Glyph</th>
+                <th class="text-sm xs:text-lg md:text-xl lg:text-2xl">Script</th>
             </tr>
         </thead>
         <tbody>
             {
                 glyphs.map((glyph) => (
-                    <tr class="relative">
-                        <td class="xs:text-lg text-sm md:text-xl lg:text-2xl">
+                    <tr class="relative" data-script={glyph.data.script}>
+                        <td class="text-sm xs:text-lg md:text-xl lg:text-2xl">
                             <a
                                 href={`/glyphs/${glyph.data.unicodeDecimal}`}
                                 class="no-underline after:absolute after:inset-0"
                             >
                                 {glyph.data.title}
                             </a>
                         </td>
-                        <td class="xs:text-lg text-sm md:text-xl lg:text-2xl">
+                        <td class="text-sm xs:text-lg md:text-xl lg:text-2xl">
                             {glyph.data.upperCase}
                         </td>
-                        <td class="xs:text-lg text-sm md:text-xl lg:text-2xl">
+                        <td class="text-sm xs:text-lg md:text-xl lg:text-2xl">
                             {glyph.data.script}
                         </td>
                     </tr>
                 ))
             }
         </tbody>
     </table>
+
+    <script>
+        // @ts-nocheck
+
+        document.getElementById('scriptFilter').addEventListener('change', () => {
+            const script = document.getElementById('scriptFilter').value
+            document.querySelectorAll('#glyphs tbody tr').forEach((row) => {
+                if (script === '' || row.dataset.script === script) {
+                    row.style.display = 'table-row'
+                } else {
+                    row.style.display = 'none'
+                }
+            })
+        })
+    </script>
 </Layout>