From a326630df2146e8ba6b91f3286cc759a2473aa01 Mon Sep 17 00:00:00 2001
From: oscar <oscarzhou0727@icloud.com>
Date: Sat, 18 Mar 2023 11:42:23 +1300
Subject: [PATCH] add cart button component

---
 src/components/Cart/CartIcon.js               | 15 +++++
 src/components/Layout/Header.js               | 29 ++++-----
 src/components/Layout/HeaderCartButton.js     | 16 +++++
 .../Layout/HeaderCartButton.module.css        | 60 +++++++++++++++++++
 4 files changed, 106 insertions(+), 14 deletions(-)
 create mode 100644 src/components/Cart/CartIcon.js
 create mode 100644 src/components/Layout/HeaderCartButton.js
 create mode 100644 src/components/Layout/HeaderCartButton.module.css

diff --git a/src/components/Cart/CartIcon.js b/src/components/Cart/CartIcon.js
new file mode 100644
index 0000000..5ee5e19
--- /dev/null
+++ b/src/components/Cart/CartIcon.js
@@ -0,0 +1,15 @@
+
+const CartIcon = () => {
+  return (
+    <svg
+      xmlns='http://www.w3.org/2000/svg'
+      viewBox='0 0 20 20'
+      fill='currentColor'
+    >
+      <path d='M3 1a1 1 0 000 2h1.22l.305 1.222a.997.997 0 00.01.042l1.358 5.43-.893.892C3.74 11.846 4.632 14 6.414 14H15a1 1 0 000-2H6.414l1-1H14a1 1 0 00.894-.553l3-6A1 1 0 0017 3H6.28l-.31-1.243A1 1 0 005 1H3zM16 16.5a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zM6.5 18a1.5 1.5 0 100-3 1.5 1.5 0 000 3z' />
+    </svg>
+  );
+};
+
+
+export default CartIcon;
\ No newline at end of file
diff --git a/src/components/Layout/Header.js b/src/components/Layout/Header.js
index 0dd9e12..fdd661e 100644
--- a/src/components/Layout/Header.js
+++ b/src/components/Layout/Header.js
@@ -1,20 +1,21 @@
-import React from 'react';
+import React from "react";
 
-import mealsImage from '../../assets/meals.jpg';
-import classes from './Header.module.css';
+import mealsImage from "../../assets/meals.jpg";
+import classes from "./Header.module.css";
+import HeaderCartButton from "./HeaderCartButton";
 
 const Header = () => {
-
-    return <>
-        <header className={classes.header}>
-            <h1>ReactMeals</h1>
-            <button>Cart</button>
-        </header>
-        <div className={classes['main-image']}>
-            <img src={mealsImage} alt="A table full of delicious food!" />
-        </div>
+  return (
+    <>
+      <header className={classes.header}>
+        <h1>ReactMeals</h1>
+        <HeaderCartButton />
+      </header>
+      <div className={classes["main-image"]}>
+        <img src={mealsImage} alt="A table full of delicious food!" />
+      </div>
     </>
+  );
 };
 
-
-export default Header;
\ No newline at end of file
+export default Header;
diff --git a/src/components/Layout/HeaderCartButton.js b/src/components/Layout/HeaderCartButton.js
new file mode 100644
index 0000000..adf6271
--- /dev/null
+++ b/src/components/Layout/HeaderCartButton.js
@@ -0,0 +1,16 @@
+import CartIcon from "../Cart/CartIcon";
+import classes from "./HeaderCartButton.module.css";
+
+const HeaderCartButton = (props) => {
+  return (
+    <button className={classes.button}>
+      <span className={classes.icon}>
+        <CartIcon />
+      </span>
+      <span>Your Cart</span>
+      <span className={classes.badge}>3</span>
+    </button>
+  );
+};
+
+export default HeaderCartButton;
diff --git a/src/components/Layout/HeaderCartButton.module.css b/src/components/Layout/HeaderCartButton.module.css
new file mode 100644
index 0000000..61698b5
--- /dev/null
+++ b/src/components/Layout/HeaderCartButton.module.css
@@ -0,0 +1,60 @@
+.button {
+  cursor: pointer;
+  font: inherit;
+  border: none;
+  background-color: #4d1601;
+  color: white;
+  padding: 0.75rem 3rem;
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+  border-radius: 25px;
+  font-weight: bold;
+  margin-right: 20%;
+}
+
+.button:hover,
+.button:active {
+  background-color: #2c0d00;
+}
+
+.icon {
+  width: 1.35rem;
+  height: 1.35rem;
+  margin-right: 0.5rem;
+}
+
+.badge {
+  background-color: #b94517;
+  padding: 0.25rem 1rem;
+  border-radius: 25px;
+  margin-left: 1rem;
+  font-weight: bold;
+}
+
+.button:hover .badge,
+.button:active .badge {
+  background-color: #92320c;
+}
+
+.bump {
+  animation: bump 300ms ease-out;
+}
+
+@keyframes bump {
+  0% {
+    transform: scale(1);
+  }
+  10% {
+    transform: scale(0.9);
+  }
+  30% {
+    transform: scale(1.1);
+  }
+  50% {
+    transform: scale(1.15);
+  }
+  100% {
+    transform: scale(1);
+  }
+}
\ No newline at end of file