Add categories index page

src/pages/categories.astro

@@ -0,0 +1,76 @@
+---
+// Component Script:
+// You can write any JavaScript/TypeScript that you'd like here.
+// It will run during the build, but never in the browser.
+// All variables are available to use in the HTML template below.
+
+// Full Astro Component Syntax:
+// https://docs.astro.build/core-concepts/astro-components/
+
+import { DoesItAPI } from '~/helpers/api/client.js'
+
+import Layout from '../layouts/default.astro'
+
+const kindIndex = await DoesItAPI.kind.index.get()
+
+const kinds = Object.values( kindIndex )
+---
+<Layout
+	headOptions={ {
+        title: 'Categories of App Support lists for Apple Silicon',
+        description: 'List of compatibility apps and games for Apple Silicon and the Apple M1 Pro and M1 Max Processors including performance reports and benchmarks',
+        // meta,
+        // link,
+        // structuredData: this.structuredData,
+
+        // domain,
+        pathname: '/categories',
+    } }
+>
+
+    <main class="container py-24">
+        <div class="flex flex-col">
+            <h1 class="title text-2xl leading-tight mb-6">
+                Categories
+            </h1>
+
+            <div class="line-separator border-white border-t-2 mb-12" />
+
+            <!-- categoryList: {{ categoryList }} -->
+
+            <ul class="categories-list space-y-3">
+                { kinds.map( category => (
+                    <li
+                        class="relative"
+                    >
+                        <a
+                            href={ `/kind/${ category.kindName }` }
+                            class="flex justify-start items-center inset-x-0 text-3xl md:text-4xl hover:bg-darkest border-2 border-white border-opacity-0 hover:border-opacity-50 focus:outline-none focus:bg-gray-50 duration-300 ease-in-out rounded-lg space-x-3 -mx-5 px-5 md:pr-64 py-3"
+                            style="transition-property: border;"
+                        >
+                            <div class="font-hairline">
+                                <h2>{ category.label }</h2>
+                                <div class="text-xs opacity-75 mb-3">{ category.description }</div>
+                            </div>
+                            <div>➔</div>
+                        </a>
+
+                    </li>
+                )) }
+            </ul>
+
+        </div>
+    </main>
+
+	<!--
+
+	You can also use imported framework components directly in your markup!
+
+	Note: by default, these components are NOT interactive on the client.
+	The `:visible` directive tells Astro to make it interactive.
+
+	See https://docs.astro.build/core-concepts/component-hydration/
+
+	-->
+
+</Layout>