rename rank.pompy.dev -> list.pompy.dev

apps/list/pages/content-creators.vue

@@ -0,0 +1,87 @@
+<script setup lang="ts">
+import {
+    FlexRender,
+    getCoreRowModel,
+    useVueTable,
+    createColumnHelper,
+} from "@tanstack/vue-table"
+
+useHead({
+    title: "Content creators",
+})
+
+type ContentCreator = {
+    channelId: string
+    name: string
+    subscribers: number
+}
+const _contentCreators: ContentCreator[] = [
+    {
+        channelId: "asdf",
+        name: "Channel A",
+        subscribers: 9999,
+    },
+]
+
+const columnHelper = createColumnHelper<ContentCreator>()
+const contentCreators = ref(_contentCreators)
+const t = useVueTable({
+    get data() {
+        return contentCreators.value
+    },
+    columns: [
+        columnHelper.accessor("name", {
+            id: "channelId",
+            header: "Name",
+        }),
+        columnHelper.accessor("subscribers", {
+            header: "Subscribers",
+        }),
+    ],
+    getCoreRowModel: getCoreRowModel(),
+})
+</script>
+
+<template>
+    <h1 class="text-4xl font-black">pomp's biased and opinionated list of Content creators</h1>
+    <NuxtLink href="/" class="underline">Back</NuxtLink>
+    <div class="p-2">
+        <table class="border">
+            <thead>
+                <tr
+                    class="border"
+                    v-for="headerGroup in t.getHeaderGroups()"
+                    :key="headerGroup.id"
+                >
+                    <th
+                        class="border p-1"
+                        v-for="header in headerGroup.headers"
+                        :key="header.id"
+                        :colSpan="header.colSpan"
+                    >
+                        <FlexRender
+                            v-if="!header.isPlaceholder"
+                            :render="header.column.columnDef.header"
+                            :props="header.getContext()"
+                        />
+                    </th>
+                </tr>
+            </thead>
+
+            <tbody class="border">
+                <tr v-for="row in t.getRowModel().rows" :key="row.id">
+                    <td
+                        class="border p-1"
+                        v-for="cell in row.getVisibleCells()"
+                        :key="cell.id"
+                    >
+                        <FlexRender
+                            :render="cell.column.columnDef.cell"
+                            :props="cell.getContext()"
+                        />
+                    </td>
+                </tr>
+            </tbody>
+        </table>
+    </div>
+</template>

apps/list/pages/index.vue

@@ -0,0 +1,11 @@
+<template>
+    <h1 class="text-4xl font-black">
+        pomp's<br />
+        biased & opinionated<br />
+        list of
+    </h1>
+
+    <NuxtLink href="/content-creators" class="underline">
+        Content Creators
+    </NuxtLink>
+</template>