35 lines
1.0 KiB
Vue
35 lines
1.0 KiB
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>
|