90 lines
2.6 KiB
TypeScript
90 lines
2.6 KiB
TypeScript
import { Badge, Box, Card, Heading, Link, Stack, Text } from '@chakra-ui/react';
|
|
import { WorkingProgressStatus } from '@generated/types';
|
|
import { IconBadge } from './IconBadge';
|
|
import { WorkingProgressStatusBadge } from './WorkingProgressStatusBadge';
|
|
import { WorkingRatingBadge } from './WorkingRatingBadge';
|
|
|
|
export interface WorkingCardProps {
|
|
id: string;
|
|
title: string;
|
|
description: string;
|
|
author: { id: string; username: string };
|
|
progressStatus: WorkingProgressStatus;
|
|
updatedAt: string;
|
|
chaptersTotal: number;
|
|
wordsTotal: number;
|
|
ratingTotal: number;
|
|
reviewsTotal: number;
|
|
}
|
|
|
|
export function WorkingListCard({
|
|
title,
|
|
description,
|
|
author,
|
|
progressStatus,
|
|
updatedAt,
|
|
chaptersTotal,
|
|
wordsTotal,
|
|
ratingTotal,
|
|
reviewsTotal
|
|
}: WorkingCardProps) {
|
|
return (
|
|
<Card.Root width="100%" variant="elevated">
|
|
<Card.Body>
|
|
<Stack>
|
|
<Stack direction="row" justifyContent="space-between">
|
|
<Link>
|
|
<Heading size="lg">{title}</Heading>
|
|
</Link>
|
|
|
|
<Stack direction="row" justifyContent="center" alignItems="center">
|
|
<WorkingRatingBadge ratingTotal={ratingTotal} />
|
|
<IconBadge backgroundColor="orange.400" iconClass="nf nf-oct-comment">
|
|
<Text>{reviewsTotal}</Text>
|
|
</IconBadge>
|
|
<WorkingProgressStatusBadge progressStatus={progressStatus} />
|
|
</Stack>
|
|
</Stack>
|
|
|
|
<Stack>
|
|
<Stack direction="row">
|
|
<Text>by:</Text>
|
|
<Link>{author.username}</Link>
|
|
</Stack>
|
|
|
|
<Stack direction="row">
|
|
<Box>
|
|
<Badge size="md" variant="solid">
|
|
<Stack direction="row">
|
|
<Text>last updated:</Text>
|
|
<Text>{updatedAt}</Text>
|
|
</Stack>
|
|
</Badge>
|
|
</Box>
|
|
<Box>
|
|
<Badge size="md" variant="solid">
|
|
<Stack direction="row">
|
|
<Text>chapters:</Text>
|
|
<Text>{chaptersTotal}</Text>
|
|
</Stack>
|
|
</Badge>
|
|
</Box>
|
|
<Box>
|
|
<Badge size="md" variant="solid">
|
|
<Stack direction="row">
|
|
<Text>words:</Text>
|
|
<Text>{wordsTotal}</Text>
|
|
</Stack>
|
|
</Badge>
|
|
</Box>
|
|
</Stack>
|
|
</Stack>
|
|
|
|
<Stack>
|
|
<Text lineClamp={4}>{description}</Text>
|
|
</Stack>
|
|
</Stack>
|
|
</Card.Body>
|
|
</Card.Root>
|
|
);
|
|
}
|