(#5) Adicionando CSS para o componente MenuItem

Co-authored-by: Emily Sousa <diassousa@yahoo.com.br>
UnBArqDsw2021-1 · Sep 17, 2021 · cce1a08 · cce1a08
1 parent b4d2267
commit cce1a08
Show file tree

Hide file tree

Showing 2 changed files with 52 additions and 15 deletions.
diff --git a/frontend/src/components/MenuItem/index.tsx b/frontend/src/components/MenuItem/index.tsx
@@ -6,7 +6,7 @@ interface IMenuItem {
     id: number;
     image: string;
     name: string;
-    price: number;
+    price: string;
     discount: number;
     description: string;
 }
@@ -19,22 +19,15 @@ const MenuItem: React.FC<IMenuItem> = ({
     discount,
     description,
 }: IMenuItem) => {
-    const addItem = () => {};
     //const addItem = ({ addItem } = useContext(ItemContext));
     return (
         <MenuItemContainer>
             <img src={image} alt={name} />
             <div>
-                <h3>{name}</h3>
+                <h4>{name}</h4>
                 <p>{description}</p>
-                <h2>${price}</h2>
-                <button
-                    onClick={() => {
-                        addItem;
-                    }}
-                >
-                    Adicionar
-                </button>
+                <h5>R${price}</h5>
+                <button onClick={() => {}}>Adicionar</button>
             </div>
         </MenuItemContainer>
     );

diff --git a/frontend/src/components/MenuItem/styles.ts b/frontend/src/components/MenuItem/styles.ts
@@ -1,23 +1,67 @@
 import styled from "styled-components";
 
-export const MenuItemContainer = styled.article`
+export const MenuItemContainer = styled.div`
+    width: 50%;
+    height: 18em;
+    margin: 5em;
     display: flex;
-    width: 100%;
+    flex-wrap: wrap;
+    flex-direction: row;
+    gap: 20px;
+    border-radius: 0.5rem;
+    box-shadow: 3px 4px 10px 1px #00000033;
 
     img {
+        flex: 30%;
+        margin: 1.5em;
+        max-width: 20em;
+        max-height: 20em;
+        border-radius: 15px;
     }
 
     div {
-        h3 {
+        flex: 60%;
+        margin: 0;
+        display: grid;
+        grid-template-columns: 25% 25% 25% 6.25% 6.25% 6.25% 6.25%;
+        grid-template-rows: auto;
+        grid-template-areas:
+            "name name name name name . ."
+            "description description description . . . ."
+            ". . . . price price ."
+            ". . . button button button button";
+
+        h4 {
+            grid-area: name;
+            margin: 0;
+            padding: 0;
+            font-weight: bold;
         }
 
         p {
+            grid-area: description;
+            margin: 0;
         }
 
-        h2 {
+        h5 {
+            margin: 0;
+            grid-area: price;
+            font-size: 1.5em;
+            font-weight: bold;
         }
 
         button {
+            margin: 0.5em;
+            height: 2em;
+            grid-area: button;
+            margin-top: 0;
+            border-radius: 30px;
+            background: #8e3031;
+            text-align: center;
+            color: white;
+            font-weight: bold;
+            cursor: pointer;
+            box-shadow: 3px 4px 10px 1px #00000033;
         }
     }
 `;