diff --git a/src/components/sidebar/defibrillatorDetails.tsx b/src/components/sidebar/defibrillatorDetails.tsx index 9e7afe5..dc35ddf 100644 --- a/src/components/sidebar/defibrillatorDetails.tsx +++ b/src/components/sidebar/defibrillatorDetails.tsx @@ -8,7 +8,7 @@ import { mdiInformationOutline, mdiMapMarkerOutline, mdiPhoneOutline, } from "@mdi/js"; import Icon from "@mdi/react"; -import ImageGallery from "react-image-gallery"; +import ImageGallery, { ReactImageGalleryItem } from "react-image-gallery"; import "react-image-gallery/styles/css/image-gallery.css"; import { CloseSidebarButton, @@ -23,7 +23,7 @@ import { CheckDateField } from "./verificationDate"; import { DefibrillatorData } from "../../model/defibrillatorData"; import DetailTextRow from "./detailTextRow"; -const images = [ +const testImages: Array = [ { original: "https://picsum.photos/id/1018/1000/600/", thumbnail: "https://picsum.photos/id/1018/250/150/", @@ -54,6 +54,18 @@ function accessColourClass(access: string): string { return accessToColourMapping.default; } +function photoGallery(images: Array) { + if (images.length > 0) { + return ( +
+ 1} /> +
+
+ ); + } + return null; +} + const DefibrillatorDetails: FC = (props) => { const { t, i18n: { resolvedLanguage } } = useTranslation(); const { @@ -65,6 +77,7 @@ const DefibrillatorDetails: FC = (props) => { || data.tags["defibrillator:location"]; const levelText = data.tags.level ? ` (${t("sidebar.level")}: ${data.tags.level})` : ""; const indoorText = data.tags.indoor ? t(`indoor.${data.tags.indoor}`) + levelText : ""; + return (