Add props to ItemCard

Author: danielfdsilva

packages/client/src/components/ItemCard.tsx

@@ -9,83 +9,115 @@ import {
   Text,
   Heading,
   Box,
-  IconButton,
   HStack,
   Tag,
-  MenuButton,
-  Menu,
-  MenuList,
-  MenuItem,
-  Link
+  Skeleton,
+  SkeletonText
 } from '@chakra-ui/react';
-import { CollecticonEllipsisVertical } from '@devseed-ui/collecticons-chakra';
+import SmartLink from './SmartLink';
+
+interface ItemCardProps {
+  imageSrc?: string;
+  imageAlt?: string;
+  title?: string;
+  subtitle?: string;
+  description?: string;
+  tags?: string[];
+  to?: string;
+  renderMenu?: () => React.ReactNode;
+}
+
+export function ItemCard({
+  imageSrc,
+  imageAlt,
+  title,
+  subtitle,
+  description,
+  tags,
+  to,
+  renderMenu
+}: ItemCardProps) {
+  const renderLink = (children: React.ReactNode) => {
+    return to ? (
+      <SmartLink to={to} color='inherit'>
+        {children}
+      </SmartLink>
+    ) : (
+      <>{children}</>
+    );
+  };
 
-export default function ItemCard() {
   return (
     <Card as='article' variant='filled'>
-      <Link href='#'>
-        <Image
-          src='https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe?q=80&w=3464&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D'
-          alt='Abstract 3D render'
-          height='16rem'
-          width='100%'
-          objectFit='cover'
-          borderRadius='md'
-        />
-      </Link>
+      {imageSrc &&
+        renderLink(
+          <Image
+            src={imageSrc}
+            alt={imageAlt}
+            height='16rem'
+            width='100%'
+            objectFit='cover'
+            borderRadius='md'
+          />
+        )}
       <CardHeader as='header'>
         <Flex direction='row' gap={4}>
-          <Box flexBasis='100%'>
-            <Heading size='sm' as='h3'>
-              <Link href='#' color='inherit'>
-                Card title
-              </Link>
-            </Heading>
-            <Text as='p' fontSize='sm' color='base.400'>
-              Card subtitle
-            </Text>
-          </Box>
-          <Box>
-            <Menu>
-              <MenuButton
-                as={IconButton}
-                aria-label='Options'
-                icon={<CollecticonEllipsisVertical />}
-                variant='outline'
-                size='sm'
-              />
-              <MenuList>
-                <MenuItem>View</MenuItem>
-                <MenuItem>Edit</MenuItem>
-                <MenuItem>Delete</MenuItem>
-              </MenuList>
-            </Menu>
-          </Box>
+          {(title || subtitle) && (
+            <Box flexBasis='100%'>
+              {title && (
+                <Heading size='sm' as='h3' wordBreak='break-word'>
+                  {renderLink(title)}
+                </Heading>
+              )}
+              {subtitle && (
+                <Text as='p' fontSize='sm' color='base.400'>
+                  {subtitle}
+                </Text>
+              )}
+            </Box>
+          )}
+          {renderMenu && <Box>{renderMenu()}</Box>}
         </Flex>
       </CardHeader>
-      <CardBody>
-        <Text size='md'>
-          Card Summary. Lorem ipsum dolor sit, amet consectetur adipisicing
-          elit. Non impedit vitae tempore repellat neque sunt aut, veniam
-          facere, corporis nihil voluptas quis quia magni.
-        </Text>
-      </CardBody>
-      <CardFooter as='footer'>
-        <HStack spacing={2}>
-          <Tag size='sm' colorScheme='primary' as='a' href='#'>
-            Tag
-          </Tag>
-          <Tag size='sm' colorScheme='primary' as='a' href='#'>
-            Tag
-          </Tag>
-          <Tag size='sm' colorScheme='primary' as='a' href='#'>
-            Tag
-          </Tag>
-          <Tag size='sm' colorScheme='primary' as='a' href='#'>
-            Tag
-          </Tag>
-        </HStack>
-      </CardFooter>
+      {description && (
+        <CardBody>
+          <Text size='md'>{description}</Text>
+        </CardBody>
+      )}
+      {tags && tags.length > 0 && (
+        <CardFooter as='footer'>
+          <HStack spacing={2} wrap='wrap'>
+            {tags.map((tag) => (
+              // <Tag key={tag} size='sm' colorScheme='primary' as='a' href='#'>
+              <Tag key={tag} size='sm' colorScheme='primary'>
+                {tag}
+              </Tag>
+            ))}
+          </HStack>
+        </CardFooter>
+      )}
+    </Card>
+  );
+}
+
+export function ItemCardLoading(props: { mini?: boolean }) {
+  return (
+    <Card as='article' variant='filled' p={8}>
+      <Flex direction='column' gap={2}>
+        <Skeleton h={6} width='40%' />
+        <Skeleton h={4} width='30%' />
+      </Flex>
+
+      {!props.mini && (
+        <>
+          <SkeletonText mt={8} noOfLines={4} spacing='4' skeletonHeight='2' />
+          <Flex gap={2} mt={12}>
+            <Skeleton h={4} width={12} />
+            <Skeleton h={4} width={12} />
+            <Skeleton h={4} width={12} />
+          </Flex>
+        </>
+      )}
     </Card>
   );
 }