33 lines
1.2 KiB
TypeScript
33 lines
1.2 KiB
TypeScript
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';
|
|
|
|
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>
|
|
);
|
|
}
|
|
|
|
export const CheckinCard = withFallback(CheckinCard_, <CardSkeleton />);
|