✨ Challenges

application/components/problem/list.vue

@@ -0,0 +1,34 @@
+<template>
+  <div>
+    <n-card segmented content-style="padding: 0">
+      <template #header>
+        <div>Problems</div>
+        <div class="text-xs font-normal">每天进步一点点！</div>
+      </template>
+      <n-list clickable hoverable>
+        <n-list-item v-for="item in problems" class="px-[24px]" @click="jump(item)">
+          <n-thing :title="item?.title">
+            <template #description>
+              <div class="text-xs flex gap-2">
+                <n-tag size="tiny" class="case-capital">{{ item?.type }}</n-tag>
+                <div>Published at {{ new Date(item?.created_at).toLocaleString() }}</div>
+              </div>
+            </template>
+          </n-thing>
+        </n-list-item>
+      </n-list>
+    </n-card>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { NCard, NList, NListItem, NThing, NTag } from "naive-ui";
+
+const client = useSupabaseClient();
+
+const { data: problems } = await client.from("problems").select<any, any>("*").limit(20);
+
+function jump(item: any) {
+  navigateTo(`/problems/${item.id}`)
+}
+</script>

application/components/problem/solution/program.vue

@@ -0,0 +1,11 @@
+<template>
+
+</template>
+
+<script setup lang="ts">
+
+</script>
+
+<style scoped>
+
+</style>