chore: update

frontend-prep/src/components/ProductCard.tsx

@@ -1,8 +1,17 @@
 import { useState } from "react";
 import { useNavigate } from "react-router-dom";
-import { useCart } from "../context/CartContext";
+import { useCart } from "../context/useCart";
 import "./ProductCard.css";
 
+function getTextColor(hex: string): string {
+    const h = hex.replace("#", "");
+    const full = h.length === 3 ? h.split("").map((c) => c + c).join("") : h;
+    const r = parseInt(full.slice(0, 2), 16);
+    const g = parseInt(full.slice(2, 4), 16);
+    const b = parseInt(full.slice(4, 6), 16);
+    return (r * 299 + g * 587 + b * 114) / 1000 > 128 ? "#000000" : "#ffffff";
+}
+
 interface ProductCardProps {
     id: number;
     name: string;
@@ -108,8 +117,13 @@ function ProductCard({
         }
     };
 
+    const cardColor = categoryColor || "#ffffff";
+
     return (
-        <div className={`product-card ${isOutOfStock ? "out-of-stock" : ""}`}>
+        <div
+            className={`product-card ${isOutOfStock ? "out-of-stock" : ""}`}
+            style={{ "--category-color": cardColor } as React.CSSProperties}
+        >
             <div className="product-card-content">
                 <div className="product-image-container">
                     <img
@@ -166,7 +180,7 @@ function ProductCard({
                             disabled={isOutOfStock}
                             style={
                                 categoryColor && !isOutOfStock
-                                    ? { background: categoryColor }
+                                    ? { background: categoryColor, color: getTextColor(categoryColor) }
                                     : undefined
                             }
                         >