implemented identity, updated session, added 'workings' list
added paginated querying, added 'common'
This commit is contained in:
parent
027deba422
commit
6ada519e06
36 changed files with 1422 additions and 279 deletions
115
app/client/components/WorkingListCard.tsx
Normal file
115
app/client/components/WorkingListCard.tsx
Normal file
|
|
@ -0,0 +1,115 @@
|
|||
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>
|
||||
);
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue