File size: 1,782 Bytes
be99f83 7a2a8fe be99f83 8441328 be99f83 13080d4 8441328 7a2a8fe be99f83 8441328 be99f83 8441328 be99f83 7a2a8fe 8441328 be99f83 7a2a8fe be99f83 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 |
import { formatDate } from '@/utils/date';
import { CalendarOutlined } from '@ant-design/icons';
import { Card, Typography } from 'antd';
import { useNavigate } from 'umi';
import OperateDropdown from '@/components/operate-dropdown';
import { useDeleteFlow } from '@/hooks/flow-hooks';
import { IFlow } from '@/interfaces/database/flow';
import { useCallback } from 'react';
import GraphAvatar from '../graph-avatar';
import styles from './index.less';
interface IProps {
item: IFlow;
}
const FlowCard = ({ item }: IProps) => {
const navigate = useNavigate();
const { deleteFlow } = useDeleteFlow();
const removeFlow = useCallback(() => {
return deleteFlow([item.id]);
}, [deleteFlow, item]);
const handleCardClick = () => {
navigate(`/flow/${item.id}`);
};
return (
<Card className={styles.card} onClick={handleCardClick}>
<div className={styles.container}>
<div className={styles.content}>
<GraphAvatar avatar={item.avatar}></GraphAvatar>
<OperateDropdown deleteItem={removeFlow}></OperateDropdown>
</div>
<div className={styles.titleWrapper}>
<Typography.Title
className={styles.title}
ellipsis={{ tooltip: item.title }}
>
{item.title}
</Typography.Title>
<p>{item.description}</p>
</div>
<div className={styles.footer}>
<div className={styles.bottom}>
<div className={styles.bottomLeft}>
<CalendarOutlined className={styles.leftIcon} />
<span className={styles.rightText}>
{formatDate(item.update_time)}
</span>
</div>
</div>
</div>
</div>
</Card>
);
};
export default FlowCard;
|