From e439aad1db7876d5693f527d7db5ea3929de4165 Mon Sep 17 00:00:00 2001 From: Janis Date: Fri, 16 Dec 2022 17:13:47 +0100 Subject: [PATCH] [init] initlialize next app & convert old react app --- components/DiashowHomePage.jsx | 77 + components/Footer.jsx | 14 + components/GalleryFullscreen.jsx | 81 + components/GalleryGrid.jsx | 35 + components/LocaleSwitch.jsx | 76 + components/Map.jsx | 44 + components/Nav.jsx | 69 + firebase-config.js | 16 + next.config.js | 10 +- package-lock.json | 13825 ++++++++++++++++--------- package.json | 44 +- pages/_app.js | 7 - pages/_app.jsx | 16 + pages/about.jsx | 56 + pages/gallery.jsx | 66 + pages/index.js | 71 - pages/index.jsx | 84 + pages/legal.jsx | 94 + pages/pricing.jsx | 29 + pages/privacy.jsx | 9 + pages/surroundings.jsx | 66 + public/images/banner1.jpg | Bin 0 -> 825193 bytes public/images/banner2.jpg | Bin 0 -> 825193 bytes public/images/test.jpg | Bin 0 -> 193139 bytes public/images/test2.jpg | Bin 0 -> 203349 bytes styles/About.module.scss | 99 + styles/DiashowHomePage.module.scss | 5 + styles/Footer.module.scss | 45 + styles/Gallery.module.scss | 3 + styles/GalleryFullscreen.module.scss | 121 + styles/GalleryGrid.module.scss | 64 + styles/Home.module.css | 129 - styles/Home.module.scss | 122 + styles/Legal.module.scss | 27 + styles/Map.module.scss | 16 + styles/Nav.module.scss | 168 + styles/Pricing.module.scss | 0 styles/Privacy.module.scss | 0 styles/Surroundings.module.scss | 72 + styles/globals.css | 26 - styles/globals.scss | 108 + styles/variables.scss | 53 + 42 files changed, 10568 insertions(+), 5279 deletions(-) create mode 100644 components/DiashowHomePage.jsx create mode 100644 components/Footer.jsx create mode 100644 components/GalleryFullscreen.jsx create mode 100644 components/GalleryGrid.jsx create mode 100644 components/LocaleSwitch.jsx create mode 100644 components/Map.jsx create mode 100644 components/Nav.jsx create mode 100644 firebase-config.js delete mode 100644 pages/_app.js create mode 100644 pages/_app.jsx create mode 100644 pages/about.jsx create mode 100644 pages/gallery.jsx delete mode 100644 pages/index.js create mode 100644 pages/index.jsx create mode 100644 pages/legal.jsx create mode 100644 pages/pricing.jsx create mode 100644 pages/privacy.jsx create mode 100644 pages/surroundings.jsx create mode 100644 public/images/banner1.jpg create mode 100644 public/images/banner2.jpg create mode 100644 public/images/test.jpg create mode 100644 public/images/test2.jpg create mode 100644 styles/About.module.scss create mode 100644 styles/DiashowHomePage.module.scss create mode 100644 styles/Footer.module.scss create mode 100644 styles/Gallery.module.scss create mode 100644 styles/GalleryFullscreen.module.scss create mode 100644 styles/GalleryGrid.module.scss delete mode 100644 styles/Home.module.css create mode 100644 styles/Home.module.scss create mode 100644 styles/Legal.module.scss create mode 100644 styles/Map.module.scss create mode 100644 styles/Nav.module.scss create mode 100644 styles/Pricing.module.scss create mode 100644 styles/Privacy.module.scss create mode 100644 styles/Surroundings.module.scss delete mode 100644 styles/globals.css create mode 100644 styles/globals.scss create mode 100644 styles/variables.scss 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 ? ( +