141 lines
4.0 KiB
TypeScript
141 lines
4.0 KiB
TypeScript
import { Stack, Typography, Box, IconButton } from "@mui/material";
|
||
import { Close } from "@mui/icons-material";
|
||
import { Landmark } from "lucide-react";
|
||
import { useMapData } from "./MapDataContext";
|
||
|
||
export function Widgets() {
|
||
const { selectedSight, setSelectedSight } = useMapData();
|
||
|
||
return (
|
||
<Stack
|
||
direction="column"
|
||
spacing={2}
|
||
position="absolute"
|
||
top={32}
|
||
left={32}
|
||
sx={{ pointerEvents: "none" }}
|
||
>
|
||
<Stack
|
||
bgcolor="primary.main"
|
||
width={361}
|
||
height={96}
|
||
p={2}
|
||
m={2}
|
||
borderRadius={2}
|
||
alignItems="center"
|
||
justifyContent="center"
|
||
>
|
||
<Typography variant="h6" sx={{ color: "#fff" }}>
|
||
Станция
|
||
</Typography>
|
||
</Stack>
|
||
|
||
{/* Виджет выбранной достопримечательности (заменяет виджет погоды) */}
|
||
<Stack
|
||
bgcolor="primary.main"
|
||
width={223}
|
||
height={262}
|
||
p={2}
|
||
m={2}
|
||
borderRadius={2}
|
||
sx={{
|
||
pointerEvents: "auto",
|
||
position: "relative",
|
||
overflow: "hidden",
|
||
}}
|
||
>
|
||
{selectedSight ? (
|
||
<Box
|
||
sx={{ height: "100%", display: "flex", flexDirection: "column" }}
|
||
>
|
||
{/* Заголовок с кнопкой закрытия */}
|
||
<Box
|
||
sx={{
|
||
display: "flex",
|
||
justifyContent: "space-between",
|
||
alignItems: "flex-start",
|
||
mb: 1,
|
||
}}
|
||
>
|
||
<Box sx={{ display: "flex", alignItems: "center", gap: 0.5 }}>
|
||
<Landmark size={16} />
|
||
<Typography
|
||
variant="subtitle2"
|
||
sx={{ color: "#fff", fontWeight: "bold" }}
|
||
>
|
||
{selectedSight.name}
|
||
</Typography>
|
||
</Box>
|
||
<IconButton
|
||
size="small"
|
||
onClick={() => setSelectedSight(undefined)}
|
||
sx={{
|
||
color: "#fff",
|
||
p: 0,
|
||
minWidth: 20,
|
||
width: 20,
|
||
height: 20,
|
||
"&:hover": { backgroundColor: "rgba(255, 255, 255, 0.1)" },
|
||
}}
|
||
>
|
||
<Close fontSize="small" />
|
||
</IconButton>
|
||
</Box>
|
||
|
||
{/* Описание достопримечательности */}
|
||
{selectedSight.address && (
|
||
<Typography
|
||
variant="caption"
|
||
sx={{
|
||
color: "#fff",
|
||
mb: 1,
|
||
opacity: 0.9,
|
||
lineHeight: 1.3,
|
||
overflow: "hidden",
|
||
textOverflow: "ellipsis",
|
||
display: "-webkit-box",
|
||
WebkitLineClamp: 3,
|
||
WebkitBoxOrient: "vertical",
|
||
}}
|
||
>
|
||
{selectedSight.address}
|
||
</Typography>
|
||
)}
|
||
|
||
{/* Город */}
|
||
{selectedSight.city && (
|
||
<Typography
|
||
variant="caption"
|
||
sx={{
|
||
color: "#fff",
|
||
opacity: 0.7,
|
||
mt: "auto",
|
||
}}
|
||
>
|
||
Город: {selectedSight.city}
|
||
</Typography>
|
||
)}
|
||
</Box>
|
||
) : (
|
||
<Box
|
||
sx={{
|
||
height: "100%",
|
||
display: "flex",
|
||
flexDirection: "column",
|
||
alignItems: "center",
|
||
gap: 5,
|
||
justifyContent: "center",
|
||
textAlign: "center",
|
||
}}
|
||
>
|
||
<Landmark size={32} />
|
||
<Typography variant="body2" sx={{ color: "#fff", opacity: 0.8 }}>
|
||
Выберите достопримечательность
|
||
</Typography>
|
||
</Box>
|
||
)}
|
||
</Stack>
|
||
</Stack>
|
||
);
|
||
}
|