add styles to disabled button at PortfolioImage

infoshareacademy · Mar 2, 2024 · 6da94a5 · 6da94a5
1 parent f092bd2
commit 6da94a5
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 6 deletions.
diff --git a/my-app/src/Components/Portfolio/PortfolioImage/PortfolioImage.jsx b/my-app/src/Components/Portfolio/PortfolioImage/PortfolioImage.jsx
@@ -25,6 +25,10 @@ export const PortfolioImage = () => {
     fetchData();
   }, [imageId]);
 
+  const addToBasket = () => {
+    console.log("ADDED");
+  };
+
   if (!photo) {
     return <div>Loading...</div>;
   }
@@ -41,11 +45,24 @@ export const PortfolioImage = () => {
         </p>
         <h3>Price: {photo.price}$</h3>
       </div>
-      <button
-        className={classnames(styles["portfolio__input--buy"], styles[theme])}
-      >
-        {photo.amount ? "Add to basket" : "Out of stock"}
-      </button>
+      {photo.amount ? (
+        <button
+          onClick={addToBasket}
+          className={classnames(styles["portfolio__input--buy"], styles[theme])}
+        >
+          Add to basket
+        </button>
+      ) : (
+        <button
+          disabled
+          className={classnames(
+            styles["portfolio__input--buy--disabled"],
+            styles[theme]
+          )}
+        >
+          Out of stock
+        </button>
+      )}
     </div>
   );
 };
diff --git a/my-app/src/Components/Portfolio/PortfolioImage/PortfolioImage.module.css b/my-app/src/Components/Portfolio/PortfolioImage/PortfolioImage.module.css
@@ -11,7 +11,8 @@
   border-radius: 35px;
 }
 
-.portfolio__input--buy {
+.portfolio__input--buy,
+.portfolio__input--buy--disabled {
   align-self: center;
   padding: 2px 20px;
   margin: 20px 20px;
@@ -32,6 +33,11 @@
   color: var(--main-text-color-dark);
 }
 
+.portfolio__input--buy--disabled.light {
+  color: var(--box-light-color-light);
+  background-color: rgb(202, 200, 200);
+}
+
 .portfolio__input--buy.light {
   color: var(--dark-text-color-light);
   background-color: var(--box-dark-color-light);
@@ -42,6 +48,11 @@
   background-color: var(--dark-hover-color-light);
 }
 
+.portfolio__input--buy--disabled.dark {
+  color: var(--dark-text-color-light);
+  background-color: rgb(166, 165, 165);
+}
+
 .portfolio__input--buy.dark {
   color: var(--dark-text-color-dark);
   background-color: var(--box-dark-color-dark);