115 lines
3.2 KiB
TypeScript
115 lines
3.2 KiB
TypeScript
import { Badge, BadgeProps, Box, Card, Heading, Icon, Link, Stack, Text } from '@chakra-ui/react';
|
|
import { WorkingProgressStatus } from '@generated/types';
|
|
import { ReactNode } from 'react';
|
|
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>
|
|
);
|
|
}
|
|
|
|
export function IconBadge({
|
|
children,
|
|
iconClass,
|
|
backgroundColor,
|
|
size = 'lg'
|
|
}: {
|
|
children?: ReactNode;
|
|
iconClass: string;
|
|
backgroundColor?: BadgeProps['backgroundColor'];
|
|
size?: 'sm' | 'md' | 'lg' | 'xs';
|
|
}) {
|
|
return (
|
|
<Box flex={1} direction="row" justifyContent="center" alignItems="center">
|
|
<Badge variant="solid" size={size} backgroundColor={backgroundColor}>
|
|
<Stack direction="row">
|
|
<Icon fontSize="xl">
|
|
<i className={iconClass} />
|
|
</Icon>
|
|
{children}
|
|
</Stack>
|
|
</Badge>
|
|
</Box>
|
|
);
|
|
}
|