From 23569d7702ed6104af415eded45400eec81835ce Mon Sep 17 00:00:00 2001
From: Hannah Holzheu <hh062@hdm-stuttgart.de>
Date: Mon, 13 Nov 2023 21:16:00 +0100
Subject: [PATCH] added package with pages #10 #11 #12 #13 #14 #15 #16
---
growbros-frontend/src/pages/Garten.tsx | 12 +++
growbros-frontend/src/pages/Home.tsx | 85 +++++++++++++++++++
growbros-frontend/src/pages/Suche.tsx | 45 ++++++++++
growbros-frontend/src/pages/Wunschliste.tsx | 30 +++++++
.../src/stylesheets/PlantCard.css | 26 ++++++
5 files changed, 198 insertions(+)
create mode 100644 growbros-frontend/src/pages/Garten.tsx
create mode 100644 growbros-frontend/src/pages/Home.tsx
create mode 100644 growbros-frontend/src/pages/Suche.tsx
create mode 100644 growbros-frontend/src/pages/Wunschliste.tsx
create mode 100644 growbros-frontend/src/stylesheets/PlantCard.css
diff --git a/growbros-frontend/src/pages/Garten.tsx b/growbros-frontend/src/pages/Garten.tsx
new file mode 100644
index 0000000..00a28f8
--- /dev/null
+++ b/growbros-frontend/src/pages/Garten.tsx
@@ -0,0 +1,12 @@
+import PlantsOverview from "../components/PlantsOverview";
+
+function Garten() {
+ return (
+ <div>
+ <h2>Dein Garten</h2>
+ <PlantsOverview />
+ </div>
+ );
+}
+
+export default Garten;
diff --git a/growbros-frontend/src/pages/Home.tsx b/growbros-frontend/src/pages/Home.tsx
new file mode 100644
index 0000000..d6a6c48
--- /dev/null
+++ b/growbros-frontend/src/pages/Home.tsx
@@ -0,0 +1,85 @@
+import "../stylesheets/Home.css";
+import { NavLink } from "react-router-dom";
+
+function Home() {
+ return (
+ <main>
+ <div className="hero">
+ <img
+ src="https://images.pexels.com/photos/2611818/pexels-photo-2611818.jpeg"
+ className="mainPicture"
+ ></img>
+ <div className="descriptionAside">
+ <h1 className="header1">GrowBros</h1>
+ <h2 className="header2">Keep your plants alive</h2>
+ <p className="text">
+ "Mit GrowBros wird Gärtnern zum Kinderspiel! Finde die perfekten
+ Pflanzen für deinen Garten, erhalte nützliche Informationen und
+ verwalte sie mühelos. Starte noch heute und lass deinen Garten in
+ voller Blüte erstrahlen!"
+ </p>
+ <Link></Link>
+ </div>
+ </div>
+ <div className="secondDiv">
+ Fange noch heute an dir deinen Traumgarten zusammenzustellen und ernte
+ bald die Früchte deiner Arbeit.
+ </div>
+ <div style={{ display: "flex" }}>
+ <div className="smallDiv" style={{ width: "60%" }}>
+ <h2>Unsere Vorteile...</h2>
+ <p>
+ Entdecke neue Pflanzen und erhalte wertvolle Informationen für
+ deinen Garten. Erfasse sie mühelos und erhalte Erinnerungen für
+ Pflege und Ernte.
+ </p>
+ </div>
+ <img
+ className="smallPicture"
+ src="https://images.unsplash.com/photo-1615485021022-dec8994adeba?auto=format&fit=crop&q=60&w=1000&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTh8fHZlZ2V0YWJsZXMlMjB3aGl0ZSUyMGJhY2tncm91bmR8ZW58MHx8MHx8fDA%3D"
+ ></img>
+ </div>
+
+ <div style={{ display: "flex" }}>
+ <img
+ className="smallPicture"
+ src="https://images.unsplash.com/photo-1587486912758-4367d2015d6c?auto=format&fit=crop&q=60&w=1000&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTR8fHZlZ2V0YWJsZXMlMjB3aGl0ZSUyMGJhY2tncm91bmR8ZW58MHx8MHx8fDA%3D"
+ ></img>
+ <div className="smallDiv">
+ <p>
+ Organisiere deinen Garten besser. Verfolge den Fortschritt deiner
+ Pflanzen und erhalte Anleitungen, um sie gesund und glücklich zu
+ halten.
+ </p>
+ </div>
+ </div>
+
+ <div style={{ display: "flex" }}>
+ <div className="smallDiv">
+ <p>
+ Maximiere deine Ernte. Unsere App hilft dir, den optimalen Zeitpunkt
+ für die Ernte deiner Pflanzen zu finden und sorgt so für eine reiche
+ Belohnung.
+ </p>
+ </div>
+ <img
+ className="smallPicture"
+ src="https://images.unsplash.com/photo-1587411768638-ec71f8e33b78?auto=format&fit=crop&q=60&w=1000&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTJ8fHZlZ2V0YWJsZXMlMjB3aGl0ZSUyMGJhY2tncm91bmR8ZW58MHx8MHx8fDA%3D"
+ ></img>
+ </div>
+ </main>
+ );
+}
+
+function Link() {
+ return (
+ <div className="link">
+ <NavLink to="/suchen">
+ <h3> Starte hier</h3>
+ <p>und füge Pflanzen zu deinem Garten hinzu</p>
+ </NavLink>
+ </div>
+ );
+}
+
+export default Home;
diff --git a/growbros-frontend/src/pages/Suche.tsx b/growbros-frontend/src/pages/Suche.tsx
new file mode 100644
index 0000000..a3f068f
--- /dev/null
+++ b/growbros-frontend/src/pages/Suche.tsx
@@ -0,0 +1,45 @@
+import "font-awesome/css/font-awesome.min.css";
+import "../stylesheets/Suche.css";
+import PlantsOverview from "../components/PlantsOverview";
+import { useState } from "react";
+import FilterPage from "../components/FilterPage";
+
+function Suche() {
+ return (
+ <>
+ <SearchBar />
+ <PlantsOverview />
+ </>
+ );
+}
+
+function SearchBar() {
+ const [isComponentVisible, setComponentVisible] = useState(false);
+
+ const loadComponent = () => {
+ setComponentVisible(!isComponentVisible);
+ };
+
+ return (
+ <>
+ <div className="searchBar">
+ <h2>Suche nach einer Pflanze</h2>
+ <p>
+ und füge diese dann zu deinem Garten oder zu deiner Wunschliste hinzu
+ </p>
+ <div className="searchFilter">
+ <input type="text" placeholder="Pflanze suchen..." />
+ <button>
+ <i className="fa fa-search"></i>
+ </button>
+ <button onClick={loadComponent} className="filter">
+ <i className="fa fa-filter" />
+ </button>
+ </div>
+ {isComponentVisible && <FilterPage />}
+ </div>
+ </>
+ );
+}
+
+export default Suche;
diff --git a/growbros-frontend/src/pages/Wunschliste.tsx b/growbros-frontend/src/pages/Wunschliste.tsx
new file mode 100644
index 0000000..18e7ea8
--- /dev/null
+++ b/growbros-frontend/src/pages/Wunschliste.tsx
@@ -0,0 +1,30 @@
+import { useEffect, useState } from "react";
+import PlantDetails from "../components/PlantDetails";
+
+function Wunschliste() {
+ const [plants, setPlants] = useState<any[]>([]);
+ const [error, setError] = useState();
+
+ useEffect(() => {
+ fetch("http://localhost:8080/api/v1/plants")
+ .then((res) => res.json())
+ .then((plants) => setPlants(plants))
+ .catch((err) => setError(err));
+ }, [setPlants]);
+
+ return (
+ <>
+ {error ? (
+ <p>Error fetching data</p>
+ ) : (
+ <ul style={{ display: "flex", gap: "1rem", width: "100%" }}>
+ {plants?.map((plant) => (
+ <PlantDetails plant={plant} key={plant.id} />
+ ))}
+ </ul>
+ )}
+ </>
+ );
+}
+
+export default Wunschliste;
diff --git a/growbros-frontend/src/stylesheets/PlantCard.css b/growbros-frontend/src/stylesheets/PlantCard.css
new file mode 100644
index 0000000..198fc63
--- /dev/null
+++ b/growbros-frontend/src/stylesheets/PlantCard.css
@@ -0,0 +1,26 @@
+.plantCard {
+ display: flex;
+ flex-direction: column;
+ width: 250px;
+ aspect-ratio: 2.2;
+ border: 2px solid #f5f0ea;
+ border-radius: 8px;
+ padding: 1rem;
+
+}
+
+.plantCardLink {
+ color: inherit;
+ transition: color linear 0.25ms;
+}
+
+.plantCardLink:hover {
+ color: #4d5927;
+ border: 2px solid black;
+ border-radius: 8px;
+ box-shadow: 0px 12px 24px rgb(24 24 24 / 20%);
+}
+
+.shadow-light {
+ box-shadow: 0px 12px 24px rgb(24 24 24 / 20%);
+}
--
GitLab