From 51e19655353f8c0f9a382a284483049a7dbe96de Mon Sep 17 00:00:00 2001
From: Sam Carlton <sam@sam.lc>
Date: Mon, 21 Sep 2020 18:02:22 -0500
Subject: [PATCH] Add kind page for sections

---
 pages/kind/_slug.vue | 56 ++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 56 insertions(+)
 create mode 100644 pages/kind/_slug.vue

diff --git a/pages/kind/_slug.vue b/pages/kind/_slug.vue
new file mode 100644
index 0000000..44874e1
--- /dev/null
+++ b/pages/kind/_slug.vue
@@ -0,0 +1,56 @@
+<template>
+    <section class="container py-24">
+        <div class="flex flex-col items-center">
+            <h1 class="title text-3xl md:text-5xl font-hairline leading-tight text-center pb-4">
+                {{ section.label }} that are reported to support Apple Silicon
+            </h1>
+            <!-- <h2 class="subtitle md:text-xl font-light text-center">
+                {{ section.label }} that are reported to support Apple Silicon
+            </h2> -->
+
+            <Search
+                :app-list="sectionAppList"
+                :quick-buttons="[]"
+            />
+
+            <LinkButton
+                href="https://github.com/ThatGuySam/doesitarm/issues"
+            >
+                Request an App
+            </LinkButton>
+        </div>
+    </section>
+</template>
+
+<script>
+import Search from '~/components/search.vue'
+import LinkButton from '~/components/link-button.vue'
+
+import appList from '~/assets/app-list.json'
+
+export default {
+    async asyncData ({ params: { slug } }) {
+
+        return {
+            slug,
+            app: appList.find(app => (app.slug === slug))
+        }
+    },
+    components: {
+        Search,
+        LinkButton
+    },
+    computed: {
+        section() {
+            return appList.find(app => {
+                return app.section.slug === this.slug
+            }).section
+        },
+        sectionAppList() {
+            return appList.filter(app => {
+                return app.section.slug === this.slug
+            })
+        },
+    }
+}
+</script>