sync highlight on map and in list

src/ArticleCard.tsx

@@ -14,25 +14,36 @@ const useStyles = createStyles((theme) => ({
   body: {
     padding: theme.spacing.md,
   },
+
+  address: {
+    "&:hover": {
+      color: "red",
+      cursor: "pointer"
+    }
+  }
 }));
 
 interface ArticleCardVerticalProps {
+  id: number;
   image: string;
   category: string;
   title: string;
-  date: string;
-  author: {
-    name: string;
-    avatar: string;
-  };
+  address: string;
+  // author: {
+  //   name: string;
+  //   avatar: string;
+  // };
 }
 
 export function ArticleCardVertical({
+  id,
   image,
   category,
   title,
-  date,
-  author,
+  address,
+  // author,
+  selected,
+  setSelected
 }: ArticleCardVerticalProps) {
   const { classes } = useStyles();
   return (
@@ -43,21 +54,12 @@ export function ArticleCardVertical({
           <Text transform="uppercase" color="dimmed" weight={700} size="xs">
             {category}
           </Text>
-          <Text className={classes.title} mt="xs" mb="md">
+          <Text className={classes.title} mt="xs" mb="md" color={id === selected ? 'red' : 'black'}>
             {title}
           </Text>
-          <Group noWrap spacing="xs">
-            <Group spacing="xs" noWrap>
-              <Avatar size={20} src={author.avatar} />
-              <Text size="xs">{author.name}</Text>
-            </Group>
-            <Text size="xs" color="dimmed">
-              •
-            </Text>
-            <Text size="xs" color="dimmed">
-              {date}
-            </Text>
-          </Group>
+          <Text size="xs" color="dimmed" onClick={() => setSelected(id)} className={classes.address}>
+            • {address}
+          </Text>
         </div>
       </Group>
     </Card>

src/KartaPage.tsx

@@ -65,8 +65,8 @@ export function KartaPage() {
         mapStyle={mapstyle}
         interactiveLayerIds={['points-layer']}
         onClick={e => e.features[0] ? setSelected(e.features[0].properties.id) : setSelected(-1)}
-        onMouseEnter={e => setCursor('pointer')}
-        onMouseLeave={e => setCursor('grab')}
+        onMouseEnter={() => setCursor('pointer')}
+        onMouseLeave={() => setCursor('grab')}
         >
           <Source
             id='points'
@@ -116,14 +116,17 @@ export function KartaPage() {
           >
             {articles !== null && articles.length > 0 && articles.map(article => {
               const articleInfo = {
+                "id": article.id,
                 // "image": article.attributes.cover.data !== null ? "http://strapi.wg.gateway.ts" + article.attributes.cover.data.attributes.url : "https://images.unsplash.com/photo-1628890923662-2cb23c2e0cfe?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=200&q=80",
                 "category": "technology",
                 "title": article.attributes.title,
-                "date": new Date(article.attributes.publishedAt).toLocaleDateString("ru-RU"),
-                "author": {
-                  "name": "Elsa Brown",
-                  "avatar": "https://images.unsplash.com/photo-1628890923662-2cb23c2e0cfe?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=200&q=80"
-                }
+                "address": new Date(article.attributes.publishedAt).toLocaleDateString("ru-RU"),
+                // "author": {
+                //   "name": "Elsa Brown",
+                //   "avatar": "https://images.unsplash.com/photo-1628890923662-2cb23c2e0cfe?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=200&q=80"
+                // },
+                "selected": selected,
+                "setSelected": setSelected
               }
 
               return <ArticleCardVertical key={article.id} {...articleInfo} />