diff --git a/components/DiashowHomePage.jsx b/components/DiashowHomePage.jsx new file mode 100644 index 0000000..7f54041 --- /dev/null +++ b/components/DiashowHomePage.jsx @@ -0,0 +1,77 @@ +import { collection, getDocs } from "firebase/firestore"; +import { useEffect, useState } from "react"; +import SimpleImageSlider from "react-simple-image-slider"; +import { Slide } from "react-slideshow-image"; // https://react-slideshow-image.netlify.app/?path=/story/examples-slide--default +import { db } from "../firebase-config"; +import "../styles/DiashowHomePage.module.scss"; + +function DiashowHomePage(props) { + const [imageSrc, setImageSrc] = useState([]); + const [height, setHeight] = useState(500); + const diashowImagesCollectionRef = collection(db, "diashowImages"); + + useEffect(() => { + async function getImages() { + const data = await getDocs(diashowImagesCollectionRef); + + const urls = []; + data.docs.forEach((doc) => { + urls.push(doc.data().url); + }); + + setImageSrc(urls); + } + getImages(); + }, []); + + if (typeof window !== "undefined") { + window.addEventListener("resize", () => { + setHeight(window.innerWidth <= 3000 ? 500 : 800); + }); + } + + return ( +
+ {imageSrc?.length > 0 ? ( + + ) : ( + "" + )} + + {/* {diashowImages?.length > 0 ? ( + + {diashowImages.map((diashowImage, index) => ( +
+
+ {diashowImage.showTitle ? ( + {renderTitle(diashowImage, props.titleLanguage)} + ) : ( + "" + )} +
+
+ ))} + + ) : ( + "" + )} */} +
+ ); +} + +export default DiashowHomePage; diff --git a/components/Footer.jsx b/components/Footer.jsx new file mode 100644 index 0000000..d23fb21 --- /dev/null +++ b/components/Footer.jsx @@ -0,0 +1,14 @@ +import Link from "next/link"; +import styles from "../styles/Footer.module.scss"; + +export default function Footer() { + return ( +
+ +

© domain.de

+
+ ); +} diff --git a/components/GalleryFullscreen.jsx b/components/GalleryFullscreen.jsx new file mode 100644 index 0000000..f844043 --- /dev/null +++ b/components/GalleryFullscreen.jsx @@ -0,0 +1,81 @@ +/* eslint-disable @next/next/no-img-element */ +import { + faAngleLeft, + faAngleRight, + faClose, +} from "@fortawesome/free-solid-svg-icons"; +import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; +import { useEffect, useState } from "react"; +import styles from "../styles/GalleryFullscreen.module.scss"; +import { useRouter } from "next/navigation"; +function GalleryFullscreen({ images, activeImage }) { + const router = useRouter(); + const locale = router.locale; + const [currentImgIndex, setCurrentImgIndex] = useState(); + + useEffect(() => { + images.forEach((image, i) => { + if (image.id === activeImage.id) { + setCurrentImgIndex(i); + } + }); + }, [activeImage, images]); + + return ( +
+ +
+

{locale === "en" ? activeImage.title.en : activeImage.title.de}

+
+ {currentImgIndex + 1} / {images.length} +
+
+ +
+ {locale +
+ + + currentImgIndex > 0 + ? router.push({ + search: "activeImg=" + images[currentImgIndex - 1].id, + }) + : router.push({ + search: "activeImg=" + images[images.length - 1].id, + }) + } + /> + + currentImgIndex < images.length - 1 + ? router.push({ + search: "activeImg=" + images[currentImgIndex + 1].id, + }) + : router.push({ + search: "activeImg=" + images[0].id, + }) + } + /> + + router.push("/gallery")} + /> +
+ ); +} + +export default GalleryFullscreen; diff --git a/components/GalleryGrid.jsx b/components/GalleryGrid.jsx new file mode 100644 index 0000000..e4a7043 --- /dev/null +++ b/components/GalleryGrid.jsx @@ -0,0 +1,35 @@ +/* eslint-disable @next/next/no-img-element */ +import { useEffect, useState } from "react"; +import styles from "../styles/GalleryGrid.module.scss"; +import { useRouter } from "next/router"; + +function GalleryGrid({ images, baseURL }) { + const router = useRouter(); + const locale = router.locale; + + return ( +
+
+ {images.length > 0 + ? images.map((image, i) => ( +
router.push({ search: "activeImg=" + image.id })} + className="noSelect" + > + {locale +
+

{locale === "en" ? image.title.en : image.title.de}

+
+
+ )) + : ""} +
+
+ ); +} + +export default GalleryGrid; diff --git a/components/LocaleSwitch.jsx b/components/LocaleSwitch.jsx new file mode 100644 index 0000000..0bdc446 --- /dev/null +++ b/components/LocaleSwitch.jsx @@ -0,0 +1,76 @@ +import React, { useContext, useEffect } from "react"; +import Select from "react-select"; +import getConfig from "next/config"; +import { useRouter } from "next/router"; + +export default function LocaleSwitch({ styles }) { + const router = useRouter(); + + let selectOptions = [ + { value: "en", label: "English" }, + { value: "de", label: "Deutsch" }, + ]; + + const customStyles = { + control: (provided, state) => ({ + ...provided, + background: "#fff", + borderColor: "#9e9e9ec0", + minHeight: "30px", + height: "30px", + boxShadow: state.isFocused ? null : null, + fontSize: "0.7em", + }), + + valueContainer: (provided, state) => ({ + ...provided, + height: "30px", + padding: "0 0 0 5px", + margin: "-2px 0 0 0", + }), + + input: (provided, state) => ({ + ...provided, + margin: "0px", + }), + indicatorSeparator: (state) => ({ + display: "none", + padding: 0, + margin: 0, + }), + indicatorsContainer: (provided, state) => ({ + ...provided, + height: "30px", + padding: "0", + }), + dropdownIndicator: (provided, state) => ({ + ...provided, + padding: "0", + }), + option: (provided, state) => ({ + ...provided, + padding: "5px", + fontSize: "0.7em", + }), + }; + + return ( +
+ {router.locale !== null ? ( +