|
|
|
@ -1,4 +1,9 @@
|
|
|
|
import { Paper, Flex, ScrollArea, Autocomplete, Title } from "@mantine/core";
|
|
|
|
import { Paper, Flex, ScrollArea, Autocomplete, Title } 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 { ArticleCardVertical } from "./ArticleCard";
|
|
|
|
import { ArticleCardVertical } from "./ArticleCard";
|
|
|
|
import { ArticleCardMobile } from "./ArticleCardMobile";
|
|
|
|
import { ArticleCardMobile } from "./ArticleCardMobile";
|
|
|
|
import Map, {
|
|
|
|
import Map, {
|
|
|
|
@ -18,7 +23,6 @@ import plus from "./assets/plus.png";
|
|
|
|
import minus from "./assets/minus.png";
|
|
|
|
import minus from "./assets/minus.png";
|
|
|
|
import pin from "./assets/pin.png";
|
|
|
|
import pin from "./assets/pin.png";
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
export function KartaPage() {
|
|
|
|
export function KartaPage() {
|
|
|
|
const mapRef = useRef(null);
|
|
|
|
const mapRef = useRef(null);
|
|
|
|
const [initial, setInitial] = useState(null);
|
|
|
|
const [initial, setInitial] = useState(null);
|
|
|
|
@ -27,6 +31,8 @@ export function KartaPage() {
|
|
|
|
const [selected, setSelected] = useState(-1);
|
|
|
|
const [selected, setSelected] = useState(-1);
|
|
|
|
const [cursor, setCursor] = useState("grab");
|
|
|
|
const [cursor, setCursor] = useState("grab");
|
|
|
|
const [popupInfo, setPopupInfo] = useState(null);
|
|
|
|
const [popupInfo, setPopupInfo] = useState(null);
|
|
|
|
|
|
|
|
const [openedMenu, menuactions] = useDisclosure(false);
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const host = "https://strapi.litmusmap.ru";
|
|
|
|
const host = "https://strapi.litmusmap.ru";
|
|
|
|
|
|
|
|
|
|
|
|
@ -37,11 +43,12 @@ export function KartaPage() {
|
|
|
|
pinImage.onload = () => mapRef.current.addImage("pin-marker", pinImage);
|
|
|
|
pinImage.onload = () => mapRef.current.addImage("pin-marker", pinImage);
|
|
|
|
|
|
|
|
|
|
|
|
const icons = initial ? ["prishvin", "ostrovskiy", "brusov"] : [];
|
|
|
|
const icons = initial ? ["prishvin", "ostrovskiy", "brusov"] : [];
|
|
|
|
icons.map(i => {
|
|
|
|
icons.map((i) => {
|
|
|
|
const iconImage = new Image();
|
|
|
|
const iconImage = new Image();
|
|
|
|
iconImage.src = `./markers/${i}.png`
|
|
|
|
iconImage.src = `./markers/${i}.png`;
|
|
|
|
iconImage.onload = () => mapRef.current.addImage(`${i}-marker`, iconImage);
|
|
|
|
iconImage.onload = () =>
|
|
|
|
})
|
|
|
|
mapRef.current.addImage(`${i}-marker`, iconImage);
|
|
|
|
|
|
|
|
});
|
|
|
|
};
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
// Load articles
|
|
|
|
// Load articles
|
|
|
|
@ -49,7 +56,7 @@ export function KartaPage() {
|
|
|
|
fetch(`${host}/api/articles?populate=*`)
|
|
|
|
fetch(`${host}/api/articles?populate=*`)
|
|
|
|
.then((r) => r.json())
|
|
|
|
.then((r) => r.json())
|
|
|
|
.then((d) => {
|
|
|
|
.then((d) => {
|
|
|
|
console.log(d.data)
|
|
|
|
console.log(d.data);
|
|
|
|
setInitial(d.data);
|
|
|
|
setInitial(d.data);
|
|
|
|
setArticles(d.data);
|
|
|
|
setArticles(d.data);
|
|
|
|
});
|
|
|
|
});
|
|
|
|
@ -138,279 +145,292 @@ export function KartaPage() {
|
|
|
|
};
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
return (
|
|
|
|
return (
|
|
|
|
<div style={{ position: "relative" }}>
|
|
|
|
<>
|
|
|
|
<Map
|
|
|
|
<HeaderSimple links={headerLinks.links} openedMenuKarta={openedMenu} menuactionskarta={menuactions}/>
|
|
|
|
ref={mapRef}
|
|
|
|
<div style={{ position: "relative" }}>
|
|
|
|
initialViewState={{
|
|
|
|
<Map
|
|
|
|
longitude: 35,
|
|
|
|
ref={mapRef}
|
|
|
|
latitude: 60,
|
|
|
|
initialViewState={{
|
|
|
|
zoom: 4,
|
|
|
|
longitude: 35,
|
|
|
|
}}
|
|
|
|
latitude: 60,
|
|
|
|
minZoom={3.5}
|
|
|
|
zoom: 4,
|
|
|
|
maxZoom={16}
|
|
|
|
}}
|
|
|
|
maxBounds={[
|
|
|
|
minZoom={3.5}
|
|
|
|
[-20, 35],
|
|
|
|
maxZoom={16}
|
|
|
|
[200, 80],
|
|
|
|
maxBounds={[
|
|
|
|
]}
|
|
|
|
[-20, 35],
|
|
|
|
style={{
|
|
|
|
[200, 80],
|
|
|
|
height: "90vh",
|
|
|
|
]}
|
|
|
|
}}
|
|
|
|
style={{
|
|
|
|
cursor={cursor}
|
|
|
|
height: "90vh",
|
|
|
|
mapStyle={mapstyle}
|
|
|
|
}}
|
|
|
|
interactiveLayerIds={["points-layer"]}
|
|
|
|
cursor={cursor}
|
|
|
|
onClick={(e) => {
|
|
|
|
mapStyle={mapstyle}
|
|
|
|
// console.log(e.features);
|
|
|
|
interactiveLayerIds={["points-layer"]}
|
|
|
|
if (e.features[0]) {
|
|
|
|
onClick={(e) => {
|
|
|
|
setSelected(e.features[0].properties.id);
|
|
|
|
// console.log(e.features);
|
|
|
|
if (mapRef.current.getZoom() < 14) {
|
|
|
|
if (e.features[0]) {
|
|
|
|
mapRef.current.flyTo({
|
|
|
|
setSelected(e.features[0].properties.id);
|
|
|
|
center: e.features[0].geometry.coordinates,
|
|
|
|
if (mapRef.current.getZoom() < 14) {
|
|
|
|
zoom: mapRef.current.getZoom() + 6,
|
|
|
|
mapRef.current.flyTo({
|
|
|
|
});
|
|
|
|
center: e.features[0].geometry.coordinates,
|
|
|
|
|
|
|
|
zoom: mapRef.current.getZoom() + 6,
|
|
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
} else {
|
|
|
|
|
|
|
|
setPopupInfo({
|
|
|
|
|
|
|
|
longitude: e.features[0].geometry.coordinates[0],
|
|
|
|
|
|
|
|
latitude: e.features[0].geometry.coordinates[1],
|
|
|
|
|
|
|
|
id: e.features[0].properties.id,
|
|
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
}
|
|
|
|
} else {
|
|
|
|
} else {
|
|
|
|
setPopupInfo({
|
|
|
|
setSelected(-1);
|
|
|
|
longitude: e.features[0].geometry.coordinates[0],
|
|
|
|
|
|
|
|
latitude: e.features[0].geometry.coordinates[1],
|
|
|
|
|
|
|
|
id: e.features[0].properties.id,
|
|
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
}
|
|
|
|
}
|
|
|
|
} else {
|
|
|
|
}}
|
|
|
|
setSelected(-1);
|
|
|
|
onMouseEnter={() => setCursor("pointer")}
|
|
|
|
}
|
|
|
|
onMouseLeave={() => setCursor("grab")}
|
|
|
|
}}
|
|
|
|
onLoad={handleMapLoad}
|
|
|
|
onMouseEnter={() => setCursor("pointer")}
|
|
|
|
|
|
|
|
onMouseLeave={() => setCursor("grab")}
|
|
|
|
|
|
|
|
onLoad={handleMapLoad}
|
|
|
|
|
|
|
|
>
|
|
|
|
|
|
|
|
<Source
|
|
|
|
|
|
|
|
id="points"
|
|
|
|
|
|
|
|
type="vector"
|
|
|
|
|
|
|
|
tiles={[`${host}/tiles/{z}/{x}/{y}.pbf`]}
|
|
|
|
|
|
|
|
maxzoom={10}
|
|
|
|
|
|
|
|
>
|
|
|
|
>
|
|
|
|
{popupInfo && (
|
|
|
|
<Source
|
|
|
|
<Popup
|
|
|
|
id="points"
|
|
|
|
key={popupInfo.id}
|
|
|
|
type="vector"
|
|
|
|
longitude={popupInfo.longitude}
|
|
|
|
tiles={[`${host}/tiles/{z}/{x}/{y}.pbf`]}
|
|
|
|
latitude={popupInfo.latitude}
|
|
|
|
maxzoom={10}
|
|
|
|
anchor="top"
|
|
|
|
>
|
|
|
|
closeButton={false}
|
|
|
|
{popupInfo && (
|
|
|
|
onClose={() => setPopupInfo(null)}
|
|
|
|
<Popup
|
|
|
|
>
|
|
|
|
key={popupInfo.id}
|
|
|
|
<a href={`/article/${popupInfo.id}`}>подробнее</a>
|
|
|
|
longitude={popupInfo.longitude}
|
|
|
|
</Popup>
|
|
|
|
latitude={popupInfo.latitude}
|
|
|
|
)}
|
|
|
|
anchor="top"
|
|
|
|
<Layer
|
|
|
|
closeButton={false}
|
|
|
|
id="points-layer"
|
|
|
|
onClose={() => setPopupInfo(null)}
|
|
|
|
type="circle"
|
|
|
|
>
|
|
|
|
source-layer="layer"
|
|
|
|
<a href={`/article/${popupInfo.id}`}>подробнее</a>
|
|
|
|
filter={
|
|
|
|
</Popup>
|
|
|
|
articles === null || articles.length == 0
|
|
|
|
)}
|
|
|
|
? false
|
|
|
|
<Layer
|
|
|
|
: ["in", "id", ...articles.map((a) => a.id)]
|
|
|
|
id="points-layer"
|
|
|
|
}
|
|
|
|
type="circle"
|
|
|
|
paint={{
|
|
|
|
source-layer="layer"
|
|
|
|
"circle-color": [
|
|
|
|
filter={
|
|
|
|
"match",
|
|
|
|
articles === null || articles.length == 0
|
|
|
|
["get", "id"],
|
|
|
|
? false
|
|
|
|
selected,
|
|
|
|
: ["in", "id", ...articles.map((a) => a.id)]
|
|
|
|
"#e66a5a",
|
|
|
|
}
|
|
|
|
"#F2994A",
|
|
|
|
paint={{
|
|
|
|
],
|
|
|
|
"circle-color": [
|
|
|
|
"circle-radius": ["step", ["zoom"], 8, 7, 20, 12, 40, 14, 60],
|
|
|
|
"match",
|
|
|
|
"circle-opacity": ["step", ["zoom"], 0.8, 7, 0],
|
|
|
|
["get", "id"],
|
|
|
|
}}
|
|
|
|
selected,
|
|
|
|
/>
|
|
|
|
"#e66a5a",
|
|
|
|
<Layer
|
|
|
|
"#F2994A",
|
|
|
|
id="icons-layer"
|
|
|
|
],
|
|
|
|
type="symbol"
|
|
|
|
"circle-radius": ["step", ["zoom"], 8, 7, 20, 12, 40, 14, 60],
|
|
|
|
source-layer="layer"
|
|
|
|
"circle-opacity": ["step", ["zoom"], 0.8, 7, 0],
|
|
|
|
filter={
|
|
|
|
}}
|
|
|
|
articles === null || articles.length == 0
|
|
|
|
/>
|
|
|
|
? false
|
|
|
|
<Layer
|
|
|
|
: ["in", "id", ...articles.map((a) => a.id)]
|
|
|
|
id="icons-layer"
|
|
|
|
}
|
|
|
|
type="symbol"
|
|
|
|
layout={{
|
|
|
|
source-layer="layer"
|
|
|
|
"icon-image": "pin-marker",
|
|
|
|
filter={
|
|
|
|
"icon-size": ["interpolate", ["linear"], ["zoom"], 7, 0.5, 12, 1],
|
|
|
|
articles === null || articles.length == 0
|
|
|
|
}}
|
|
|
|
? false
|
|
|
|
minzoom={7}
|
|
|
|
: ["in", "id", ...articles.map((a) => a.id)]
|
|
|
|
maxzoom={12}
|
|
|
|
}
|
|
|
|
/>
|
|
|
|
layout={{
|
|
|
|
<Layer
|
|
|
|
"icon-image": "pin-marker",
|
|
|
|
id="portret-layer"
|
|
|
|
"icon-size": [
|
|
|
|
type="symbol"
|
|
|
|
"interpolate",
|
|
|
|
source-layer="layer"
|
|
|
|
["linear"],
|
|
|
|
filter={
|
|
|
|
["zoom"],
|
|
|
|
articles === null || articles.length == 0
|
|
|
|
7,
|
|
|
|
? false
|
|
|
|
0.5,
|
|
|
|
: ["in", "id", ...articles.map((a) => a.id)]
|
|
|
|
12,
|
|
|
|
}
|
|
|
|
1,
|
|
|
|
layout={{
|
|
|
|
],
|
|
|
|
"icon-image": [
|
|
|
|
}}
|
|
|
|
"match",
|
|
|
|
minzoom={7}
|
|
|
|
["get", "id"],
|
|
|
|
maxzoom={12}
|
|
|
|
6,
|
|
|
|
/>
|
|
|
|
"ostrovskiy-marker",
|
|
|
|
<Layer
|
|
|
|
7,
|
|
|
|
id="portret-layer"
|
|
|
|
"brusov-marker",
|
|
|
|
type="symbol"
|
|
|
|
1,
|
|
|
|
source-layer="layer"
|
|
|
|
"prishvin-marker",
|
|
|
|
filter={
|
|
|
|
"pin-marker",
|
|
|
|
articles === null || articles.length == 0
|
|
|
|
],
|
|
|
|
? false
|
|
|
|
"icon-size": [
|
|
|
|
: ["in", "id", ...articles.map((a) => a.id)]
|
|
|
|
"interpolate",
|
|
|
|
}
|
|
|
|
["linear"],
|
|
|
|
layout={{
|
|
|
|
["zoom"],
|
|
|
|
"icon-image": [
|
|
|
|
12,
|
|
|
|
"match",
|
|
|
|
0.05,
|
|
|
|
["get", "id"],
|
|
|
|
14,
|
|
|
|
6,
|
|
|
|
0.1,
|
|
|
|
"ostrovskiy-marker",
|
|
|
|
],
|
|
|
|
7,
|
|
|
|
|
|
|
|
"brusov-marker",
|
|
|
|
|
|
|
|
1,
|
|
|
|
|
|
|
|
"prishvin-marker",
|
|
|
|
|
|
|
|
"pin-marker",
|
|
|
|
|
|
|
|
],
|
|
|
|
|
|
|
|
"icon-size": [
|
|
|
|
|
|
|
|
"interpolate",
|
|
|
|
|
|
|
|
["linear"],
|
|
|
|
|
|
|
|
["zoom"],
|
|
|
|
|
|
|
|
12,
|
|
|
|
|
|
|
|
0.05,
|
|
|
|
|
|
|
|
14,
|
|
|
|
|
|
|
|
0.1,
|
|
|
|
|
|
|
|
],
|
|
|
|
|
|
|
|
}}
|
|
|
|
|
|
|
|
minzoom={12}
|
|
|
|
|
|
|
|
/>
|
|
|
|
|
|
|
|
</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",
|
|
|
|
}}
|
|
|
|
}}
|
|
|
|
minzoom={12}
|
|
|
|
|
|
|
|
/>
|
|
|
|
/>
|
|
|
|
</Source>
|
|
|
|
</Map>
|
|
|
|
<ScaleControl position="bottom-right" />
|
|
|
|
|
|
|
|
<ZoomControl bottom="35px" right="4px" />
|
|
|
|
{/* Search mobile */}
|
|
|
|
<GeolocateControl
|
|
|
|
<Paper
|
|
|
|
showAccuracyCircle={false}
|
|
|
|
shadow={"md"}
|
|
|
|
position="bottom-right"
|
|
|
|
radius={0}
|
|
|
|
|
|
|
|
display={!openedMenu && 'none'}
|
|
|
|
style={{
|
|
|
|
style={{
|
|
|
|
marginBottom: "55px",
|
|
|
|
position: "absolute",
|
|
|
|
marginRight: "14px",
|
|
|
|
top: 0,
|
|
|
|
background: "none",
|
|
|
|
left: 0,
|
|
|
|
boxShadow: "none",
|
|
|
|
right: 0,
|
|
|
|
|
|
|
|
height: "340px",
|
|
|
|
|
|
|
|
opacity: "95%",
|
|
|
|
|
|
|
|
padding: "55px 0 1rem 1rem"
|
|
|
|
}}
|
|
|
|
}}
|
|
|
|
/>
|
|
|
|
sx={{
|
|
|
|
</Map>
|
|
|
|
"@media (min-width: 60em)": {
|
|
|
|
|
|
|
|
display: "none",
|
|
|
|
{/* Search mobile */}
|
|
|
|
},
|
|
|
|
<Paper
|
|
|
|
}}
|
|
|
|
shadow={"md"}
|
|
|
|
>
|
|
|
|
radius={0}
|
|
|
|
<Autocomplete
|
|
|
|
style={{
|
|
|
|
|
|
|
|
position: "absolute",
|
|
|
|
|
|
|
|
top: 0,
|
|
|
|
|
|
|
|
left: 0,
|
|
|
|
|
|
|
|
right: 0,
|
|
|
|
|
|
|
|
height: "300px",
|
|
|
|
|
|
|
|
opacity: "95%",
|
|
|
|
|
|
|
|
padding: "1rem 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}
|
|
|
|
mr={20}
|
|
|
|
>
|
|
|
|
mb={10}
|
|
|
|
{articles !== null &&
|
|
|
|
placeholder="Поиск"
|
|
|
|
articles.length > 0 &&
|
|
|
|
limit={2}
|
|
|
|
articles.map((article) => (
|
|
|
|
value={search}
|
|
|
|
<ArticleCardMobile
|
|
|
|
onChange={setSearch}
|
|
|
|
key={article.id}
|
|
|
|
data={[]}
|
|
|
|
id={article.id}
|
|
|
|
/>
|
|
|
|
image={
|
|
|
|
<ScrollArea h={"225px"} type="auto">
|
|
|
|
article.attributes.cover.data !== null
|
|
|
|
<Flex
|
|
|
|
? host + article.attributes.cover.data.attributes.url
|
|
|
|
// mih={50}
|
|
|
|
: ""
|
|
|
|
gap="xs"
|
|
|
|
}
|
|
|
|
justify="flex-start"
|
|
|
|
category="музеи"
|
|
|
|
align="start"
|
|
|
|
title={article.attributes.title}
|
|
|
|
direction="column"
|
|
|
|
address={article.attributes.address}
|
|
|
|
wrap="wrap"
|
|
|
|
longitude={article.attributes.longitude}
|
|
|
|
mr={20}
|
|
|
|
latitude={article.attributes.latitude}
|
|
|
|
>
|
|
|
|
selected={selected}
|
|
|
|
{articles !== null &&
|
|
|
|
clickAddressAction={handleAddressClick}
|
|
|
|
articles.length > 0 &&
|
|
|
|
/>
|
|
|
|
articles.map((article) => (
|
|
|
|
))}
|
|
|
|
<ArticleCardMobile
|
|
|
|
</Flex>
|
|
|
|
key={article.id}
|
|
|
|
</ScrollArea>
|
|
|
|
id={article.id}
|
|
|
|
</Paper>
|
|
|
|
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 */}
|
|
|
|
{/* Search pc */}
|
|
|
|
<Paper
|
|
|
|
<Paper
|
|
|
|
shadow={"md"}
|
|
|
|
shadow={"md"}
|
|
|
|
withBorder
|
|
|
|
withBorder
|
|
|
|
style={{
|
|
|
|
style={{
|
|
|
|
position: "absolute",
|
|
|
|
position: "absolute",
|
|
|
|
top: "1rem",
|
|
|
|
top: "1rem",
|
|
|
|
left: "1rem",
|
|
|
|
left: "1rem",
|
|
|
|
width: "36rem",
|
|
|
|
width: "36rem",
|
|
|
|
height: "83vh",
|
|
|
|
height: "83vh",
|
|
|
|
opacity: "95%",
|
|
|
|
opacity: "95%",
|
|
|
|
padding: "1rem 0 1rem 1rem",
|
|
|
|
padding: "1rem 0 1rem 1rem",
|
|
|
|
}}
|
|
|
|
}}
|
|
|
|
sx={{
|
|
|
|
sx={{
|
|
|
|
"@media (max-width: 60em)": {
|
|
|
|
"@media (max-width: 60em)": {
|
|
|
|
display: "none",
|
|
|
|
display: "none",
|
|
|
|
},
|
|
|
|
},
|
|
|
|
}}
|
|
|
|
}}
|
|
|
|
>
|
|
|
|
>
|
|
|
|
<Title order={3} mb={10}>
|
|
|
|
<Title order={3} mb={10}>
|
|
|
|
Музеи
|
|
|
|
Музеи
|
|
|
|
</Title>
|
|
|
|
</Title>
|
|
|
|
<Autocomplete
|
|
|
|
<Autocomplete
|
|
|
|
mr={20}
|
|
|
|
|
|
|
|
mb={30}
|
|
|
|
|
|
|
|
placeholder="Поиск"
|
|
|
|
|
|
|
|
limit={2}
|
|
|
|
|
|
|
|
value={search}
|
|
|
|
|
|
|
|
onChange={setSearch}
|
|
|
|
|
|
|
|
data={[]}
|
|
|
|
|
|
|
|
/>
|
|
|
|
|
|
|
|
<ScrollArea h={"67vh"} type="auto">
|
|
|
|
|
|
|
|
<Flex
|
|
|
|
|
|
|
|
mih={50}
|
|
|
|
|
|
|
|
gap="md"
|
|
|
|
|
|
|
|
justify="flex-start"
|
|
|
|
|
|
|
|
align="start"
|
|
|
|
|
|
|
|
direction="column"
|
|
|
|
|
|
|
|
wrap="wrap"
|
|
|
|
|
|
|
|
mr={20}
|
|
|
|
mr={20}
|
|
|
|
>
|
|
|
|
mb={30}
|
|
|
|
{articles !== null &&
|
|
|
|
placeholder="Поиск"
|
|
|
|
articles.length > 0 &&
|
|
|
|
limit={2}
|
|
|
|
articles.map((article) => (
|
|
|
|
value={search}
|
|
|
|
<ArticleCardVertical
|
|
|
|
onChange={setSearch}
|
|
|
|
key={article.id}
|
|
|
|
data={[]}
|
|
|
|
id={article.id}
|
|
|
|
/>
|
|
|
|
image={
|
|
|
|
<ScrollArea h={"67vh"} type="auto">
|
|
|
|
article.attributes.cover.data !== null
|
|
|
|
<Flex
|
|
|
|
? host + article.attributes.cover.data.attributes.url
|
|
|
|
mih={50}
|
|
|
|
: ""
|
|
|
|
gap="md"
|
|
|
|
}
|
|
|
|
justify="flex-start"
|
|
|
|
category="музеи"
|
|
|
|
align="start"
|
|
|
|
title={article.attributes.title}
|
|
|
|
direction="column"
|
|
|
|
address={article.attributes.address}
|
|
|
|
wrap="wrap"
|
|
|
|
longitude={article.attributes.longitude}
|
|
|
|
mr={20}
|
|
|
|
latitude={article.attributes.latitude}
|
|
|
|
>
|
|
|
|
selected={selected}
|
|
|
|
{articles !== null &&
|
|
|
|
clickAddressAction={handleAddressClick}
|
|
|
|
articles.length > 0 &&
|
|
|
|
/>
|
|
|
|
articles.map((article) => (
|
|
|
|
))}
|
|
|
|
<ArticleCardVertical
|
|
|
|
</Flex>
|
|
|
|
key={article.id}
|
|
|
|
</ScrollArea>
|
|
|
|
id={article.id}
|
|
|
|
</Paper>
|
|
|
|
image={
|
|
|
|
</div>
|
|
|
|
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>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<FooterLinks data={footerLinks.data} />
|
|
|
|
|
|
|
|
</>
|
|
|
|
);
|
|
|
|
);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
gman
2 years ago