refactor, added slate, added editor, added book

app/client/components/WorkingListCard.tsx

@@ -1,23 +1,14 @@
-import { Badge, Box, Card, Heading, Link, Stack, Text } from '@chakra-ui/react';
-import { WorkingProgressStatus } from '@generated/types';
+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 { 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;
-}
+import { WorkingReviewsBadge } from './WorkingReviewsTotalBadge';
 
 export function WorkingListCard({
+  id,
   title,
   description,
   author,
@@ -27,29 +18,47 @@ export function WorkingListCard({
   wordsTotal,
   ratingTotal,
   reviewsTotal
-}: WorkingCardProps) {
+}: BookOne) {
   return (
     <Card.Root width="100%" variant="elevated">
       <Card.Body>
         <Stack>
           <Stack direction="row" justifyContent="space-between">
-            <Link>
-              <Heading size="lg">{title}</Heading>
-            </Link>
+            <Text as="div" minWidth={0}>
+              <Link to={`/work/book/${id}`}>
+                <Heading
+                  color="colorPalette.400"
+                  _hover={{
+                    textDecoration: 'underline',
+                    textDecorationColor: 'colorPalette.700'
+                  }}
+                >
+                  {title}
+                </Heading>
+              </Link>
+            </Text>
 
             <Stack direction="row" justifyContent="center" alignItems="center">
               <WorkingRatingBadge ratingTotal={ratingTotal} />
-              <IconBadge backgroundColor="orange.400" iconClass="nf nf-oct-comment">
-                <Text>{reviewsTotal}</Text>
-              </IconBadge>
+              <WorkingReviewsBadge reviewsTotal={reviewsTotal} />
               <WorkingProgressStatusBadge progressStatus={progressStatus} />
             </Stack>
           </Stack>
 
           <Stack>
             <Stack direction="row">
-              <Text>by:</Text>
-              <Link>{author.username}</Link>
+              <Link>by:</Link>
+              <Link to={`/profile/${author.username}`}>
+                <Text
+                  color="colorPalette.400"
+                  _hover={{
+                    textDecoration: 'underline',
+                    textDecorationColor: 'colorPalette.700'
+                  }}
+                >
+                  {author.username}
+                </Text>
+              </Link>
             </Stack>
 
             <Stack direction="row">
@@ -57,7 +66,7 @@ export function WorkingListCard({
                 <Badge size="md" variant="solid">
                   <Stack direction="row">
                     <Text>last updated:</Text>
-                    <Text>{updatedAt}</Text>
+                    <Text>{toFormattedDate({ value: updatedAt })}</Text>
                   </Stack>
                 </Badge>
               </Box>