i swear if forever young loses the BCC im gonna rename this project

Author: SA-Faizeen

package-lock.json

@@ -11,12 +11,15 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@reduxjs/toolkit": "^2.13.0",
     "@tailwindcss/vite": "^4.3.3",
     "axios": "^1.20.0",
     "faizen-react-components": "github:SA-Faizeen/faizen-react-components",
     "react": "^19.2.8",
     "react-dom": "^19.2.8",
+    "react-hot-toast": "^2.6.1",
     "react-icons": "^5.7.0",
+    "react-redux": "^9.3.1",
     "react-router-dom": "^7.18.4",
     "react-slick": "^0.31.0",
     "slick-carousel": "^2.0.0",

package.json

@@ -6,7 +6,7 @@ import { GoDotFill } from "react-icons/go";
  * @param {string} props.title - Group heading
  * @param {{ label: string, color?: string }[]} props.items - Options; a color adds a dot
  */
-const FilterGroup = ({ title, items }) => {
+const FilterGroup = ({ title, items, onClick }) => {
   return (
     <div>
       <h3 className="text-ink pb-8.75 text-xl font-bold">{title}</h3>
@@ -15,6 +15,7 @@ const FilterGroup = ({ title, items }) => {
           <li key={item.label} className="shop-category">
             <button
               type="button"
+              onClick={onClick}
               className="flex cursor-pointer items-center gap-x-2.5"
             >
               {item.color && <GoDotFill color={item.color} />}

src/components/FilterGroup.jsx

@@ -1,16 +1,21 @@
 import { FaArrowsRotate, FaCartShopping, FaHeart } from "react-icons/fa6";
+import { useDispatch } from "react-redux";
+import toast from "react-hot-toast";
+import { addToCart } from "../store/cartSlice";
 
 /**
  * A text button with an icon beside it, used in the product action panel.
  * @param {Object} props
  * @param {React.ReactNode} props.icon - Icon element, e.g. <FaHeart />
  * @param {React.ReactNode} props.children - Button label
  * @param {string} [props.className] - Extra classes to add
+ * @param {function} [props.onClick] - Click handler
  */
-const ProductActionButton = ({ icon, children, className = "" }) => {
+const ProductActionButton = ({ icon, children, onClick, className = "" }) => {
   return (
     <button
       type="button"
+      onClick={onClick}
       className={`flex cursor-pointer items-center gap-x-4 ${className}`}
     >
       <span className="text-muted hover:text-ink duration-300 ease-in-out hover:font-bold">
@@ -25,9 +30,12 @@ const ProductActionButton = ({ icon, children, className = "" }) => {
  * Panel of product actions that slides up from below its parent on hover.
  * The parent must have the classes `group relative overflow-hidden`.
  * @param {Object} props
+ * @param {Object} [props.product] - Product data to add to cart
  * @param {string} [props.className] - Extra classes to add
  */
-const ProductActions = ({ className = "" }) => {
+const ProductActions = ({ product, className = "" }) => {
+  const dispatch = useDispatch();
+
   return (
     <div
       className={`absolute top-full left-0 flex h-auto w-full flex-col items-end gap-y-5 bg-white pt-2 pr-7.5 text-base transition-transform duration-300 ease-in-out group-focus-within:-translate-y-full group-hover:-translate-y-full ${className}`}
@@ -38,7 +46,15 @@ const ProductActions = ({ className = "" }) => {
       <ProductActionButton icon={<FaArrowsRotate />}>
         Compare
       </ProductActionButton>
-      <ProductActionButton icon={<FaCartShopping />}>
+      <ProductActionButton
+        icon={<FaCartShopping />}
+        onClick={() => {
+          if (product) {
+            dispatch(addToCart(product));
+            toast.success(`${product.name} added to cart!`);
+          }
+        }}
+      >
         Add to Cart
       </ProductActionButton>
     </div>

src/components/ProductActions.jsx

@@ -8,33 +8,25 @@ import ProductActions from "./ProductActions";
  *
  * @component
  * @param {Object}  props
+ * @param {string|number} [props.id]    - Product ID.
  * @param {string}  props.img          - URL (or import path) of the product image.
  * @param {string}  props.name         - Product name shown as the card title.
  * @param {string|number} props.price  - Price label displayed alongside the name.
  * @param {string}  props.color        - Color / variant description shown below the name.
  * @param {boolean} [props.badge=true] - Whether to render the {@link ProductBadge}.
  * @param {string}  [props.badgeText="New"] - Text displayed inside the badge.
  * @returns {JSX.Element}
- *
- * @example
- * <ProductCard
- *   img="/images/watch.png"
- *   name="Classic Watch"
- *   price="$120"
- *   color="Midnight Black"
- *   badge={true}
- *   badgeText="Sale"
- * />
  */
-const ProductCard = ({ img, name, price, color, badge = true, badgeText="New" }) => {
+const ProductCard = ({ id, img, name, price, color, badge = true, badgeText="New" }) => {
+  const productId = id || name;
   return (
     <div>
       <div className="group relative overflow-hidden">
         <img src={img} alt={name} />
         {badge && (
           <ProductBadge label={badgeText} className="absolute top-5 left-5" />
         )}
-        <ProductActions />
+        <ProductActions product={{ id: productId, img, name, price, color }} />
       </div>
       <div className="pt-4.5">
         <Flex className="items-baseline justify-between gap-x-4">
@@ -47,4 +39,4 @@ const ProductCard = ({ img, name, price, color, badge = true, badgeText="New" })
   );
 };
 
-export default ProductCard;
+export default ProductCard;