[init] initlialize next app & convert old react app

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 (
+		<div className="diashow-div">
+			{imageSrc?.length > 0 ? (
+				<SimpleImageSlider
+					width={"100%"}
+					height={height}
+					images={imageSrc}
+					showBullets={true}
+					showNavs={true}
+					autoPlay={true}
+					autoPlayDelay={15}
+					loop={true}
+					slideDuration={1}
+				/>
+			) : (
+				""
+			)}
+
+			{/* {diashowImages?.length > 0 ? (
+        <Slide transitionDuration={1000} autoplay={false}>
+          {diashowImages.map((diashowImage, index) => (
+            <div className="each-slide" key={index}>
+              <div
+                style={{
+                  backgroundImage: `url(${diashowImage.url})`,
+                  height: props.height,
+                }}
+              >
+                {diashowImage.showTitle ? (
+                  <span>{renderTitle(diashowImage, props.titleLanguage)}</span>
+                ) : (
+                  ""
+                )}
+              </div>
+            </div>
+          ))}
+        </Slide>
+      ) : (
+        ""
+      )} */}
+		</div>
+	);
+}
+
+export default DiashowHomePage;

components/Footer.jsx

@@ -0,0 +1,14 @@
+import Link from "next/link";
+import styles from "../styles/Footer.module.scss";
+
+export default function Footer() {
+	return (
+		<div className={styles.footer}>
+			<ul className={styles.footerLinks}>
+				<Link href="/legal">Legal Notice | Impressum</Link>
+				<Link href="/privacy">Privacy | Datenschutz</Link>
+			</ul>
+			<p className={styles.copyrightText}>&#169; domain.de</p>
+		</div>
+	);
+}

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 (
+		<div className={styles.galleryFullscreen}>
+			<style>
+				{`* {
+                overflow: hidden !important;
+            }`}
+			</style>
+			<div className={styles.galleryFullscreenTitle}>
+				<h2>{locale === "en" ? activeImage.title.en : activeImage.title.de}</h2>
+				<div>
+					{currentImgIndex + 1} / {images.length}
+				</div>
+			</div>
+
+			<div className={styles.galleryFullscreenImgContainer}>
+				<img
+					src={activeImage.url}
+					alt={locale === "en" ? activeImage.title.en : activeImage.title.de}
+				/>
+			</div>
+
+			<FontAwesomeIcon
+				icon={faAngleLeft}
+				className={`${styles.galleryFullscreenBtn} ${styles.galleryFullscreenBtnCycle} ${styles.galleryFullscreenPrev}`}
+				onClick={() =>
+					currentImgIndex > 0
+						? router.push({
+								search: "activeImg=" + images[currentImgIndex - 1].id,
+						  })
+						: router.push({
+								search: "activeImg=" + images[images.length - 1].id,
+						  })
+				}
+			/>
+			<FontAwesomeIcon
+				icon={faAngleRight}
+				className={`${styles.galleryFullscreenBtn} ${styles.galleryFullscreenBtnCycle} ${styles.galleryFullscreenNext}`}
+				onClick={() =>
+					currentImgIndex < images.length - 1
+						? router.push({
+								search: "activeImg=" + images[currentImgIndex + 1].id,
+						  })
+						: router.push({
+								search: "activeImg=" + images[0].id,
+						  })
+				}
+			/>
+
+			<FontAwesomeIcon
+				icon={faClose}
+				className={`${styles.galleryFullscreenBtn} ${styles.galleryFullscreenClose}`}
+				onClick={() => router.push("/gallery")}
+			/>
+		</div>
+	);
+}
+
+export default GalleryFullscreen;

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 (
+		<div className={styles.galleryGrid}>
+			<div className={styles.galleryGridGrid}>
+				{images.length > 0
+					? images.map((image, i) => (
+							<div
+								key={i}
+								onClick={() => router.push({ search: "activeImg=" + image.id })}
+								className="noSelect"
+							>
+								<img
+									src={image.url}
+									alt={locale === "en" ? image.title.en : image.title.de}
+								/>
+								<div className={styles.galleryImageTitle}>
+									<p>{locale === "en" ? image.title.en : image.title.de}</p>
+								</div>
+							</div>
+					  ))
+					: ""}
+			</div>
+		</div>
+	);
+}
+
+export default GalleryGrid;

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 (
+		<div className={styles.navSelectContainer}>
+			{router.locale !== null ? (
+				<Select
+					styles={customStyles}
+					defaultValue={selectOptions.filter(
+						(option) => option.value === router.locale
+					)}
+					onChange={(v) => {
+						router.push(router.asPath, undefined, { locale: v.value });
+					}}
+					options={selectOptions}
+					classNamePrefix="nav-select"
+				/>
+			) : (
+				""
+			)}
+		</div>
+	);
+}

components/Map.jsx

@@ -0,0 +1,44 @@
+import "../styles/Map.module.scss";
+
+function Map({ width = "100%", height = "100%", showAddressText }) {
+	return (
+		<div
+			className="map"
+			style={
+				typeof window !== "undefined"
+					? {
+							width: width > window.innerWidth ?? "100%",
+							height: height > window.innerHeight ?? "100%",
+					  }
+					: {
+							width: "100%",
+							height: "100%",
+					  }
+			}
+		>
+			<iframe
+				id="googleMap"
+				title="Google Maps"
+				src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2074.752438061636!2d10.442157776201181!3d51.80048944135434!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47b37fa3d7cd9a35%3A0xf42c1941b19fcd8d!2sFerienwohnung%20Glockenberg!5e0!3m2!1sde!2sde!4v1664554395680!5m2!1sde!2sde"
+				style={{ border: "0" }}
+				width={width}
+				height={height}
+				allowfullscreen="true"
+				loading="lazy"
+				referrerpolicy="no-referrer-when-downgrade"
+			></iframe>
+			{showAddressText ? (
+				<a
+					className="textMuted"
+					href="https://www.google.com/maps/place/Ferienwohnung+Glockenberg/@51.8004894,10.4421578,17.25z/data=!4m13!1m7!3m6!1s0x47a5160eb8d1cf11:0x425ac6d94ac3f50!2sAltenau!3b1!8m2!3d51.8023804!4d10.4457294!3m4!1s0x47b37fa3d7cd9a35:0xf42c1941b19fcd8d!8m2!3d51.8004498!4d10.440787"
+				>
+					Auf dem Glockenberg 26, C1 5-6, 38707 Altenau
+				</a>
+			) : (
+				""
+			)}
+		</div>
+	);
+}
+
+export default Map;

components/Nav.jsx

@@ -0,0 +1,69 @@
+import Link from "next/link";
+import styles from "../styles/Nav.module.scss";
+import LocaleSwitch from "./LocaleSwitch";
+import { useRouter } from "next/router";
+
+export default function Nav({ localeTexts }) {
+	const router = useRouter();
+	const currentRoute = router.pathname;
+
+	return (
+		<nav className={styles.nav}>
+			<h2
+				className={styles.brandName}
+				onClick={(e) => {
+					window.location = "/";
+				}}
+			>
+				{localeTexts?.nav?.brandName ?? ""}
+				{router.locale}
+			</h2>
+
+			<ul className={styles.navNavigationLeft}>
+				<Link
+					href="/"
+					className={currentRoute === "/" ? `${styles.active}` : ""}
+				>
+					{localeTexts?.nav?.home ?? ""}
+				</Link>
+				<Link
+					href="/surroundings"
+					className={currentRoute === "/surroundings" ? `${styles.active}` : ""}
+				>
+					{localeTexts?.nav?.surroundings ?? ""}
+				</Link>
+				<Link
+					href="/gallery"
+					className={currentRoute === "/gallery" ? `${styles.active}` : ""}
+				>
+					{localeTexts?.nav?.gallery ?? ""}
+				</Link>
+
+				<Link
+					href="/pricing"
+					className={currentRoute === "/pricing" ? `${styles.active}` : ""}
+				>
+					{localeTexts?.nav?.pricing ?? ""}
+				</Link>
+				<Link
+					href="/about"
+					className={currentRoute === "/about" ? `${styles.active}` : ""}
+				>
+					{localeTexts?.nav?.about ?? ""}
+				</Link>
+			</ul>
+			<div className={styles.navNavigationRight}>
+				<button
+					className={styles.btnContact}
+					id="navigationLinkBooking"
+					onClick={(e) => {
+						window.location = "/booking";
+					}}
+				>
+					{localeTexts?.nav?.booking ?? ""}
+				</button>
+				<LocaleSwitch styles={styles} />
+			</div>
+		</nav>
+	);
+}