add address click

src/ArticleCard.tsx

@@ -1,4 +1,6 @@
-import { createStyles, Card, Image, Avatar, Text, Group } from '@mantine/core';
+import { createStyles, Card, Image, Avatar, Text, Group, Center, rem } from '@mantine/core';
+import { IconCurrentLocation } from '@tabler/icons-react';
+
 
 const useStyles = createStyles((theme) => ({
   card: {
@@ -41,9 +43,10 @@ export function ArticleCardVertical({
   category,
   title,
   address,
+  coordinates,
   // author,
   selected,
-  setSelected
+  handleAddressClick
 }: ArticleCardVerticalProps) {
   const { classes } = useStyles();
   return (
@@ -57,9 +60,13 @@ export function ArticleCardVertical({
           <Text className={classes.title} mt="xs" mb="md" color={id === selected ? 'red' : 'black'}>
             {title}
           </Text>
-          <Text size="xs" color="dimmed" onClick={() => setSelected(id)} className={classes.address}>
-            • {address}
-          </Text>
+          <Center inline onClick={() => handleAddressClick(id)} className={classes.address}>
+            <IconCurrentLocation style={{ width: rem(12), height: rem(12) }} />
+            {/* <IconArrowLeft style={{ width: rem(12), height: rem(12) }} /> */}
+            <Text size="xs">
+              {address}
+            </Text>
+          </Center>
         </div>
       </Group>
     </Card>

src/KartaPage.tsx

@@ -3,10 +3,11 @@ import { ArticleCardVertical } from './ArticleCard';
 import articleCard from './assets/card.json';
 import Map, {Source, Layer} from 'react-map-gl/maplibre';
 import mapstyle from './assets/basemap.json';
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useRef } from 'react';
 import Fuse from 'fuse.js'
 
 export function KartaPage() {
+  const mapRef = useRef(null);
   const [initial, setInitial] = useState(null);
   const [articles, setArticles] = useState(null);
   const [search, setSearch] = useState('');
@@ -50,9 +51,15 @@ export function KartaPage() {
     setArticles(updatedArticles)
   }, [search])
 
+  const handleAddressClick = (id) => {
+    setSelected(id)
+    id > 0 && articles && mapRef.current?.flyTo({ center: Object.values(articles.find(e => e.id == id).attributes.coordinates).slice(1) })
+  }
+
   return (
     <div style={{ position: 'relative' }}>
       <Map
+        ref={mapRef}
         initialViewState={{
           longitude: 60,
           latitude: 60,
@@ -71,7 +78,7 @@ export function KartaPage() {
           <Source
             id='points'
             type='vector'
-            tiles={['http://localhost:5500/tiles/{z}/{x}/{y}.pbf']}
+            tiles={['http://strapi.wg.gateway.ts/tiles/{z}/{x}/{y}.pbf']}
             maxzoom={10}
           >
             <Layer
@@ -80,7 +87,9 @@ export function KartaPage() {
               source-layer='layer'
               filter={articles === null || articles.length == 0 ? false : ['in', 'id', ...articles.map(a => a.id)]}
               paint={{
-                "circle-color": ['match', ['get', 'id'], selected, '#FF0000', '#000000']
+                "circle-color": ['match', ['get', 'id'], selected, '#FF0000', '#1c9099'],
+                "circle-radius": 8,
+                "circle-opacity": 0.7,
               }}
             />
           </Source>
@@ -118,15 +127,16 @@ export function KartaPage() {
               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",
+                "category": "",
                 "title": article.attributes.title,
-                "address": new Date(article.attributes.publishedAt).toLocaleDateString("ru-RU"),
+                "address": article.attributes.address,
+                "coordinates": article.attributes.coordinates,
                 // "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
+                "handleAddressClick": handleAddressClick
               }
 
               return <ArticleCardVertical key={article.id} {...articleInfo} />