Fuxi/application/components/problem/list.vue

<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>