45 lines
1.6 KiB
TypeScript
45 lines
1.6 KiB
TypeScript
import { useQueryClient } from '@tanstack/react-query';
|
|
import { toast } from 'sonner';
|
|
import { Badge } from '@/components/ui/badge';
|
|
import { Button } from '@/components/ui/button';
|
|
import { Card, CardAction, CardDescription, CardFooter, CardHeader, CardTitle } from '@/components/ui/card';
|
|
import { useCheckin } from '@/hooks/data/useCheckin';
|
|
import { useUserInfo } from '@/hooks/data/useUserInfo';
|
|
|
|
export function CheckinCard() {
|
|
const { mutateAsync, isPending } = useCheckin();
|
|
const { data } = useUserInfo();
|
|
const queryClient = useQueryClient();
|
|
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">
|
|
<Button
|
|
className="w-20"
|
|
onClick={() => {
|
|
mutateAsync().then(() => {
|
|
toast('签到成功');
|
|
void queryClient.invalidateQueries({ queryKey: ['userInfo'] });
|
|
}).catch((error) => {
|
|
console.error(error);
|
|
toast('签到失败');
|
|
});
|
|
}}
|
|
disabled={isPending || data.checkin !== null}
|
|
>
|
|
签到
|
|
</Button>
|
|
</CardFooter>
|
|
</Card>
|
|
);
|
|
}
|