Components to quickly render object lists

nginx/vue/src/components/quick/LinkTable.vue

@@ -0,0 +1,23 @@
+<script setup>
+import { computed } from "vue";
+
+const props = defineProps({
+    linkArr: {
+        type: Array,
+        required: true,
+    },
+});
+
+const keys = ["name", "link"];
+</script>
+
+<template>
+    <a
+        class="bdr-2"
+        v-for="(row, rowIndex) in linkArr"
+        :key="rowIndex"
+        :href="row.link"
+    >
+        <h2>{{ row.name }}</h2>
+    </a>
+</template>

nginx/vue/src/components/quick/ObjectTable.vue

@@ -0,0 +1,43 @@
+<script setup>
+import { computed } from "vue";
+
+const props = defineProps({
+    objArr: {
+        type: Array,
+        required: true,
+    },
+});
+
+const resolvedColumns = computed(() => {
+    const keys = new Set();
+
+    for (const obj of props.objArr) {
+        Object.keys(obj).forEach((key) => keys.add(key));
+    }
+
+    return Array.from(keys).map((key) => ({
+        key,
+        label: key,
+    }));
+});
+</script>
+
+<template>
+    <table>
+        <thead>
+            <tr>
+                <th v-for="col in resolvedColumns" :key="col.key">
+                    {{ col.label }}
+                </th>
+            </tr>
+        </thead>
+
+        <tbody>
+            <tr v-for="(row, rowIndex) in objArr" :key="rowIndex">
+                <td v-for="col in resolvedColumns" :key="col.key">
+                    {{ row[col.key] ?? "" }}
+                </td>
+            </tr>
+        </tbody>
+    </table>
+</template>

nginx/vue/src/components/quick/RouterTable.vue

@@ -0,0 +1,23 @@
+<script setup>
+import { computed } from "vue";
+
+const props = defineProps({
+    linkArr: {
+        type: Array,
+        required: true,
+    },
+});
+
+const keys = ["name", "link"];
+</script>
+
+<template>
+    <RouterLink
+        class="bdr-2"
+        v-for="(row, rowIndex) in linkArr"
+        :key="rowIndex"
+        :to="row.link"
+    >
+        <h2>{{ row.name }}</h2>
+    </RouterLink>
+</template>

nginx/vue/src/components/quick/VideoTable.vue

@@ -0,0 +1,30 @@
+<script setup>
+import { computed } from "vue";
+
+const props = defineProps({
+    sourceArr: {
+        type: Array,
+        required: true,
+    },
+});
+
+function sourceType(link) {
+    return "video/" + link.split(".").pop();
+}
+
+const keys = ["name", "link"];
+</script>
+
+<template>
+    <video
+        v-for="(source, rowIndex) in sourceArr"
+        :key="rowIndex"
+        class="bdr-1"
+        width="300"
+        height="400"
+        controls
+        preload="none"
+    >
+        <source :src="source.link" :type="sourceType(source.link)" />
+    </video>
+</template>

nginx/vue/src/components/quick/Wip.vue

@@ -0,0 +1,11 @@
+<template>
+    <div class="a4page-portrait bdr-1 flex-col relative scroll-y">
+        <RouterLink to="/" class="bdr-2">
+            <img src="/img/memes/epic.jpeg" />
+        </RouterLink>
+        <h1>Click her, she will take you home</h1>
+        <span style="height: 100px"></span>
+        <h1>WIP</h1>
+        <h4>Sorry for taking you here</h4>
+    </div>
+</template>