Liste fertig Anmeldung weiter

Liste fertig Anmeldung weiter

src/App.js

@@ -1,22 +1,23 @@
-
 import logo from "./logo.svg";
 import ButtonPrimary from "./Components/buttonPrimary";
 import ButtonSecondary from "./Components/buttonSecondary";
-import './App.css';
+import "./App.css";
-import p_logo_dark from './pizza_logo_dark.png'
+import p_logo_dark from "./pizza_logo_dark.png";
-import p_logo_light from './pizza_logo_light.png'
+import p_logo_light from "./pizza_logo_light.png";
 import Header1 from "./Components/header_1";
 import test from "./Components/test";
 import Card from "./Components/card";
-import img_paparoy from './paparoy.jpg';
+import img_paparoy from "./paparoy.jpg";
-import img_alaturca from './alaturca.jpg';
+import img_alaturca from "./alaturca.jpg";
 import Eingabefeld from "./Components/eingabefeld";
 import "../node_modules/font-awesome/css/font-awesome.min.css";
 import Liste from "./Components/liste";
+import Listenansicht from "./Pages/listenansicht";
 
 function App() {
   return (
     <div className="App">
+      <Listenansicht></Listenansicht>
     </div>
   );
 }

src/Components/buttonRound.jsx

@@ -0,0 +1,11 @@
+import React from "react";
+
+function ButtonRound(props) {
+  return (
+    <button class="bg-primary hover:bg-primaryHover rounded-full h-9 w-9 text-white m-3">
+      {" "}
+      {props.name || "Button"}{" "}
+    </button>
+  );
+}
+export default ButtonRound;

src/Components/liste.jsx

@@ -1,15 +1,21 @@
 import React, { useState } from "react";
+import ButtonRound from "./buttonRound";
 
 function Liste(props) {
   var gericht = props.gericht;
   var price = props.price;
 
   return (
-    <div class={props.isColor ? "grid grid-cols-5 gap-0 bg-slate-200 p-4" : "grid grid-cols-4 gap-0 bg-white p-4"}>
+    <div
-      <div class="col-start-1 col-end-1">{gericht}</div>
+      class={
-      <div class="place-content-end col-start-4 col-end-4">{price}</div>
+        props.isColor
-      <div class="col-start-5 col-end-5 place-content-end">
+          ? "grid grid-cols-6 gap-0 bg-slate-200 p-4 items-center"
-        <button>enter</button>
+          : "grid grid-cols-6 gap-0 bg-white p-4 items-center"
+      }>
+      <div class="col-start-1 col-end-1 ">{gericht}</div>
+      <div class="place-content-end col-start-4 col-end-4 ">{price}</div>
+      <div class="col-start-6 col-end-6 place-content-end ">
+        <ButtonRound name="+"></ButtonRound>
       </div>
     </div>
   );

src/Pages/anmeldepage.jsx

@@ -0,0 +1,10 @@
+import React, { useState } from "react";
+import bild from "../paparoy_liste.png";
+
+function Anmeldepage(props) {
+  return (
+    <div class="sm:  grid grid-cols-1 items-center">
+      <img class="w-50 h-50 col-start-1 col-end-1" src={props.bild || bild} alt="Logo"></img>
+    </div>
+  );
+}

src/Pages/listenansicht.jsx

@@ -0,0 +1,36 @@
+import React, { useState } from "react";
+import ButtonPrimary from "../Components/buttonPrimary";
+import Header1 from "../Components/header_1";
+import Liste from "../Components/liste";
+import bild from "../paparoy_liste.png";
+
+function Listenansicht(props) {
+  var color_liste = true;
+  var number = 2;
+  var run = 0;
+  let listen = [];
+
+  //Daten von Backend erforderlich + Bild vom jeweiligen Restaurant erforderlich
+  for (let index = 0; index < number; index++) {
+    listen.push(<Liste gericht="Pizza" price="12,99€" isColor={color_liste}></Liste>);
+    if (color_liste == true) {
+      color_liste = false;
+    } else {
+      color_liste = true;
+    }
+  }
+  return (
+    <div>
+      <Header1></Header1>
+
+      <img class="sm: w-full md: w-full md: h-15" src={props.bild || bild} alt="Papa Roy"></img>
+      {listen}
+      <div class="sm: grid grid-cols-2 items-center">
+        <div class="col-start-1 col-end-1"></div>
+        <ButtonPrimary name="Warenkorb" class="col-start-2 col-end-2 place-content-end"></ButtonPrimary>
+      </div>
+    </div>
+  );
+}
+
+export default Listenansicht;