Merge pull request #2 from GithubOrgProjectPiza/feature-components-Betty

Components Buttons, Header und Cards

src/App.css

@@ -1,12 +1,14 @@
 @tailwind base;
 @tailwind components;
 @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: qicksand, arial;
+  font-family: quicksand, arial;
+
 }
 
 .App-logo {
@@ -20,7 +22,7 @@
   }
 }
 
-.App-header {
+/*.App-header {
   background-color: #282c34;
   min-height: 100vh;
   display: flex;
@@ -29,7 +31,7 @@
   justify-content: center;
   font-size: calc(10px + 2vmin);
   color: white;
-}
+}*/
 
 .App-link {
   color: #61dafb;

src/App.js

@@ -1,3 +1,15 @@
+
+import logo from "./logo.svg";
+import ButtonPrimary from "./Components/buttonPrimary";
+import ButtonSecondary from "./Components/buttonSecondary";
+import './App.css';
+import p_logo_dark from './pizza_logo_dark.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_alaturca from './alaturca.jpg';
 import Eingabefeld from "./Components/eingabefeld";
 import "../node_modules/font-awesome/css/font-awesome.min.css";
 import Liste from "./Components/liste";
@@ -5,10 +17,6 @@ import Liste from "./Components/liste";
 function App() {
   return (
     <div className="App">
-      <Eingabefeld label="Name" isPassword={false} placeholder="&#xf007;" />
-      <p className="from-green-50">tets</p>
-      <br></br>
-      <Liste gericht="Pizza" price="€20.00" isColor={true} />
     </div>
   );
 }

src/Components/buttonPrimary.jsx

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

src/Components/buttonSecondary.jsx

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

src/Components/card.jsx

@@ -0,0 +1,17 @@
+import React from "react";
+import bild from "../paparoy.jpg";
+import ButtonPrimary from "./buttonPrimary";
+
+function Card(props) {
+  return (
+    <div class="w-full rounded-xl overflow-hidden shadow-lg bg-gray1 ">
+      <img class="w-full max-h-60 object-fill" src={props.bild || bild} alt="Papa Roy"></img>
+      <div class="px-6 py-4 flex justify-between">
+        <div class="font-bold text-xl flex justify-start m-3">{props.name || "Restaurant"}</div>
+        <ButtonPrimary name="Speisekarte" />
+      </div>
+    </div>
+  );
+}
+
+export default Card;

src/Components/header_1.jsx

@@ -0,0 +1,19 @@
+import React from "react";
+import p_logo_dark from "../pizza_logo_dark.png";
+import p_logo_light from "../pizza_logo_light.png";
+import ButtonSecondary from "./buttonSecondary";
+import ShoppingCart from "../shopping_cart.svg";
+
+function Header1() {
+  return (
+    <div class="bg-primary h-14 w-full p-2 flex justify-between items-center">
+      <img src={p_logo_light} alt="Logo" class="h-10"></img>
+      <div class="flex justify-center">
+        <ButtonSecondary name="Abmelden" />
+        <img src={ShoppingCart}></img>
+      </div>
+    </div>
+  );
+}
+
+export default Header1;

src/Components/test.jsx

@@ -1,7 +1,7 @@
 import React from "react";
 
 function test() {
-  return <p className="bg-green-800 rounded-lg"> test </p>;
+  return <p className="bg-primary"> test </p>;
 }
 
 export default test;

src/shopping_cart.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#FFFFFF"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M15.55 13c.75 0 1.41-.41 1.75-1.03l3.58-6.49c.37-.66-.11-1.48-.87-1.48H5.21l-.94-2H1v2h2l3.6 7.59-1.35 2.44C4.52 15.37 5.48 17 7 17h12v-2H7l1.1-2h7.45zM6.16 6h12.15l-2.76 5H8.53L6.16 6zM7 18c-1.1 0-1.99.9-1.99 2S5.9 22 7 22s2-.9 2-2-.9-2-2-2zm10 0c-1.1 0-1.99.9-1.99 2s.89 2 1.99 2 2-.9 2-2-.9-2-2-2z"/></svg>

tailwind.config.js

@@ -2,6 +2,15 @@ module.exports = {
   content: ["./src/**/*.{js,jsx,ts,tsx}"],
   theme: {
     extend: {},
+    colors: {
+      primary: '#0E7768',
+      secondary: '#6FB98F',
+      primaryHover: '#13695D',
+      secondaryHover: '#69AF88',
+      white: '#ffffff',
+      gray1: '#EAEAEA',
+      gray2: '#FAFAFA'
+    }
   },
   plugins: [],
 };