Merge branch 'main' into feature-components-Betty

src/App.css

@@ -3,9 +3,12 @@
 @tailwind utilities;
 @import url('https://fonts.googleapis.com/css2?family=Quicksand&display=swap');
 
+@import url("https://fonts.googleapis.com/css2?family=Quicksand&display=swap");
+
 .App {
   text-align: center;
   font-family: quicksand, arial;
+
 }
 
 .App-logo {

src/App.js

@@ -1,3 +1,4 @@
+
 import logo from "./logo.svg";
 import ButtonPrimary from "./Components/buttonPrimary";
 import ButtonSecondary from "./Components/buttonSecondary";
@@ -9,17 +10,14 @@ import test from "./Components/test";
 import Card from "./Components/card";
 import img_paparoy from './paparoy.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";
 
 function App() {
   return (
     <div className="App">
-      <Header1 />
-      <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-4">
-        <Card name="Papa Roy" bild={img_paparoy} />
-        <Card name="A la Turca" bild={img_alaturca} />
-        <Card name="Pizza Olive"/>
-      </div>
-  </div>
+    </div>
   );
 }
 

src/Components/eingabefeld.jsx

@@ -0,0 +1,29 @@
+import React, { useState } from "react";
+
+function Eingabefeld(props) {
+  const [usepollName, setPollName] = useState("");
+  return (
+    <div>
+      <label>{props.label}</label>
+      <br />
+      <input
+        className="form-control
+        border-radius: 5px
+        block
+        w-220
+        h-35
+        px-3
+        py-1.5
+        text-base
+        font-normal
+        border border-solid border-gray-300
+        rounded"
+        onChange={(e) => setPollName(e.target.value)}
+        value={usepollName}
+        placeholder={props.placeholder}
+        type={props.isPassword ? "password" : "text"}
+      />
+    </div>
+  );
+}
+export default Eingabefeld;

src/Components/liste.jsx

@@ -0,0 +1,18 @@
+import React, { useState } from "react";
+
+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 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-5 col-end-5 place-content-end">
+        <button>enter</button>
+      </div>
+    </div>
+  );
+}
+
+export default Liste;

src/index.css

@@ -4,14 +4,16 @@
 
 body {
   margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
-    sans-serif;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans",
+    "Droid Sans", "Helvetica Neue", sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
 
 code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
-    monospace;
+  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace;
+}
+
+input {
+  font-family: FontAwesome;
 }