Merge pull request #43 from CMU-17-356/New_DonutCard

New donut card
CMU-17-356 · Feb 23, 2022 · 2099934 · 2099934
2 parents efe6d94 + 135a7b3
commit 2099934
Show file tree

Hide file tree

Showing 3 changed files with 67 additions and 16 deletions.
diff --git a/frontend/src/components/DonutCard.tsx b/frontend/src/components/DonutCard.tsx
@@ -3,13 +3,24 @@ import * as React from "react";
 interface Donut {
     name: string;
     image: string;
+    description: string
+    price: number
+    quantity: number
 }
 
 export const DonutCard: React.FC<Donut> = (donut: Donut) => {
     return (
         <div className="donuts-Card">
             <img className="donuts-Img" src={donut.image}></img>
             <h1 className="donuts-Text">{donut.name}</h1>
+            <h1 className="donuts-Description">{donut.description}</h1>
+            <h1 className="donuts-Description">${donut.price}</h1>
+            {donut.quantity > 0 ? 
+                <div className = "donut-Add-Minus">
+                    <button className = "donuts-Button">+</button>
+                    <h1 className="donuts-Quantity">{donut.quantity}</h1>
+                    <button className = "donuts-Button">-</button>
+                </div> : <button className = "donuts-Button">+</button> }
         </div>
     );
 }
diff --git a/frontend/src/pages/Menu.tsx b/frontend/src/pages/Menu.tsx
@@ -6,26 +6,28 @@ import "../styles/Menu.css";
 class Donut {
     name: string
     image: string
+    description: string
+    price: number
+    quantity: number
 
-    constructor(name: string, image: string) {
+    constructor(name: string, image: string, description: string, price: number, quantity: number) {
         this.name = name;
         this.image = image;
+        this.description = description;
+        this.price = price;
+        this.quantity = quantity;
     }
 }
 
 // Temporary Menu
 const items: Array<Donut> = [
-    new Donut("Apple Krumb", "https://cmu-17-356.github.io/Dronuts/assets/donut_flavors/apple_krumb.jpg"),
-    new Donut("Bavarian", "https://cmu-17-356.github.io/Dronuts/assets/donut_flavors/bavarian_kreme.jpg"),
-    new Donut("Bavarian", "https://cmu-17-356.github.io/Dronuts/assets/donut_flavors/bavarian_kreme.jpg"),
-    new Donut("Bavarian", "https://cmu-17-356.github.io/Dronuts/assets/donut_flavors/bavarian_kreme.jpg"),
-    new Donut("Bavarian", "https://cmu-17-356.github.io/Dronuts/assets/donut_flavors/bavarian_kreme.jpg"),
-    new Donut("Bavarian", "https://cmu-17-356.github.io/Dronuts/assets/donut_flavors/bavarian_kreme.jpg"),
-    new Donut("Bavarian", "https://cmu-17-356.github.io/Dronuts/assets/donut_flavors/bavarian_kreme.jpg"),
-    new Donut("Bavarian", "https://cmu-17-356.github.io/Dronuts/assets/donut_flavors/bavarian_kreme.jpg"),
-    new Donut("Bavarian", "https://cmu-17-356.github.io/Dronuts/assets/donut_flavors/bavarian_kreme.jpg"),
-    new Donut("Bavarian", "https://cmu-17-356.github.io/Dronuts/assets/donut_flavors/bavarian_kreme.jpg"),
-    new Donut("Cruller", "https://cmu-17-356.github.io/Dronuts/assets/donut_flavors/cruller.jpg"),
+    new Donut("Apple Krumble", "https://cmu-17-356.github.io/Dronuts/assets/donut_flavors/apple_krumb.jpg", "Apples and crumbs", 3.99, 0),
+    new Donut("Apple Krumble", "https://cmu-17-356.github.io/Dronuts/assets/donut_flavors/apple_krumb.jpg", "Apples and crumbs", 3.99, 2),
+    new Donut("Apple Krumble", "https://cmu-17-356.github.io/Dronuts/assets/donut_flavors/apple_krumb.jpg", "Apples and crumbs", 3.99, 0),
+    new Donut("Apple Krumble", "https://cmu-17-356.github.io/Dronuts/assets/donut_flavors/apple_krumb.jpg", "Apples and crumbs", 3.99, 0),
+    new Donut("Apple Krumble", "https://cmu-17-356.github.io/Dronuts/assets/donut_flavors/apple_krumb.jpg", "Apples and crumbs", 3.99, 0),
+    new Donut("Apple Krumble", "https://cmu-17-356.github.io/Dronuts/assets/donut_flavors/apple_krumb.jpg", "Apples and crumbs", 3.99, 0),
+    new Donut("Apple Krumble", "https://cmu-17-356.github.io/Dronuts/assets/donut_flavors/apple_krumb.jpg", "Apples and crumbs", 3.99, 0),
 ]
 
 export const Menu: React.FC = () => {
@@ -37,7 +39,7 @@ export const Menu: React.FC = () => {
                 <h1 className="menu-Title">Top Sellers</h1>
                 <div className="options-Div">
                     {items.map((donut: Donut, index: number) => (
-                        <DonutCard key={index} name={donut.name} image={donut.image} />
+                        <DonutCard key={index} name={donut.name} image={donut.image} description={donut.description} price={donut.price} quantity={donut.quantity}/>
                     ))}
                 </div>
             </div>
@@ -46,7 +48,7 @@ export const Menu: React.FC = () => {
                 <h1 className="menu-Title">Freshly Baked</h1>
                 <div className="options-Div">
                     {items.map((donut: Donut, index: number) => (
-                        <DonutCard key={index} name={donut.name} image={donut.image} />
+                        <DonutCard key={index} name={donut.name} image={donut.image} description={donut.description} price={donut.price} quantity={donut.quantity}/>
                     ))}
                 </div>
             </div>
@@ -55,7 +57,7 @@ export const Menu: React.FC = () => {
                 <h1 className="menu-Title">Top Sellers</h1>
                 <div className="options-Div">
                     {items.map((donut: Donut, index: number) => (
-                        <DonutCard key={index} name={donut.name} image={donut.image} />
+                        <DonutCard key={index} name={donut.name} image={donut.image} description={donut.description} price={donut.price} quantity={donut.quantity}/>
                     ))}
                 </div>
             </div>

diff --git a/frontend/src/styles/Menu.css b/frontend/src/styles/Menu.css
@@ -28,14 +28,52 @@
 
 .donuts-Card{
     margin: 10px;
+    border-width: .5px;
+    border-color: #838383;
+    box-shadow: 0 10px 2px 0 rgba(255, 255, 255, 0.5), 0 2px 0px 0 rgba(12, 11, 11, 0.5);
 }
 
 .donuts-Text{
-    font-size: 15px;
+    font-size: 17px;
     font-weight: bold;
+    padding: 10px;
+}
+
+.donuts-Description{
+    color: #838383;
+    font-weight: lighter;
+    font-size: 12px;
+    padding-bottom: 10px;
 }
 
 .donuts-Img{
     width: auto;
     margin: auto;
+}
+
+.donuts-Button{
+    border-radius: 50%;
+    border-width: 1px;
+    height: 30px;
+    width: 30px;
+    color: black;
+    font-size: 20px;
+    font-weight: lighter;
+    text-align: center;
+    margin: auto;
+}
+
+.donut-Add-Minus{
+    display: grid;
+    grid-template-columns: repeat(3, auto);
+    text-align: center;
+    align-items: center;
+    padding: 10px;
+}
+
+.donuts-Quantity{
+    color: #838383;
+    font-weight: lighter;
+    font-size: 12px;
+    padding-bottom: 10px;
 }