refactor(client): optimize suspense components
Signed-off-by: Noa Virellia <noa@requiem.garden>
This commit is contained in:
@@ -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 />);
|
||||
|
||||
Reference in New Issue
Block a user