feat: trip page

public/prishvin-trip/prishvin.geojson

@@ -0,0 +1,554 @@
+{
+  "type": "FeatureCollection",
+  "name": "prishvin",
+  "crs": {
+    "type": "name",
+    "properties": { "name": "urn:ogc:def:crs:OGC:1.3:CRS84" }
+  },
+  "features": [
+    {
+      "type": "Feature",
+      "properties": {
+        "fid": 1,
+        "date_start": 1873,
+        "date_finish": 1889,
+        "place_name": "деревня Хрущёво-Лёвшино",
+        "photo_name": null,
+        "book_name": "Кащеева цепь",
+        "book_date": "1927"
+      },
+      "geometry": {
+        "type": "Point",
+        "coordinates": [38.549701899389909, 52.763324183122513]
+      }
+    },
+    {
+      "type": "Feature",
+      "properties": {
+        "fid": 2,
+        "date_start": 1898,
+        "date_finish": 1900,
+        "place_name": "деревня Хрущёво-Лёвшино",
+        "photo_name": null,
+        "book_name": "Кащеева цепь",
+        "book_date": "1927"
+      },
+      "geometry": {
+        "type": "Point",
+        "coordinates": [38.549701899389909, 52.763324183122513]
+      }
+    },
+    {
+      "type": "Feature",
+      "properties": {
+        "fid": 3,
+        "date_start": 1917,
+        "date_finish": 1920,
+        "place_name": "деревня Хрущёво-Лёвшино",
+        "photo_name": null,
+        "book_name": "Кащеева цепь",
+        "book_date": "1927"
+      },
+      "geometry": {
+        "type": "Point",
+        "coordinates": [38.549701899389909, 52.763324183122513]
+      }
+    },
+    {
+      "type": "Feature",
+      "properties": {
+        "fid": 4,
+        "date_start": 1893,
+        "date_finish": 1898,
+        "place_name": "Рига",
+        "photo_name": null,
+        "book_name": "Кащеева цепь",
+        "book_date": "1927"
+      },
+      "geometry": {
+        "type": "Point",
+        "coordinates": [24.105899290259302, 56.947217001362716]
+      }
+    },
+    {
+      "type": "Feature",
+      "properties": {
+        "fid": 5,
+        "date_start": 1900,
+        "date_finish": 1902,
+        "place_name": "Лейпциг",
+        "photo_name": null,
+        "book_name": "Кащеева цепь",
+        "book_date": "1927"
+      },
+      "geometry": {
+        "type": "Point",
+        "coordinates": [12.376730893531013, 51.34067106771618]
+      }
+    },
+    {
+      "type": "Feature",
+      "properties": {
+        "fid": 6,
+        "date_start": 1905,
+        "date_finish": 1917,
+        "place_name": "Санкт-Петербург",
+        "photo_name": null,
+        "book_name": "Кащеева цепь, Заворошка, Голубое знамя, Город света",
+        "book_date": "1927, 1913, 1918, 1943"
+      },
+      "geometry": {
+        "type": "Point",
+        "coordinates": [30.331870872738534, 59.937861990316726]
+      }
+    },
+    {
+      "type": "Feature",
+      "properties": {
+        "fid": 7,
+        "date_start": 1920,
+        "date_finish": 1922,
+        "place_name": "село Алексино",
+        "photo_name": null,
+        "book_name": "Мирская чаша",
+        "book_date": "1921"
+      },
+      "geometry": {
+        "type": "Point",
+        "coordinates": [33.400131148935486, 54.785751644417864]
+      }
+    },
+    {
+      "type": "Feature",
+      "properties": {
+        "fid": 8,
+        "date_start": 1922,
+        "date_finish": 1924,
+        "place_name": "Талдомский уезд",
+        "photo_name": null,
+        "book_name": "Башмаки",
+        "book_date": "1925"
+      },
+      "geometry": {
+        "type": "Point",
+        "coordinates": [37.52793495956427, 56.731211833957133]
+      }
+    },
+    {
+      "type": "Feature",
+      "properties": {
+        "fid": 9,
+        "date_start": 1925,
+        "date_finish": 1926,
+        "place_name": "Усолье, Переславль-Залесский",
+        "photo_name": null,
+        "book_name": "Родники Берендея, Календарь природы",
+        "book_date": "1925, 1925"
+      },
+      "geometry": {
+        "type": "Point",
+        "coordinates": [38.660752248712548, 56.820608598154763]
+      }
+    },
+    {
+      "type": "Feature",
+      "properties": {
+        "fid": 10,
+        "date_start": 1941,
+        "date_finish": 1943,
+        "place_name": "Усолье, Переславль-Залесский",
+        "photo_name": null,
+        "book_name": "Рассказы о ленинградских детях, Повесть нашего времени, Кладовая солнца, Корабельная чаща",
+        "book_date": "1943, 1944, 1945, 1953"
+      },
+      "geometry": {
+        "type": "Point",
+        "coordinates": [38.660752248712548, 56.820608598154763]
+      }
+    },
+    {
+      "type": "Feature",
+      "properties": {
+        "fid": 11,
+        "date_start": 1926,
+        "date_finish": 1937,
+        "place_name": "Загорск",
+        "photo_name": null,
+        "book_name": "Журавлиная родина, Рассказы охотника",
+        "book_date": "1929, 1935"
+      },
+      "geometry": {
+        "type": "Point",
+        "coordinates": [38.133511977562364, 56.311422551150422]
+      }
+    },
+    {
+      "type": "Feature",
+      "properties": {
+        "fid": 12,
+        "date_start": 1946,
+        "date_finish": 1954,
+        "place_name": "деревня Дунино",
+        "photo_name": null,
+        "book_name": "Мои тетрадки, Глаза земли",
+        "book_date": "1948, 1948-1950"
+      },
+      "geometry": {
+        "type": "Point",
+        "coordinates": [36.936817934138354, 55.722054238050283]
+      }
+    },
+    {
+      "type": "Feature",
+      "properties": {
+        "fid": 13,
+        "date_start": 1937,
+        "date_finish": 1941,
+        "place_name": "Москва, Дом писателей",
+        "photo_name": null,
+        "book_name": "Весна света, Фацелия, Лесная капель",
+        "book_date": "1938, 1940, 1940"
+      },
+      "geometry": {
+        "type": "Point",
+        "coordinates": [37.621587620296772, 55.741276824041357]
+      }
+    },
+    {
+      "type": "Feature",
+      "properties": {
+        "fid": 14,
+        "date_start": 1943,
+        "date_finish": 1954,
+        "place_name": "Москва, Дом писателей",
+        "photo_name": null,
+        "book_name": "Мои тетрадки, Глаза земли",
+        "book_date": "1948, 1948-1950"
+      },
+      "geometry": {
+        "type": "Point",
+        "coordinates": [37.621587620296772, 55.741276824041357]
+      }
+    },
+    {
+      "type": "Feature",
+      "properties": {
+        "fid": 15,
+        "date_start": 1984,
+        "date_finish": 1984,
+        "place_name": "Гори, Грузия",
+        "photo_name": null,
+        "book_name": "Кащеева цепь",
+        "book_date": "1927"
+      },
+      "geometry": {
+        "type": "Point",
+        "coordinates": [44.111723356147451, 41.982577596789014]
+      }
+    },
+    {
+      "type": "Feature",
+      "properties": {
+        "fid": 16,
+        "date_start": 1906,
+        "date_finish": 1906,
+        "place_name": "Выговский край, Карелия",
+        "photo_name": null,
+        "book_name": "В краю непуганых птиц",
+        "book_date": "1907"
+      },
+      "geometry": {
+        "type": "Point",
+        "coordinates": [35.51380524088475, 63.427327304983805]
+      }
+    },
+    {
+      "type": "Feature",
+      "properties": {
+        "fid": 17,
+        "date_start": 1933,
+        "date_finish": 1933,
+        "place_name": "Беломоро-Балтийский канал",
+        "photo_name": "ББК А 3 К36 л90030.jpg",
+        "book_name": "Осударева дорога",
+        "book_date": "1948"
+      },
+      "geometry": {
+        "type": "Point",
+        "coordinates": [34.463647826538448, 62.910399395624189]
+      }
+    },
+    {
+      "type": "Feature",
+      "properties": {
+        "fid": 18,
+        "date_start": 1907,
+        "date_finish": 1907,
+        "place_name": "Соловецкий монастырь",
+        "photo_name": null,
+        "book_name": "За волшебным колобком",
+        "book_date": "1908"
+      },
+      "geometry": {
+        "type": "Point",
+        "coordinates": [35.710144884280304, 65.024637980951127]
+      }
+    },
+    {
+      "type": "Feature",
+      "properties": {
+        "fid": 19,
+        "date_start": 1933,
+        "date_finish": 1933,
+        "place_name": "Соловецкий лагерь особого назначения",
+        "photo_name": null,
+        "book_name": null,
+        "book_date": null
+      },
+      "geometry": {
+        "type": "Point",
+        "coordinates": [35.711319962683945, 65.020423422359372]
+      }
+    },
+    {
+      "type": "Feature",
+      "properties": {
+        "fid": 20,
+        "date_start": 1907,
+        "date_finish": 1907,
+        "place_name": "Летний берег, Белое море",
+        "photo_name": null,
+        "book_name": "За волшебным колобком",
+        "book_date": "1908"
+      },
+      "geometry": {
+        "type": "Point",
+        "coordinates": [38.404193463914851, 64.794812372504339]
+      }
+    },
+    {
+      "type": "Feature",
+      "properties": {
+        "fid": 21,
+        "date_start": 1907,
+        "date_finish": 1907,
+        "place_name": "Хибиногорск, Мурман, Кольский полуостров",
+        "photo_name": null,
+        "book_name": "За волшебным колобком",
+        "book_date": "1908"
+      },
+      "geometry": {
+        "type": "Point",
+        "coordinates": [33.658037284419159, 67.613442702332321]
+      }
+    },
+    {
+      "type": "Feature",
+      "properties": {
+        "fid": 22,
+        "date_start": 1933,
+        "date_finish": 1933,
+        "place_name": "Хибиногорск, Мурман, Кольский полуостров",
+        "photo_name": null,
+        "book_name": null,
+        "book_date": null
+      },
+      "geometry": {
+        "type": "Point",
+        "coordinates": [33.658037284419159, 67.613442702332321]
+      }
+    },
+    {
+      "type": "Feature",
+      "properties": {
+        "fid": 23,
+        "date_start": 1907,
+        "date_finish": 1907,
+        "place_name": "Норвегия",
+        "photo_name": null,
+        "book_name": "За волшебным колобком",
+        "book_date": "1908"
+      },
+      "geometry": {
+        "type": "Point",
+        "coordinates": [23.59141623599788, 69.199470459863889]
+      }
+    },
+    {
+      "type": "Feature",
+      "properties": {
+        "fid": 24,
+        "date_start": 1908,
+        "date_finish": 1908,
+        "place_name": "Озеро Светлояр, Нижегородская область",
+        "photo_name": null,
+        "book_name": "У стен града невидимого",
+        "book_date": "1909"
+      },
+      "geometry": {
+        "type": "Point",
+        "coordinates": [45.092913823197613, 56.818836127597443]
+      }
+    },
+    {
+      "type": "Feature",
+      "properties": {
+        "fid": 25,
+        "date_start": 1909,
+        "date_finish": 1909,
+        "place_name": "Павлодар - Каркаралинск",
+        "photo_name": null,
+        "book_name": "Чёрный араб",
+        "book_date": "1910"
+      },
+      "geometry": {
+        "type": "Point",
+        "coordinates": [76.941397461645735, 52.280374515129814]
+      }
+    },
+    {
+      "type": "Feature",
+      "properties": {
+        "fid": 26,
+        "date_start": 1909,
+        "date_finish": 1909,
+        "place_name": "Павлодар - Каркаралинск",
+        "photo_name": null,
+        "book_name": "Чёрный араб",
+        "book_date": "1910"
+      },
+      "geometry": {
+        "type": "Point",
+        "coordinates": [75.468980700446025, 49.410311735464738]
+      }
+    },
+    {
+      "type": "Feature",
+      "properties": {
+        "fid": 27,
+        "date_start": 1911,
+        "date_finish": 1911,
+        "place_name": "Великий Новгород и Новгородская область",
+        "photo_name": null,
+        "book_name": "Никон Староколенный, Заворошка",
+        "book_date": "1912, 1913"
+      },
+      "geometry": {
+        "type": "Point",
+        "coordinates": [31.268856268398803, 58.522244594600309]
+      }
+    },
+    {
+      "type": "Feature",
+      "properties": {
+        "fid": 28,
+        "date_start": 1913,
+        "date_finish": 1913,
+        "place_name": "Крым",
+        "photo_name": null,
+        "book_name": "Славны бубны",
+        "book_date": "1913"
+      },
+      "geometry": {
+        "type": "Point",
+        "coordinates": [34.060233255565549, 44.451453133962502]
+      }
+    },
+    {
+      "type": "Feature",
+      "properties": {
+        "fid": 29,
+        "date_start": 1931,
+        "date_finish": 1931,
+        "place_name": "Уралмаш, Свердловск",
+        "photo_name": null,
+        "book_name": null,
+        "book_date": null
+      },
+      "geometry": {
+        "type": "Point",
+        "coordinates": [60.592560645901592, 56.884926410462185]
+      }
+    },
+    {
+      "type": "Feature",
+      "properties": {
+        "fid": 30,
+        "date_start": 1931,
+        "date_finish": 1931,
+        "place_name": "Дальний Восток",
+        "photo_name": "Д Восток РАСПЕЧАТ k371240.JPG, Д. Вотоск k3815530002.jpg",
+        "book_name": "Дорогие звери, Жень-шень",
+        "book_date": "1932, 1933"
+      },
+      "geometry": {
+        "type": "Point",
+        "coordinates": [131.830180124729395, 42.988574620808208]
+      }
+    },
+    {
+      "type": "Feature",
+      "properties": {
+        "fid": 31,
+        "date_start": 1931,
+        "date_finish": 1931,
+        "place_name": "Транссиб",
+        "photo_name": null,
+        "book_name": "Дорогие звери",
+        "book_date": "1932"
+      },
+      "geometry": {
+        "type": "Point",
+        "coordinates": [135.073091868855386, 48.497080880851975]
+      }
+    },
+    {
+      "type": "Feature",
+      "properties": {
+        "fid": 32,
+        "date_start": 1935,
+        "date_finish": 1935,
+        "place_name": "Пинега, Северная Двина, Архангельская область",
+        "photo_name": "Пинега K1I0003 пришвин в лодке.jpg, Пинега K1411010004 Баба с мешком (1).jpg",
+        "book_name": "Берендеева чаща, Корабельная чаща",
+        "book_date": "1935, 1953"
+      },
+      "geometry": {
+        "type": "Point",
+        "coordinates": [43.391023109047147, 64.695819785456308]
+      }
+    },
+    {
+      "type": "Feature",
+      "properties": {
+        "fid": 33,
+        "date_start": 1936,
+        "date_finish": 1936,
+        "place_name": "Кабардино-Балкария",
+        "photo_name": "Кабарда K400027 (1).JPG, Кабарда K400027 (2).jpg",
+        "book_name": "Кавказские рассказы",
+        "book_date": "1937"
+      },
+      "geometry": {
+        "type": "Point",
+        "coordinates": [43.604162021472703, 43.487011192076864]
+      }
+    },
+    {
+      "type": "Feature",
+      "properties": {
+        "fid": 34,
+        "date_start": 1938,
+        "date_finish": 1938,
+        "place_name": "деревня Вёжи, Костромская область",
+        "photo_name": "Кострома 818-3.jpg, Кострома Мазай.JPG",
+        "book_name": "Неодетая весна",
+        "book_date": "1939"
+      },
+      "geometry": {
+        "type": "Point",
+        "coordinates": [40.744151751248111, 57.910824708289972]
+      }
+    }
+  ]
+}

src/App.tsx

@@ -7,6 +7,7 @@ import {
 
 import { CustomFonts } from './CustomFonts';
 import { KartaPage } from "./KartaPage";
+import { TripPage } from "./TripPage";
 import { Landing } from "./Landing";
 import { Article } from "./Article";
 
@@ -19,6 +20,10 @@ const router = createBrowserRouter([
     path: "/about",
     element: <Landing />,
   },
+  {
+    path: "/trips/prishvin",
+    element: <TripPage />,
+  },
   {
     path: "/article/:id",
     element: <Article />,

src/Header.tsx

@@ -79,8 +79,14 @@ interface HeaderSimpleProps {
   links: { link: string; label: string }[];
 }
 
-export function HeaderSimple({ links, openedMenuKarta, menuactionskarta }: HeaderSimpleProps) {
-  const [openedMenu, menuactions] = menuactionskarta ? [openedMenuKarta, menuactionskarta] : useDisclosure(false);
+export function HeaderSimple({
+  links,
+  openedMenuKarta,
+  menuactionskarta,
+}: HeaderSimpleProps) {
+  const [openedMenu, menuactions] = menuactionskarta
+    ? [openedMenuKarta, menuactionskarta]
+    : useDisclosure(false);
   const [active, setActive] = useState("");
   const { classes, cx } = useStyles();
 
@@ -106,10 +112,8 @@ export function HeaderSimple({ links, openedMenuKarta, menuactionskarta }: Heade
   return (
     <Header height={60}>
       <Container className={classes.header}>
-
         <Image maw={150} src={logo} component="a" href="/" />
 
-
         {/* Menu for pc */}
         <Group spacing={5} className={classes.links}>
           <Menu shadow="md" width={200}>
@@ -168,7 +172,44 @@ export function HeaderSimple({ links, openedMenuKarta, menuactionskarta }: Heade
               </Menu.Item>
             </Menu.Dropdown>
           </Menu>
-          {items}
+          <a
+            key="#museums"
+            href="#museums"
+            className={cx(classes.link, {
+              [classes.linkActive]: active === "#museums",
+            })}
+            // onClick={() => {
+            //   setActive(link.link);
+            // }}
+          >
+            Музеи
+          </a>
+          <Menu shadow="md" width={200}>
+            <Menu.Target>
+              <a
+                key="Путешествия"
+                href="#trips"
+                className={cx(classes.link, {
+                  [classes.linkActive]: active === "#trips",
+                })}
+                onClick={(e) => {
+                  e.preventDefault();
+                  // setActive("#authors");
+                }}
+              >
+                Путешествия
+              </a>
+            </Menu.Target>
+
+            <Menu.Dropdown>
+              <Menu.Item
+                component="a"
+                href="/trips/prishvin"
+              >
+                Пришвин
+              </Menu.Item>
+            </Menu.Dropdown>
+          </Menu>
         </Group>
 
         <Burger
@@ -179,80 +220,80 @@ export function HeaderSimple({ links, openedMenuKarta, menuactionskarta }: Heade
         />
       </Container>
       {/* Menu for mobile */}
-        <Paper
-          display={!openedMenu && 'none'}
-          radius={0}
-          style={{
-            position: "absolute",
-            top: 60,
-            left: 0,
-            right: 0,
-            opacity: "95%",
-            padding: "10px 0 10px 1rem",
-            zIndex: 10
-          }}
-          className={classes.mobilemenu}
-        >
-          <Group spacing={5} className={classes.linksmobile}>
-            <Menu shadow="md" width={200}>
-              <Menu.Target>
-                <a
-                  key="Авторы"
-                  href="#authors"
-                  className={cx(classes.link, {
-                    [classes.linkActive]: active === "#authors",
-                  })}
-                  onClick={(e) => {
-                    e.preventDefault();
-                    // setActive("#authors");
-                  }}
-                >
-                  Авторы
-                </a>
-              </Menu.Target>
+      <Paper
+        display={!openedMenu && "none"}
+        radius={0}
+        style={{
+          position: "absolute",
+          top: 60,
+          left: 0,
+          right: 0,
+          opacity: "95%",
+          padding: "10px 0 10px 1rem",
+          zIndex: 10,
+        }}
+        className={classes.mobilemenu}
+      >
+        <Group spacing={5} className={classes.linksmobile}>
+          <Menu shadow="md" width={200}>
+            <Menu.Target>
+              <a
+                key="Авторы"
+                href="#authors"
+                className={cx(classes.link, {
+                  [classes.linkActive]: active === "#authors",
+                })}
+                onClick={(e) => {
+                  e.preventDefault();
+                  // setActive("#authors");
+                }}
+              >
+                Авторы
+              </a>
+            </Menu.Target>
 
-              <Menu.Dropdown>
-                <Menu.Item
-                  rightSection={
-                    <IconExternalLink
-                      style={{ width: rem(14), height: rem(14) }}
-                    />
-                  }
-                  component="a"
-                  href="https://bigenc.ru/c/ostrovskii-aleksandr-nikolaevich-c697e2"
-                  target="_blank"
-                >
-                  Островский
-                </Menu.Item>
-                <Menu.Item
-                  rightSection={
-                    <IconExternalLink
-                      style={{ width: rem(14), height: rem(14) }}
-                    />
-                  }
-                  component="a"
-                  href="https://bigenc.ru/c/prishvin-mikhail-mikhailovich-893107"
-                  target="_blank"
-                >
-                  Пришвин
-                </Menu.Item>
-                <Menu.Item
-                  rightSection={
-                    <IconExternalLink
-                      style={{ width: rem(14), height: rem(14) }}
-                    />
-                  }
-                  component="a"
-                  href="https://bigenc.ru/c/briusov-valerii-iakovlevich-fc6a35"
-                  target="_blank"
-                >
-                  Брюсов
-                </Menu.Item>
-              </Menu.Dropdown>
-            </Menu>
-            {items}
-          </Group>
-        </Paper>
+            <Menu.Dropdown>
+              <Menu.Item
+                rightSection={
+                  <IconExternalLink
+                    style={{ width: rem(14), height: rem(14) }}
+                  />
+                }
+                component="a"
+                href="https://bigenc.ru/c/ostrovskii-aleksandr-nikolaevich-c697e2"
+                target="_blank"
+              >
+                Островский
+              </Menu.Item>
+              <Menu.Item
+                rightSection={
+                  <IconExternalLink
+                    style={{ width: rem(14), height: rem(14) }}
+                  />
+                }
+                component="a"
+                href="https://bigenc.ru/c/prishvin-mikhail-mikhailovich-893107"
+                target="_blank"
+              >
+                Пришвин
+              </Menu.Item>
+              <Menu.Item
+                rightSection={
+                  <IconExternalLink
+                    style={{ width: rem(14), height: rem(14) }}
+                  />
+                }
+                component="a"
+                href="https://bigenc.ru/c/briusov-valerii-iakovlevich-fc6a35"
+                target="_blank"
+              >
+                Брюсов
+              </Menu.Item>
+            </Menu.Dropdown>
+          </Menu>
+          {items}
+        </Group>
+      </Paper>
     </Header>
   );
 }

src/PlaceCard.tsx

@@ -0,0 +1,100 @@
+import {
+  createStyles,
+  Card,
+  Image,
+  Stack,
+  Text,
+  Group,
+  Flex,
+} from "@mantine/core";
+import globe from "./assets/globe.png";
+
+const useStyles = createStyles((theme) => ({
+  card: {
+    backgroundColor: theme.white,
+  },
+
+  title: {
+    fontWeight: 700,
+    fontFamily: theme.fontFamily,
+    lineHeight: 1.2,
+    "&:hover": {
+      color: "#eb7b1a",
+    },
+  },
+
+  body: {
+    padding: theme.spacing.md,
+  },
+
+  address: {
+    "&:hover": {
+      cursor: "pointer",
+      filter:
+        "brightness(0) saturate(100%) invert(50%) sepia(92%) saturate(1223%) hue-rotate(352deg) brightness(97%) contrast(91%)",
+    },
+  },
+}));
+
+export function PlaceCard({
+  fid,
+  date_start,
+  date_finish,
+  place_name,
+  photo_name,
+  book_name,
+  book_date,
+  coordinates,
+  selected,
+  clickAction,
+}) {
+  const { classes } = useStyles();
+
+  return (
+    <Card
+      withBorder
+      shadow="sm"
+      radius="md"
+      p={0}
+      w={"100%"}
+      className={classes.card}
+    >
+      <Group noWrap position="apart">
+        <Stack p="md">
+          <Flex direction="column" className={classes.address} onClick={() => clickAction(fid)} color={fid === selected ? '#e66a5a' : 'black'}>
+            <Text className={classes.title} mt="xs" mb={0}>
+              {place_name}{" "}
+              {date_start == date_finish
+                ? date_start
+                : `${date_start} - ${date_finish}`}
+            </Text>
+            <Text size="xs">
+              {`${coordinates[0].toFixed(3).replace(".", ",")}° 
+                ${coordinates[1].toFixed(3).replace(".", ",")}°`}
+            </Text>
+          </Flex>
+          {book_name && book_date && (
+            <Text>
+              {`${book_name
+                .split(", ")
+                .map((bn, i) => ({
+                  name: bn,
+                  date: book_date.split(", ")[i],
+                }))
+                .sort((a, b) => a.date - b.date)
+                .map((book) => `${book.name} (${book.date})`)
+                .join(", ")}`}
+            </Text>
+          )}
+        </Stack>
+        {photo_name && (
+          <Image
+            src={`/prishvin-trip/${photo_name.split(", ")[0]}`}
+            height={150}
+            width={150}
+          />
+        )}
+      </Group>
+    </Card>
+  );
+}

src/TripPage.tsx

@@ -0,0 +1,357 @@
+import {
+  Paper,
+  Flex,
+  ScrollArea,
+  Autocomplete,
+  Title,
+  Text,
+} from "@mantine/core";
+import { useDisclosure } from "@mantine/hooks";
+import { HeaderSimple } from "./Header";
+import { FooterLinks } from "./Footer";
+import headerLinks from "./assets/header.json";
+import footerLinks from "./assets/footer.json";
+import { PlaceCard } from "./PlaceCard";
+// import { ArticleCardMobile } from "./ArticleCardMobile";
+import Map, {
+  Source,
+  Layer,
+  ScaleControl,
+  GeolocateControl,
+  Popup,
+} from "react-map-gl/maplibre";
+import "maplibre-gl/dist/maplibre-gl.css";
+import { useState, useEffect, useRef } from "react";
+
+// import mapstyle from './assets/basemap.json';
+import mapstyle from "./assets/basemap-mapbox.json";
+import plus from "./assets/plus.png";
+import minus from "./assets/minus.png";
+
+export function TripPage() {
+  const mapRef = useRef(null);
+  // const [initial, setInitial] = useState([]);
+  const [places, setPlaces] = useState(null);
+  const [search, setSearch] = useState("");
+  const [selected, setSelected] = useState(-1);
+  const [cursor, setCursor] = useState("grab");
+  const [popupInfo, setPopupInfo] = useState(null);
+  const [openedMenu, menuactions] = useDisclosure(false);
+
+  const host = "https://strapi.litmusmap.ru";
+
+  useEffect(() => {
+    fetch("/prishvin-trip/prishvin.geojson")
+      .then((r) => r.json())
+      .then((j) => setPlaces(j.features));
+  }, []);
+
+  // Select article interaction
+  useEffect(() => {
+    if (selected > 0) {
+      const selectedIndex = places.findIndex(
+        (p) => p.properties.fid == selected
+      );
+      const selectedObject = places[selectedIndex];
+      // const reordered = [
+      //   selectedObject,
+      //   ...places.filter((p) => p.properties.fid !== selected),
+      // ];
+      // setPlaces(reordered);
+      mapRef.current?.flyTo({
+        center: [
+          selectedObject.geometry.coordinates[0],
+          selectedObject.geometry.coordinates[1],
+        ],
+        zoom: 10,
+      });
+    } else {
+      mapRef.current?.flyTo({
+        center: [35, 57],
+        zoom: 3,
+      });
+    }
+  }, [selected]);
+
+  const handleClick = (id) => {
+    setSelected(id);
+  };
+
+  // Zoom
+  const ZoomControl = (props) => {
+    const zoomIn = () => {
+      mapRef.current.zoomTo(mapRef.current.getZoom() + 1);
+    };
+    const zoomOut = () => {
+      mapRef.current.zoomTo(mapRef.current.getZoom() - 1);
+    };
+    return (
+      <Flex
+        style={{
+          position: "absolute",
+          bottom: props.bottom,
+          right: props.right,
+        }}
+      >
+        <Paper
+          onClick={zoomOut}
+          radius="xl"
+          bg={"none"}
+          sx={{ "&:hover": { backgroundColor: "white", cursor: "pointer" } }}
+          maw={48}
+          mah={48}
+        >
+          <img src={minus} style={{ width: "48px", height: "48px" }}></img>
+        </Paper>
+        <Paper
+          onClick={zoomIn}
+          radius="xl"
+          bg={"none"}
+          sx={{ "&:hover": { backgroundColor: "white", cursor: "pointer" } }}
+          maw={48}
+          mah={48}
+        >
+          <img src={plus} style={{ width: "48px", height: "48px" }}></img>
+        </Paper>
+      </Flex>
+    );
+  };
+
+  return (
+    <>
+      <HeaderSimple
+        links={headerLinks.links}
+        openedMenuKarta={openedMenu}
+        menuactionskarta={menuactions}
+      />
+      <div style={{ position: "relative" }}>
+        <Map
+          ref={mapRef}
+          initialViewState={{
+            longitude: 35,
+            latitude: 60,
+            zoom: 3,
+          }}
+          minZoom={3.5}
+          maxZoom={16}
+          maxBounds={[
+            [-60, 35],
+            [200, 80],
+          ]}
+          style={{
+            height: "90vh",
+          }}
+          cursor={cursor}
+          mapStyle={mapstyle}
+          interactiveLayerIds={["trip-layer"]}
+          onClick={(e) => {
+            // console.log(e.features);
+            if (e.features[0]) {
+              setSelected(e.features[0].properties.fid);
+              if (mapRef.current.getZoom() < 14) {
+                mapRef.current.flyTo({
+                  center: e.features[0].geometry.coordinates,
+                  zoom: mapRef.current.getZoom() + 6,
+                });
+                setPopupInfo({
+                  longitude: e.features[0].geometry.coordinates[0],
+                  latitude: e.features[0].geometry.coordinates[1],
+                  text: `${
+                    e.features[0].properties.date_start ==
+                    e.features[0].properties.date_finish
+                      ? e.features[0].properties.date_start
+                      : `${e.features[0].properties.date_start} - ${e.features[0].properties.date_finish}`
+                  } ${e.features[0].properties.place_name}`,
+                });
+              }
+            } else {
+              setSelected(-1);
+            }
+          }}
+          onMouseEnter={() => setCursor("pointer")}
+          onMouseLeave={() => setCursor("grab")}
+          // onLoad={handleMapLoad}
+        >
+          <Source
+            id="trip"
+            type="geojson"
+            data="/prishvin-trip/prishvin.geojson"
+            maxzoom={10}
+          >
+            {popupInfo && (
+              <Popup
+                key={popupInfo.id}
+                longitude={popupInfo.longitude}
+                latitude={popupInfo.latitude}
+                closeButton={false}
+                onClose={() => setPopupInfo(null)}
+              >
+                {popupInfo.text}
+              </Popup>
+            )}
+            <Layer
+              id="trip-layer"
+              type="circle"
+              paint={{
+                "circle-color": [
+                  "match",
+                  ["get", "fid"],
+                  selected,
+                  "#e66a5a",
+                  "#F2994A",
+                ],
+                "circle-radius": ["step", ["zoom"], 5, 7, 10, 12, 15, 14, 20],
+                "circle-opacity": 0.8,
+              }}
+            />
+          </Source>
+          <ScaleControl position="bottom-right" />
+          <ZoomControl bottom="35px" right="4px" />
+          <GeolocateControl
+            showAccuracyCircle={false}
+            position="bottom-right"
+            style={{
+              marginBottom: "55px",
+              marginRight: "14px",
+              background: "none",
+              boxShadow: "none",
+            }}
+          />
+        </Map>
+
+        {/* Search mobile */}
+        <Paper
+          shadow={"md"}
+          radius={0}
+          display={!openedMenu && "none"}
+          style={{
+            position: "absolute",
+            top: 0,
+            left: 0,
+            right: 0,
+            height: "340px",
+            opacity: "95%",
+            padding: "55px 0 1rem 1rem",
+          }}
+          sx={{
+            "@media (min-width: 60em)": {
+              display: "none",
+            },
+          }}
+        >
+          <Autocomplete
+            mr={20}
+            mb={10}
+            placeholder="Поиск"
+            limit={2}
+            value={search}
+            onChange={setSearch}
+            data={[]}
+          />
+          <ScrollArea h={"225px"} type="auto">
+            <Flex
+              // mih={50}
+              gap="xs"
+              justify="flex-start"
+              align="start"
+              direction="column"
+              wrap="wrap"
+              mr={20}
+            >
+              {/* {articles !== null &&
+                articles.length > 0 &&
+                articles.map((article) => (
+                  <ArticleCardMobile
+                    key={article.id}
+                    id={article.id}
+                    image={
+                      article.attributes.cover.data !== null
+                        ? host + article.attributes.cover.data.attributes.url
+                        : ""
+                    }
+                    category="музеи"
+                    title={article.attributes.title}
+                    address={article.attributes.address}
+                    longitude={article.attributes.longitude}
+                    latitude={article.attributes.latitude}
+                    selected={selected}
+                    clickAddressAction={handleAddressClick}
+                  />
+                ))} */}
+            </Flex>
+          </ScrollArea>
+        </Paper>
+
+        {/* Search pc */}
+        <Paper
+          shadow={"md"}
+          withBorder
+          style={{
+            position: "absolute",
+            top: "1rem",
+            left: "1rem",
+            width: "36rem",
+            height: "80%",
+            opacity: "95%",
+            padding: "1rem 0 1rem 1rem",
+          }}
+          sx={{
+            "@media (max-width: 60em)": {
+              display: "none",
+            },
+          }}
+        >
+          <Title order={3} mb={10}>
+            Места
+          </Title>
+          <ScrollArea
+            h={"80%"}
+            type="auto"
+            sx={{
+              "@media (max-height: 700px)": {
+                height: "60%",
+              },
+              "@media (max-height: 400px)": {
+                height: "50%",
+              },
+            }}
+          >
+            <Text mr={20} mb={10}>
+              География пришвинской биографии невероятно богата. Писатель много
+              где жил и много где путешествовал. Главная особенность творчества
+              Пришвина в том, что фактически все места обитания и все маршруты
+              путешествий непреложно отражались в его произведениях. Если и есть
+              исключения – поездка на Уралмаш в 1933 году, то она описана в
+              Дневнике писателя.
+            </Text>
+            <Flex
+              mih="40rem"
+              gap="md"
+              justify="flex-start"
+              align="start"
+              direction="column"
+              wrap="wrap"
+              mr={20}
+            >
+              {places &&
+                places
+                  .sort(
+                    (a, b) => a.properties.date_start - b.properties.date_start
+                  )
+                  .map((place) => (
+                    <PlaceCard
+                      key={place.properties.fid}
+                      {...place.properties}
+                      coordinates={place.geometry.coordinates}
+                      selected={selected}
+                      clickAction={handleClick}
+                    />
+                  ))}
+            </Flex>
+          </ScrollArea>
+        </Paper>
+      </div>
+      <FooterLinks data={footerLinks.data} />
+    </>
+  );
+}

src/assets/header.json

@@ -7,6 +7,10 @@
         {
             "link": "#museums",
             "label": "Музеи"
+        },
+        {
+            "link": "#trips",
+            "label": "Путешествия"
         }
     ]
 }