61 lines
1.6 KiB
TypeScript
61 lines
1.6 KiB
TypeScript
import { Box, Typography, IconButton } from "@mui/material";
|
||
import { Close } from "@mui/icons-material";
|
||
import { useMapData } from "./MapDataContext";
|
||
|
||
export function SightInfoWidget() {
|
||
const { selectedSight, setSelectedSight } = useMapData();
|
||
|
||
if (!selectedSight) {
|
||
return null;
|
||
}
|
||
|
||
return (
|
||
<Box
|
||
sx={{
|
||
position: "absolute",
|
||
bottom: 16,
|
||
left: "50%",
|
||
transform: "translateX(-50%)",
|
||
backgroundColor: "rgba(0, 0, 0, 0.9)",
|
||
color: "white",
|
||
padding: "12px 16px",
|
||
borderRadius: "4px",
|
||
minWidth: 250,
|
||
maxWidth: 400,
|
||
backdropFilter: "blur(10px)",
|
||
border: "1px solid rgba(255, 255, 255, 0.2)",
|
||
zIndex: 1000,
|
||
boxShadow: "0 4px 12px rgba(0, 0, 0, 0.3)",
|
||
}}
|
||
>
|
||
<Box
|
||
sx={{
|
||
display: "flex",
|
||
justifyContent: "space-between",
|
||
alignItems: "flex-start",
|
||
mb: 1,
|
||
}}
|
||
>
|
||
<Typography variant="h6" sx={{ fontWeight: "bold", color: "#fff" }}>
|
||
{selectedSight.name}
|
||
</Typography>
|
||
<IconButton
|
||
size="small"
|
||
onClick={() => setSelectedSight(undefined)}
|
||
sx={{ color: "#fff", p: 0, minWidth: 24, width: 24, height: 24 }}
|
||
>
|
||
<Close fontSize="small" />
|
||
</IconButton>
|
||
</Box>
|
||
|
||
<Typography variant="body2" sx={{ color: "#ccc", mb: 1 }}>
|
||
{selectedSight.address}
|
||
</Typography>
|
||
|
||
<Typography variant="caption" sx={{ color: "#999" }}>
|
||
Город: {selectedSight.city}
|
||
</Typography>
|
||
</Box>
|
||
);
|
||
}
|