[init] initlialize next app & convert old react app

pages/_app.js

@@ -1,7 +0,0 @@
-import '../styles/globals.css'
-
-function MyApp({ Component, pageProps }) {
-  return <Component {...pageProps} />
-}
-
-export default MyApp

pages/_app.jsx

@@ -0,0 +1,16 @@
+import "../styles/variables.scss";
+import "../styles/globals.scss";
+import Nav from "../components/Nav";
+import Footer from "../components/Footer";
+
+export default function App({ Component, pageProps }) {
+	return (
+		<>
+			<Nav {...pageProps} />
+			<main>
+				<Component {...pageProps} />
+			</main>
+			<Footer {...pageProps} />
+		</>
+	);
+}

pages/about.jsx

@@ -0,0 +1,56 @@
+import Map from "../components/Map";
+import styles from "../styles/About.module.scss";
+import { collection, doc, getDoc, getDocs } from "firebase/firestore";
+import { db } from "../firebase-config";
+
+export async function getInitialProps({ router }) {
+	let pageProps = {};
+	const { locale } = router;
+
+	return { pageProps, locale };
+}
+
+export async function getServerSideProps({ locale }) {
+	const data = await getDoc(doc(db, "localeTexts", locale));
+
+	return {
+		props: { localeTexts: data.data() ?? {} },
+	};
+}
+
+export default function About() {
+	return (
+		<div className={styles.about}>
+			<h1>About</h1>
+			<div className={styles.aboutContent}>
+				<div className={styles.aboutContentText}>
+					<img src="/images/test.jpg" alt="" />
+					Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis illo
+					quos ea pariatur at qui amet? Repellat recusandae illum sequi, rem,
+					deleniti delectus culpa dolorem nostrum odit excepturi provident iste?
+					Illum temporibus saepe esse reiciendis delectus veniam voluptas vero
+					voluptates earum, ea porro quos numquam ex, modi corrupti nam, iusto
+					minima deserunt non accusantium quibusdam eaque quod! Quaerat, quam
+					sunt. Assumenda vitae dconssectetur reprehenderit, cum quaerat tempore
+					nisi quod ex amet modi delectus porro! Ipsam, numquam excepturi qui ut
+					ipsa ipsum error consequatur magni alias molestiae labore explicabo
+					laboriosam repellendus. Assumenda vitae consectetur reprehenderit, cum
+					quaerat tempore nisi quod ex amet modi delectus porro! Ipsam, numquam
+					excepturi qui ut ipsa ipsum error consequatur magni alias molestiae
+					labore explicabo laboriosam repellendus.
+				</div>
+
+				<div className={styles.aboutContentInformation}>
+					<div>
+						<h3>Information</h3>
+						<b>Email:</b> test-test@test.com <br />
+						<b>Address:</b> Auf dem Glockenberg 26 38707 Altenau <br />
+					</div>
+					<div className={styles.aboutContentInformationText}>
+						<Map width={"100%"} height="400px" />
+					</div>
+				</div>
+			</div>
+		</div>
+	);
+}

pages/gallery.jsx

@@ -0,0 +1,66 @@
+import { useEffect, useState } from "react";
+import GalleryFullscreen from "../components/GalleryFullscreen";
+import GalleryGrid from "../components/GalleryGrid";
+import { db } from "../firebase-config";
+import styles from "../styles/Gallery.module.scss";
+import { useRouter } from "next/router";
+import { useSearchParams } from "next/navigation";
+import { collection, doc, getDoc, getDocs } from "firebase/firestore";
+
+export async function getInitialProps({ router }) {
+	let pageProps = {};
+	const { locale } = router;
+
+	return { pageProps, locale };
+}
+
+export async function getServerSideProps({ locale }) {
+	const data = await getDoc(doc(db, "localeTexts", locale));
+
+	return {
+		props: { localeTexts: data.data() ?? {} },
+	};
+}
+
+export default function Gallery({ localeTexts }) {
+	const router = useRouter();
+
+	const [searchParams, setSearchParams] = useSearchParams();
+	const [activeImage, setActiveImage] = useState(null);
+	const [images, setImages] = useState([]);
+	const imagesCollectionRef = collection(db, "galleryImages");
+
+	useEffect(() => {
+		async function getImages() {
+			const data = await getDocs(imagesCollectionRef);
+			setImages(data.docs.map((doc) => ({ ...doc.data(), id: doc.id })));
+		}
+
+		getImages();
+
+		setActiveImage(
+			images.find((image) => {
+				return image.id === router.query?.activeImg;
+			})
+		);
+	}, []);
+
+	useEffect(() => {
+		setActiveImage(
+			images.find((image) => {
+				return image.id === router.query?.activeImg;
+			})
+		);
+	}, [searchParams, images, activeImage, router]);
+
+	return (
+		<div className={styles.gallery}>
+			<h1 className="pageHeadline">{localeTexts?.gallery?.headline}</h1>
+			{activeImage ? (
+				<GalleryFullscreen activeImage={activeImage} images={images} />
+			) : (
+				<GalleryGrid images={images} />
+			)}
+		</div>
+	);
+}

pages/index.js

@@ -1,71 +0,0 @@
-import Head from 'next/head'
-import Image from 'next/image'
-import styles from '../styles/Home.module.css'
-
-export default function Home() {
-  return (
-    <div className={styles.container}>
-      <Head>
-        <title>Create Next App</title>
-        <meta name="description" content="Generated by create next app" />
-        <link rel="icon" href="/favicon.ico" />
-      </Head>
-
-      <main className={styles.main}>
-        <h1 className={styles.title}>
-          Welcome to <a href="https://nextjs.org">Next.js!</a>
-        </h1>
-
-        <p className={styles.description}>
-          Get started by editing{' '}
-          <code className={styles.code}>pages/index.js</code>
-        </p>
-
-        <div className={styles.grid}>
-          <a href="https://nextjs.org/docs" className={styles.card}>
-            <h2>Documentation &rarr;</h2>
-            <p>Find in-depth information about Next.js features and API.</p>
-          </a>
-
-          <a href="https://nextjs.org/learn" className={styles.card}>
-            <h2>Learn &rarr;</h2>
-            <p>Learn about Next.js in an interactive course with quizzes!</p>
-          </a>
-
-          <a
-            href="https://github.com/vercel/next.js/tree/canary/examples"
-            className={styles.card}
-          >
-            <h2>Examples &rarr;</h2>
-            <p>Discover and deploy boilerplate example Next.js projects.</p>
-          </a>
-
-          <a
-            href="https://vercel.com/new?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
-            className={styles.card}
-          >
-            <h2>Deploy &rarr;</h2>
-            <p>
-              Instantly deploy your Next.js site to a public URL with Vercel.
-            </p>
-          </a>
-        </div>
-      </main>
-
-      <footer className={styles.footer}>
-        <a
-          href="https://vercel.com?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Powered by{' '}
-          <span className={styles.logo}>
-            <Image src="/vercel.svg" alt="Vercel Logo" width={72} height={16} />
-          </span>
-        </a>
-      </footer>
-    </div>
-  )
-}

pages/index.jsx

@@ -0,0 +1,84 @@
+import Head from "next/head";
+import Nav from "../components/Nav";
+import Image from "next/image";
+import Link from "next/link";
+import {
+	faBeer,
+	faBreadSlice,
+	faSeedling,
+	faSpa,
+	faUtensils,
+} from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { useContext } from "react";
+import "react-slideshow-image/dist/styles.css";
+//import { LocaleTextsContext } from "../App";
+import DiashowHomePage from "../components/DiashowHomePage";
+import Map from "../components/Map";
+import styles from "../styles/Home.module.scss";
+import { db } from "../firebase-config";
+import { collection, doc, getDoc, getDocs } from "firebase/firestore";
+
+export async function getInitialProps({ router }) {
+	let pageProps = {};
+	const { locale } = router;
+
+	return { pageProps, locale };
+}
+
+export async function getServerSideProps({ locale }) {
+	const data = await getDoc(doc(db, "localeTexts", locale));
+
+	return {
+		props: { localeTexts: data.data() ?? {} },
+	};
+}
+
+export default function Home({ localeTexts }) {
+	return (
+		<div className={styles.home}>
+			<DiashowHomePage titleLanguage={"eng"} height={"600px"} />
+
+			<div className={styles.homeSurroundings}>
+				<ul>
+					<Link href={"/surroundings"}>
+						<FontAwesomeIcon icon={faBreadSlice} />
+						Backeries
+					</Link>
+
+					<Link href={"/surroundings"}>
+						<FontAwesomeIcon icon={faUtensils} />
+						Amenities
+					</Link>
+					<Link href={"/surroundings"}>
+						<FontAwesomeIcon icon={faBeer} />
+						Brewery
+					</Link>
+
+					<Link href={"/surroundings"}>
+						<FontAwesomeIcon icon={faSeedling} />
+						Kräuterpark
+					</Link>
+					<Link href={"/surroundings"}>
+						<FontAwesomeIcon icon={faSpa} />
+						Spa park
+					</Link>
+				</ul>
+			</div>
+
+			<div className={styles.homeGrid}>
+				<div className={styles.homeIntroduction}>
+					<h2>{localeTexts?.home?.introduction?.headline ?? ""}</h2>
+					<p
+						dangerouslySetInnerHTML={{
+							__html: localeTexts?.home?.introduction?.text ?? "",
+						}}
+					></p>
+				</div>
+				<div className={styles.homeMapContainer}>
+					<Map showAddressText />
+				</div>
+			</div>
+		</div>
+	);
+}

pages/legal.jsx

@@ -0,0 +1,94 @@
+import styles from "../styles/Legal.module.scss";
+
+export default function Legal() {
+	return (
+		<div className={styles.legal}>
+			<h1>Legal Notice | Impressum</h1>
+			<div className={styles.legalContent}>
+				<h3>Angaben gemäß § 5TMG</h3>
+				<p>
+					<b>Vorname Nachname</b>
+					<br />
+					Pension test <br />
+					Teststraße 9 <br />
+					234234 Bremen <br />
+					Deutschland <br />
+				</p>
+				<h3>Kontakt / Contact</h3>
+				<p>
+					Tel.: +49 231 123412123
+					<br />
+					E-Mail: test@test.de <br />
+				</p>
+
+				<h3>EU-Streitschlichtung</h3>
+				<p>
+					Die Europäische Kommission stellt eine Plattform zur
+					Online-Streitbeilegung (OS) bereit: <br />
+					<a href="https://ec.europa.eu/consumers/odr/">
+						https://ec.europa.eu/consumers/odr/
+					</a>
+					. <br />
+					Unsere E-Mail-Adresse finden Sie oben im Impressum. <br />
+				</p>
+
+				<h3>Verbraucherstreitbeilegung/Universalschlichtungsstelle</h3>
+				<p>
+					Wir sind nicht bereit oder verpflichtet, an Streitbeilegungsverfahren
+					vor einer <br />
+					Verbraucherschlichtungsstelle teilzunehmen.
+				</p>
+
+				<h3>Haftung für Inhalte</h3>
+				<p>
+					Als Diensteanbieter sind wir gemäß § 7 Abs.1 TMG für eigene Inhalte
+					auf diesen Seiten nach den allgemeinen Gesetzen verantwortlich. Nach
+					§§ 8 bis 10 TMG sind wir als Diensteanbieter jedoch nicht
+					verpflichtet, übermittelte oder gespeicherte fremde Informationen zu
+					überwachen oder nach Umständen zu forschen, die auf eine rechtswidrige
+					Tätigkeit hinweisen. <br /> <br />
+					Verpflichtungen zur Entfernung oder Sperrung der Nutzung von
+					Informationen nach den allgemeinen Gesetzen bleiben hiervon unberührt.
+					Eine diesbezügliche Haftung ist jedoch erst ab dem Zeitpunkt der
+					Kenntnis einer konkreten Rechtsverletzung möglich. Bei Bekanntwerden
+					von entsprechenden Rechtsverletzungen werden wir diese Inhalte
+					umgehend entfernen.
+				</p>
+
+				<h3>Haftung für Links</h3>
+				<p>
+					Unser Angebot enthält Links zu externen Websites Dritter, auf deren
+					Inhalte wir keinen Einfluss haben. Deshalb können wir für diese
+					fremden Inhalte auch keine Gewähr übernehmen. Für die Inhalte der
+					verlinkten Seiten ist stets der jeweilige Anbieter oder Betreiber der
+					Seiten verantwortlich. Die verlinkten Seiten wurden zum Zeitpunkt der
+					Verlinkung auf mögliche Rechtsverstöße überprüft. Rechtswidrige
+					Inhalte waren zum Zeitpunkt der Verlinkung nicht erkennbar. <br />{" "}
+					<br />
+					Eine permanente inhaltliche Kontrolle der verlinkten Seiten ist jedoch
+					ohne konkrete Anhaltspunkte einer Rechtsverletzung nicht zumutbar. Bei
+					Bekanntwerden von Rechtsverletzungen werden wir derartige Links
+					umgehend entfernen.
+				</p>
+
+				<h3>Urheberrecht</h3>
+				<p>
+					Die durch die Seitenbetreiber erstellten Inhalte und Werke auf diesen
+					Seiten unterliegen dem deutschen Urheberrecht. Die Vervielfältigung,
+					Bearbeitung, Verbreitung und jede Art der Verwertung außerhalb der
+					Grenzen des Urheberrechtes bedürfen der schriftlichen Zustimmung des
+					jeweiligen Autors bzw. Erstellers. Downloads und Kopien dieser Seite
+					sind nur für den privaten, nicht kommerziellen Gebrauch gestattet.
+					<br />
+					<br />
+					Soweit die Inhalte auf dieser Seite nicht vom Betreiber erstellt
+					wurden, werden die Urheberrechte Dritter beachtet. Insbesondere werden
+					Inhalte Dritter als solche gekennzeichnet. Sollten Sie trotzdem auf
+					eine Urheberrechtsverletzung aufmerksam werden, bitten wir um einen
+					entsprechenden Hinweis. Bei Bekanntwerden von Rechtsverletzungen
+					werden wir derartige Inhalte umgehend entfernen.
+				</p>
+			</div>
+		</div>
+	);
+}

pages/pricing.jsx

@@ -0,0 +1,29 @@
+import styles from "../styles/Pricing.module.scss";
+import { useRouter } from "next/router";
+import { useSearchParams } from "next/navigation";
+import { collection, doc, getDoc, getDocs } from "firebase/firestore";
+import { db } from "../firebase-config";
+export async function getInitialProps({ router }) {
+	let pageProps = {};
+	const { locale } = router;
+
+	return { pageProps, locale };
+}
+
+export async function getServerSideProps({ locale }) {
+	const data = await getDoc(doc(db, "localeTexts", locale));
+
+	return {
+		props: { localeTexts: data.data() ?? {} },
+	};
+}
+
+function Pricing() {
+	return (
+		<div className={styles.pricing}>
+			<h1 className="pageHeadline">Pricing</h1>
+		</div>
+	);
+}
+
+export default Pricing;

pages/privacy.jsx

@@ -0,0 +1,9 @@
+import styles from "../styles/Privacy.module.scss";
+
+export default function Privacy() {
+	return (
+		<div className={styles.privacy}>
+			<h1>Privacy</h1>
+		</div>
+	);
+}

pages/surroundings.jsx

@@ -0,0 +1,66 @@
+/* eslint-disable @next/next/no-img-element */
+import styles from "../styles/Surroundings.module.scss";
+import { db } from "../firebase-config";
+import { collection, doc, getDoc, getDocs } from "firebase/firestore";
+import { useRouter } from "next/router";
+
+export async function getInitialProps({ router }) {
+	let pageProps = {};
+	const { locale } = router;
+
+	return { pageProps, locale };
+}
+
+export async function getServerSideProps({ locale }) {
+	const dataLocale = await getDoc(doc(db, "localeTexts", locale));
+	const dataSurroundings = await getDocs(collection(db, "surroundings"));
+
+	return {
+		props: {
+			localeTexts: dataLocale.data() ?? {},
+			surroundings:
+				dataSurroundings.docs.map((doc) => ({ ...doc.data(), id: doc.id })) ??
+				{},
+		},
+	};
+}
+
+export default function Surroundings({ surroundings, localeTexts }) {
+	const { locale } = useRouter();
+	return (
+		<div className={styles.surroundings}>
+			<h1 className="pageHeadline">{localeTexts?.surroundings?.headline}</h1>
+
+			{surroundings.map((s, i) => {
+				{
+					console.log(locale);
+				}
+				return (
+					<div className={styles.surroundingsItem} key={i}>
+						<h4>{locale === "en" ? s.title.en : s.title.de}</h4>
+						<div className={styles.surroundingsItemImgContainer}>
+							<img
+								src={s.image.url}
+								alt={locale === "en" ? s.title.en : s.title.de}
+							/>
+							<div>
+								{s.links.map((l, i2) => {
+									return (
+										<a key={i2} href={l.url}>
+											{locale === "en" ? l.text.en : l.text.de}
+										</a>
+									);
+								})}
+							</div>
+						</div>
+						<div
+							dangerouslySetInnerHTML={{
+								__html: locale === "en" ? s.text.en : s.text.de,
+							}}
+						/>
+					</div>
+				);
+			})}
+		</div>
+	);
+}