Disabled clearing on empty list

mahammad-mostafa · Aug 26, 2023 · 52ff633 · 52ff633
1 parent 801e947
commit 52ff633
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 1 deletion.
diff --git a/src/components/footer.jsx b/src/components/footer.jsx
@@ -15,7 +15,7 @@ const Footer = ({ total, handler }) => (
         {total.toFixed(2)}
       </span>
     </div>
-    <button className={Styles.clear} type="button" onClick={() => handler(true)}>Clear Cart</button>
+    <button className={Styles.clear} type="button" onClick={() => handler(true)} disabled={total === 0}>Clear Cart</button>
   </footer>
 );
 

diff --git a/src/styles/footer.module.css b/src/styles/footer.module.css
@@ -51,6 +51,11 @@
   background-color: var(--bright-color);
 }
 
+.clear:disabled {
+  color: var(--dark-color);
+  background-color: var(--border-color);
+}
+
 @media only screen and (min-width: 768px) {
   .container {
     max-width: 1000px;