31 lines
978 B
Vue
31 lines
978 B
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 as any[])" class="px-[24px]">
|
|||
|
|
<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(`*`).limit(20);
|
|||
|
|
</script>
|