add coordinates

src/ArticleCard.tsx

@@ -31,6 +31,9 @@ interface ArticleCardVerticalProps {
   category: string;
   title: string;
   address: string;
+  longitude: number;
+  latitude: number;
+  selected: number;
   // author: {
   //   name: string;
   //   avatar: string;
@@ -43,28 +46,31 @@ export function ArticleCardVertical({
   category,
   title,
   address,
-  coordinates,
+  longitude,
+  latitude,
   // author,
   selected,
-  handleAddressClick
+  clickAddressAction
 }: ArticleCardVerticalProps) {
   const { classes } = useStyles();
   return (
     <Card withBorder shadow="sm" radius="md" p={0} w={'100%'} className={classes.card}>
       <Group noWrap spacing={0}>
-        <Image src={image} height={200} width={200} />
+        <Image src={image} height={205} width={205} />
         <Stack p='md'>
           <Text transform="uppercase" color="dimmed" weight={700} size="xs">
             {category}
           </Text>
-          <Text component='a' href={`/article/${id}`} className={classes.title} mt="xs" mb="md" color={id === selected ? 'red' : 'black'}>
+          <Text component='a' href={`/article/${id}`} className={classes.title} mt="xs" mb="md" color={id === selected ? '#e66a5a' : 'black'}>
             {title}
           </Text>
-          <Flex align='center' onClick={() => handleAddressClick(id)} className={classes.address}>
+          <Flex align='center' onClick={() => clickAddressAction(id)} className={classes.address}>
             {/* <IconCurrentLocation style={{ width: rem(12), height: rem(12) }} /> */}
             <Image src={globe} style={{ width: 32, height: 32 }} />
             <Text size="xs" pl={5} pb={2}>
               {address}
+              <br/>
+              {`${longitude.toFixed(3).replace('.', ',')}°  ${latitude.toFixed(3).replace('.', ',')}°`}
             </Text>
           </Flex>
         </Stack>