From fda8415efb140f0da44c26624513f630ce44fcd9 Mon Sep 17 00:00:00 2001
From: pompydev <pompydev@proton.me>
Date: Thu, 20 Mar 2025 21:02:51 +0900
Subject: [PATCH] feat(list): add Main component

---
 apps/list/components/Main.vue        |  5 ++
 apps/list/pages/content-creators.vue | 84 ++++++++++++++--------------
 apps/list/pages/index.vue            |  8 ++-
 3 files changed, 53 insertions(+), 44 deletions(-)
 create mode 100644 apps/list/components/Main.vue

diff --git a/apps/list/components/Main.vue b/apps/list/components/Main.vue
new file mode 100644
index 0000000..98fb5bc
--- /dev/null
+++ b/apps/list/components/Main.vue
@@ -0,0 +1,5 @@
+<template>
+    <main class="mx-auto max-w-screen-mobile px-2">
+        <slot />
+    </main>
+</template>
diff --git a/apps/list/pages/content-creators.vue b/apps/list/pages/content-creators.vue
index e53f4dc..2acb6cd 100644
--- a/apps/list/pages/content-creators.vue
+++ b/apps/list/pages/content-creators.vue
@@ -45,47 +45,49 @@ const t = useVueTable({
 <template>
     <Header highlight="Content creators" />
 
-    <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"
+    <Main>
+        <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"
                     >
-                        <FlexRender
-                            v-if="!header.isPlaceholder"
-                            :render="header.column.columnDef.header"
-                            :props="header.getContext()"
-                        />
-                    </th>
-                </tr>
-            </thead>
+                        <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>
+                <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>
+    </Main>
 </template>
diff --git a/apps/list/pages/index.vue b/apps/list/pages/index.vue
index ca0912a..a564422 100644
--- a/apps/list/pages/index.vue
+++ b/apps/list/pages/index.vue
@@ -1,7 +1,9 @@
 <template>
     <Header highlight="anything" />
 
-    <NuxtLink href="/content-creators" class="underline">
-        Content Creators
-    </NuxtLink>
+    <Main>
+        <NuxtLink href="/content-creators" class="underline">
+            Content Creators
+        </NuxtLink>
+    </Main>
 </template>