refactor(client): optimize suspense components

Signed-off-by: Noa Virellia <noa@requiem.garden>
This commit is contained in:
2026-01-01 10:38:57 +08:00
committed by Asai Neko
parent 4c438cf4e4
commit b5b4bb9d66
7 changed files with 99 additions and 34 deletions

View File

@@ -2,29 +2,31 @@ import { Badge } from '@/components/ui/badge';
import { Card, CardAction, CardDescription, CardFooter, CardHeader, CardTitle } from '@/components/ui/card';
import { useUserInfo } from '@/hooks/data/useUserInfo';
import { QrDialog } from '../checkin/qr-dialog';
import { withFallback } from '../hoc/with-fallback';
import { CardSkeleton } from './card-skeleton';
export function CheckinCard() {
function CheckinCard_() {
const { data } = useUserInfo();
return (
<>
<Card className="@container/card">
<CardHeader>
<CardDescription></CardDescription>
<CardTitle className="text-2xl font-semibold tabular-nums @[250px]/card:text-3xl">
{data.checkin !== null ? '已签到' : '未签到'}
{data.checkin !== null && <span className="text-sm font-medium ml-2">{`${new Date(data.checkin).toLocaleString()}`}</span>}
</CardTitle>
<CardAction>
<Badge variant="outline">Day 1</Badge>
</CardAction>
</CardHeader>
<CardFooter className="flex-col items-start gap-1.5 text-sm">
<QrDialog
eventId="019b5bf2-90ce-75f5-93a4-a66914c2ef11"
>
</QrDialog>
</CardFooter>
</Card>
</>
<Card className="@container/card">
<CardHeader>
<CardDescription></CardDescription>
<CardTitle className="text-2xl font-semibold tabular-nums @[250px]/card:text-3xl">
{data.checkin !== null ? '已签到' : '未签到'}
{data.checkin !== null && <span className="text-sm font-medium ml-2">{`${new Date(data.checkin).toLocaleString()}`}</span>}
</CardTitle>
<CardAction>
<Badge variant="outline">Day 1</Badge>
</CardAction>
</CardHeader>
<CardFooter className="flex-col items-start gap-1.5 text-sm">
<QrDialog
eventId="019b5bf2-90ce-75f5-93a4-a66914c2ef11"
>
</QrDialog>
</CardFooter>
</Card>
);
}
export const CheckinCard = withFallback(CheckinCard_, <CardSkeleton />);