add openstreetmap to about page

Crabston · Apr 18, 2024 · afaf641 · afaf641
1 parent 89a1297
commit afaf641
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 1 deletion.
diff --git a/src/locales/de.ts b/src/locales/de.ts
@@ -257,6 +257,11 @@ export default function de(): Translation {
 						description: "Ronald Krebs ist ein Gründer von Crabston und Berater für diverse Dienstleistungen ausserhalb der Informatik. In seiner Jugend hat er den Beruf des Bildhauers erlernt und ausgeübt. Darüber hinaus hat er bereits verschiedene Firmen gegründet und leitet erfolgreich seit einigen Jahren Bargetzi Grabmalkunst GmbH.",
 					},
 				},
+				location: {
+					title: "Standort",
+					description: "Hier finden Sie unser Büro:",
+					mapCaption: "Öffne Karte in neuem Tab",
+				},
 			},
 			contact: {
 				title: "Kontakt",

diff --git a/src/pages/About/About.tsx b/src/pages/About/About.tsx
@@ -1,7 +1,8 @@
-import { Avatar, Card, Grid, Stack, Typography } from "@mui/material";
+import { Avatar, Box, Card, Grid, Stack, Typography } from "@mui/material";
 import Page from "../../components/common/Page";
 import InfoIcon from "@mui/icons-material/Info";
 import Diversity3Icon from "@mui/icons-material/Diversity3";
+import LocationOnIcon from "@mui/icons-material/LocationOn";
 import { useTranslation } from "react-i18next";
 import { Pages } from "../../type/page";
 import { Line, PageTitle, SectionTitle } from "../../components/Text";
@@ -66,6 +67,21 @@ export default function About() {
 							))}
 						</Grid>
 					</Card>
+					<Card id={"location"} sx={{padding: "2rem"}}>
+						<SectionTitle>
+							<LocationOnIcon /> {t("about.location.title")}
+						</SectionTitle>
+						<Typography>{t("about.location.description")}</Typography>
+						<Box sx={{height: {xs: "20rem", lg: "30rem"}}}>
+							<iframe
+								width="100%"
+								height="100%"
+								src="https://www.openstreetmap.org/export/embed.html?bbox=7.65324354171753%2C47.23486116259087%2C7.656784057617188%2C47.23674061367706&amp;layer=mapnik&amp;marker=47.235800896466536%2C7.655013799667358"></iframe>
+						</Box>
+						<Typography>
+							<a href="https://www.openstreetmap.org/?mlat=47.23580&amp;mlon=7.65501#map=19/47.23580/7.65501" rel="noreferrer" target="_blank">{t("about.location.mapCaption")}</a>
+						</Typography>
+					</Card>
 				</Stack>
 			</article>
 		</Page>

diff --git a/src/type/translation.ts b/src/type/translation.ts
@@ -106,6 +106,11 @@ export type Translation = {
 				nicholas: Person,
 				ronald: Person,
 			},
+			location: {
+				title: string,
+				description: string,
+				mapCaption: string,
+			},
 		},
 		contact: {
 			title: string,