60 lines
1.7 KiB
TypeScript
60 lines
1.7 KiB
TypeScript
import { Button, Card, Statistic, Typography } from "antd";
|
|
import type { IEventInfo } from "../types";
|
|
import dayjs from "dayjs";
|
|
import { CalendarOutlined, EyeOutlined } from "@ant-design/icons";
|
|
import { useCallback } from "react";
|
|
import { useNavigate } from "react-router";
|
|
|
|
interface EventCardProps {
|
|
eventInfo: IEventInfo;
|
|
}
|
|
|
|
export function EventCard(props: EventCardProps) {
|
|
const { eventInfo: e } = props;
|
|
const day = dayjs(e.startDate);
|
|
const navigate = useNavigate();
|
|
const handleView = useCallback(() => {
|
|
navigate(`/event/${e.matchId}`);
|
|
}, [e]);
|
|
const handleAddCalendar = useCallback(() => {
|
|
const url = `${window.location.origin}/calendar/event/${e.matchId}/events.ics`;
|
|
const uri = url.replace(/^http(s)?/, 'webcal');
|
|
window.open(uri);
|
|
}, [e]);
|
|
return (
|
|
<Card
|
|
key={e.matchId}
|
|
title={e.title}
|
|
style={{ width: '100%' }}
|
|
actions={[
|
|
<Button
|
|
type="link"
|
|
icon={<CalendarOutlined />}
|
|
onClick={handleAddCalendar}
|
|
>
|
|
加入日历
|
|
</Button>,
|
|
<Button
|
|
type="link"
|
|
onClick={handleView}
|
|
icon={<EyeOutlined />}
|
|
>
|
|
查看
|
|
</Button>,
|
|
]}
|
|
>
|
|
<Typography.Text type={e.isFinished ? undefined : 'success'}>{e.title}</Typography.Text>
|
|
<Statistic.Timer
|
|
type={e.isFinished ? 'countup' : 'countdown'}
|
|
value={day.toDate().getTime()}
|
|
format={`距离比赛${e.isFinished ? '结束' : '开始'}: DD 天${e.isFinished ? '' : ' HH 时'}`}
|
|
styles={{ content: e.isFinished ? { color: 'gray' } : {} }}
|
|
/>
|
|
{e.info.map(e => (
|
|
<div key={e}>
|
|
<Typography.Text type='secondary'>{e}</Typography.Text>
|
|
</div>
|
|
))}
|
|
</Card>
|
|
)
|
|
} |