104 lines
3.4 KiB
TypeScript
104 lines
3.4 KiB
TypeScript
import { Badge, Box, Card, Heading, Stack, Text } from '@chakra-ui/react';
|
|
import { Link } from '@tanstack/react-router';
|
|
import { toFormattedDate } from '../helpers';
|
|
import { BookOne } from '../interfaces';
|
|
import { WorkingProgressStatusBadge } from './WorkingProgressStatusBadge';
|
|
import { WorkingRatingBadge } from './WorkingRatingBadge';
|
|
import { WorkingReviewsBadge } from './WorkingReviewsTotalBadge';
|
|
|
|
export function WorkingListCard({
|
|
id,
|
|
title,
|
|
description,
|
|
author,
|
|
progressStatus,
|
|
updatedAt,
|
|
chaptersTotal,
|
|
wordsTotal,
|
|
ratingTotal,
|
|
reviewsTotal
|
|
}: BookOne) {
|
|
return (
|
|
<Card.Root width="100%" variant="elevated">
|
|
<Card.Body>
|
|
<Stack>
|
|
<Stack direction={'row'} justifyContent="space-between">
|
|
<Text as="div" minWidth={0}>
|
|
<Link to={`/work/book/${id}/overview/contents`}>
|
|
<Heading
|
|
color="colorPalette.400"
|
|
_hover={{
|
|
textDecoration: 'underline',
|
|
textDecorationColor: 'colorPalette.700'
|
|
}}
|
|
>
|
|
{title}
|
|
</Heading>
|
|
</Link>
|
|
</Text>
|
|
|
|
<Stack direction="row" justifyContent="center" alignItems="center" hideBelow="md">
|
|
<WorkingRatingBadge ratingTotal={ratingTotal} />
|
|
<WorkingReviewsBadge reviewsTotal={reviewsTotal} />
|
|
<WorkingProgressStatusBadge progressStatus={progressStatus} />
|
|
</Stack>
|
|
</Stack>
|
|
|
|
<Stack>
|
|
<Stack direction="row">
|
|
<Link>by:</Link>
|
|
<Link to={`/profile/${author.username}`}>
|
|
<Text
|
|
color="colorPalette.400"
|
|
_hover={{
|
|
textDecoration: 'underline',
|
|
textDecorationColor: 'colorPalette.700'
|
|
}}
|
|
>
|
|
{author.username}
|
|
</Text>
|
|
</Link>
|
|
</Stack>
|
|
|
|
<Stack maxWidth="100%" direction="row" overflow="auto" flexWrap="wrap">
|
|
<Box>
|
|
<Badge size="md" variant="solid">
|
|
<Stack direction="row">
|
|
<Text>last updated:</Text>
|
|
<Text>{toFormattedDate({ value: 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 direction="row" justifyContent="left" alignItems="center" hideFrom="md">
|
|
<WorkingRatingBadge ratingTotal={ratingTotal} />
|
|
<WorkingReviewsBadge reviewsTotal={reviewsTotal} />
|
|
<WorkingProgressStatusBadge progressStatus={progressStatus} />
|
|
</Stack>
|
|
|
|
<Stack>
|
|
<Text lineClamp={4}>{description}</Text>
|
|
</Stack>
|
|
</Stack>
|
|
</Card.Body>
|
|
</Card.Root>
|
|
);
|
|
}
|