Skip to content
Snippets Groups Projects
Commit 3ba4f392 authored by Holzheu Hannah's avatar Holzheu Hannah
Browse files

added like Button and placeholder Link #10 #11 #12 #13 #14 #15 #16

parent 5af79d4c
No related branches found
No related tags found
1 merge request!7update branch to get access to user auth
Hide whitespace changes
Inline Side-by-side
Showing
with 139 additions and 283 deletions
growbros-frontend/src/App.css
+ 0
− 15
View file @ 3ba4f392
......@@ -2,18 +2,3 @@
width: 100%;
height: 100%;
}
.plantCard {
display: flex;
flex-direction: column;
width: 250px;
aspect-ratio: 2.2;
border: 2px solid #A0A0A0;
border-radius: 8px;
padding: 1rem;
}
.shadow-light {
box-shadow: 0px 12px 24px rgb(24 24 24 / 20%);
}
growbros-frontend/src/App.tsx
+ 7
− 5
View file @ 3ba4f392
import "./App.css";
import Home from "./components/Home";
import Garten from "./components/Garten";
import Suche from "./components/Suche";
import Home from "./pages/Home";
import Garten from "./pages/Garten";
import Suche from "./pages/Suche";
import Navbar from "./components/Navbar";
import { Routes, Route } from "react-router-dom";
import Wunschliste from "./components/Wunschliste";
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import Wunschliste from "./pages/Wunschliste";
import PlantDetails from "./components/PlantDetails";
function App() {
return (
......@@ -15,6 +16,7 @@ function App() {
<Route path="/garten" element={<Garten />} />
<Route path="/wunschliste" element={<Wunschliste />} />
<Route path="/suchen" element={<Suche />} />
<Route path="/pflanze/:plantId" element={<PlantDetails />} />
</Routes>
</div>
);
......
growbros-frontend/src/components/Garten.tsx deleted 100644 → 0
+ 0
− 13
View file @ 5af79d4c
import PlantsOverview from "./PlantsOverview";
function Garten() {
return (
<div>
<h2>Dein Garten</h2>
<PlantsOverview/>
</div>
);
}
export default Garten;
growbros-frontend/src/components/Home.tsx deleted 100644 → 0
+ 0
− 85
View file @ 5af79d4c
import "../stylesheets/Home.css";
import { NavLink } from "react-router-dom";
function Home() {
return (
<>
<div style={{ display: "flex" }}>
<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">
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Illo,
possimus nostrum blanditiis, maiores doloribus qui quisquam odit
explicabo nihil ducimus aliquid neque reprehenderit reiciendis
quidem?
</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>Hier erhältst du...</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Corrupti ex
quas non maiores similique atque fugit accusamus eligendi deserunt
culpa!
</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>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Assumenda
rem atque cupiditate excepturi maxime ipsam quas facere distinctio
accusantium aspernatur.
</p>
</div>
</div>
<div style={{ display: "flex" }}>
<div className="smallDiv">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique
porro assumenda nam nobis unde possimus at officia eius vero id.
</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>
</>
);
}
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;
growbros-frontend/src/components/Navbar.tsx
+ 14
− 12
View file @ 3ba4f392
......@@ -11,20 +11,22 @@ function Navbar() {
GrowBros
</NavLink>
</li>
<li>
<NavLink to="/garten">Garten</NavLink>
</li>
<div className="navLinks">
<li>
<NavLink to="/garten">Garten</NavLink>
</li>
<li>
<NavLink to="/wunschliste">Wunschliste</NavLink>
</li>
<li>
<NavLink to="/wunschliste">Wunschliste</NavLink>
</li>
<li>
<NavLink to="/suchen">
Suchen
<i className="fa fa-search"></i>
</NavLink>
</li>
<li>
<NavLink to="/suchen">
Suchen
<i className="fa fa-search"></i>
</NavLink>
</li>
</div>
</ul>
</nav>
);
......
growbros-frontend/src/components/PlantCard.tsx
+ 16
− 13
View file @ 3ba4f392
import "../App.css";
import "../stylesheets/PlantCard.css";
import { NavLink } from "react-router-dom";
export default function PlantCard(props: any) {
const plant = props.plant;
const plant = props.plant;
return (
return (
<>
<NavLink
to="/wunschliste" /*{{
pathname: `/pflanze/${plant.id}`,
}}*/
className="plantCardLink"
>
<li className="plantCard shadow-light">
<h2>{plant.name}</h2>
<h3>Family: {plant.family ?? "-"}</h3>
<p>Plant from {monthLookup(plant.plantMonthStart)} to {monthLookup(plant.plantMonthEnd)}</p>
<img src={plant.imageUrl}/>
<h2>{plant.name}</h2>
<img src={plant.imageUrl} />
</li>
);
}
function monthLookup(month: number) {
const months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dez"];
return months[month];
</NavLink>
</>
);
}
growbros-frontend/src/components/PlantDetails.tsx
+ 48
− 48
View file @ 3ba4f392
import "../stylesheets/PlantDetails.css";
import "font-awesome/css/font-awesome.min.css";
import { useParams } from "react-router-dom";
import "./PlantDetails.css";
function PlantDetails(props: any) {
const plant = props.plant;
function PlantDetails() {
return (
<div className="plantDetails">
<h1>Salat (Gartensalat)</h1>
<img src="https://d3t240q2dksnz7.cloudfront.net/a4cbb94a099179235fdd5696ae5f3833.jpg"></img>
<div className="lateinischerName infoBox">
<div className="title">Lateinischer Name</div>{" "}
<p>Lactuca sativa var. crispa</p>
</div>
<div className="Beschreibung infoBox">
<div className="title">Beschreibung</div>{" "}
<p>
Salat steht als \u00dcberbegriff f\u00fcr viele Blattgem\u00fcse.
Kopfsalate bilden - wie der Name schon sagt - einen Kopf und werden am
St\u00fcck geerntet. Pfl\u00fccksalate kann man kontinuierlich ernten,
wenn man jeweils nur einzelne Bl\u00e4tter abpfl\u00fcckt.{" "}
</p>
</div>
<div className="infoBox">
<div className="title">Herkunft</div>
<p>
Gartensalate sind gez\u00fcchtete Lattichgew\u00e4chse (Lactuca
sativa) mit Urpsrung in S\u00fcdeuropa, Nordafrika und Indien.
Darunter fallen Kopfsalate (Batavia, Eissalat),
Schnitt-/Pfl\u00fccksalate (Lollo Rosso/Bionda, Eichblatt) und
R\u00f6mersalate.{" "}
</p>
<>
<div style={{ display: "flex", flexDirection: "column" }}>
<div className="plantDetails">
<h1>{plant.name}</h1>
<img src={plant.imageUrl}></img>
<div className="lateinischerName infoBox">
<div className="title">Lateinischer Name</div>{" "}
<p>{plant.latinName}</p>
</div>
<div className="Beschreibung infoBox">
<div className="title">Beschreibung</div> <p>{plant.description}</p>
</div>
<div className="infoBox">
<div className="title">Herkunft</div>
<p>{plant.origin}</p>
</div>
<div className="infoBox">
<div className="title">Anbautipps</div> <p>{plant.growingTips}</p>
</div>
</div>
<div className="buttons">
<Buttons></Buttons>
</div>
</div>
</>
);
}
<div className="infoBox">
<div className="title">Anbautipps</div>{" "}
<p>
Salate eignen sich sehr gut als \u201aL\u00fcckenf\u00fcller\u2018.
Sie ben\u00f6tigen ausreichend Feuchtigkeit und haben einen
vergleichsweise geringen N\u00e4hrstoffbedarf. Durch eine geschickte
Auswahl lassen sich Salate das ganze Jahr \u00fcber anbauen: im
Fr\u00fchjahr und Fr\u00fchsommer Kopf- und
Schnitt-/Pfl\u00fccksalate; im Sommer und Herbst Zichoriensalate und
Eissalate sowie Feldsalat (v.a. im Herbst, Winter). F\u00fcr eine
kontinuierliche Ernte am besten in zeitlichen Abst\u00e4nden s\u00e4en
bzw. pflanzen. Arten und Sorten m\u00fcssen dabei an die jeweilige
Jahreszeit angepasst sein, z.B. beginnen Fr\u00fchjahrssorten bei zu
viel Hitze zu schie\u00dfen. Dabei bildet sich ein langer Stiel und
die Bl\u00e4tter werden bitter. Nach einigen Wochen kommen oben kleine
Bl\u00fcten zum Vorschein, woraus sich viele halbmondf\u00f6rmige
Samen bilden. Diese k\u00f6nnen f\u00fcr das Folgejahr abgesammelt
werden oder verteilen sich selbst im Beet, wenn du sie stehen
l\u00e4sst.\n{" "}
</p>
function Buttons() {
return (
<>
<div
style={{
display: "flex",
justifyContent: "space-around",
margin: "0 0 40px 0",
}}
>
<button>
<i className="fa fa-leaf"></i>
</button>
<button>
<i className="fa fa-heart"></i>
</button>
</div>
</div>
</>
);
}
......
growbros-frontend/src/components/PlantsOverview.tsx
+ 22
− 22
View file @ 3ba4f392
import {useEffect, useState} from "react";
import { useEffect, useState } from "react";
import PlantCard from "./PlantCard";
export default function PlantsOverview() {
const [plants, setPlants] = useState<any[]>([]);
const [error, setError] = useState();
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));
}, []);
useEffect(() => {
fetch("http://localhost:8080/api/v1/plants")
.then((res) => res.json())
.then((plants) => setPlants(plants))
.catch((err) => setError(err));
}, []);
return (
<>
{error ? (
<p>Error fetching data</p>
) : (
<ul style={{display: "flex", gap: "1rem", width: "100%"}}>
{plants?.map((plant) => (
<PlantCard plant={plant} key={plant.id}/>
))}
</ul>
)}
</>
);
return (
<>
{error ? (
<p>Error fetching data</p>
) : (
<ul style={{ display: "flex", gap: "1rem", width: "100%" }}>
{plants?.map((plant) => (
<PlantCard plant={plant} key={plant.id} />
))}
</ul>
)}
</>
);
}
growbros-frontend/src/components/Suche.tsx deleted 100644 → 0
+ 0
− 45
View file @ 5af79d4c
import "font-awesome/css/font-awesome.min.css";
import "../stylesheets/Suche.css";
import PlantsOverview from "./PlantsOverview";
import { useState } from "react";
import FilterPage from "./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;
growbros-frontend/src/components/Wunschliste.tsx deleted 100644 → 0
+ 0
− 15
View file @ 5af79d4c
import PlantsOverview from './PlantsOverview'
function Wunschliste() {
return (
<div>
<h2>Deine Wunschliste</h2>
<PlantsOverview/>
</div>
)
}
export default Wunschliste
\ No newline at end of file
growbros-frontend/src/stylesheets/Home.css
+ 11
− 8
View file @ 3ba4f392
.mainPicture{
width: 60%;
height: auto;
margin-left: 2rem;
}
.descriptionAside{
padding: 25px;
.hero {
display: flex;
gap: 2rem;
background-color: #f2f2f2;
padding: 2rem;
}
.descriptionAside{
color: #4d5927;
}
.descriptionAside h1{
......@@ -38,8 +42,6 @@
.smallDiv {
padding: 50px;
width: 60%;
}
.smallDiv p {
......@@ -65,9 +67,10 @@
}
.link{
padding-top: 30px;
margin-top: 30px;
transition: transform 0.25s ease-in-out;
}
.link:hover{
scale: 1.1;
transform: scale(1.025);
}
\ No newline at end of file
growbros-frontend/src/stylesheets/Navbar.css
+ 15
− 2
View file @ 3ba4f392
......@@ -13,6 +13,12 @@ ul {
list-style-position: inside;
}
.navLinks {
display: flex;
align-items: center;
gap: 4rem;
}
nav .title {
font-family: Garamond;
color: rgb(0, 0, 0);
......@@ -21,6 +27,8 @@ nav .title {
margin: 1rem;
text-decoration: none;
border-radius: 0.5rem;
text-transform: none;
letter-spacing: 0px;
}
nav ul li {
......@@ -37,10 +45,15 @@ nav ul li a {
border-radius: 0.5rem;
}
nav ul li a {
transition: transform 0.25s ease-in-out;
text-transform: uppercase;
letter-spacing: 0.1rem;
}
nav ul li a:hover {
transform: scale(1.1);
transform: scale(1.05);
color: #000000;
}
i{
......
growbros-frontend/src/stylesheets/PlantDetails.css
+ 6
− 0
View file @ 3ba4f392
......@@ -20,3 +20,9 @@ h1{
font-size: 1.3rem;
}
button{
width: 40%;
height: 80px;
}
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment