category detail

app/home/components/ProductCard.tsx

@@ -5,14 +5,18 @@ import Image from "next/image";
 import { type FC } from "react";
 import { Rating } from "react-simple-star-rating";
 
-const ProductCard: FC = () => {
+type ProductCardProps = {
+  title?: string;
+};
+
+const ProductCard: FC<ProductCardProps> = ({ title = "جعبه کیبوردی" }) => {
   return (
     <div>
       <div className="rounded-xl overflow-hidden">
-        <Image src={ProductImage} alt="product-card" width={500} height={500} className="w-full aspect-square object-cover" />
+        <Image src={ProductImage} alt={title} width={500} height={500} className="w-full aspect-square object-cover" />
       </div>
       <div className="relative bg-white p-4 rounded-xl -mt-6 shadow-[0_4px_20px_rgba(0,0,0,0.1)]">
-        <div className="text-[#2A3950] font-bold text-center">جعبه کیبوردی</div>
+        <div className="text-[#2A3950] font-bold text-center">{title}</div>
         <div className="mt-2 flex justify-center items-center gap-1.5">
           <Rating initialValue={4.5} size={20} readonly rtl allowFraction SVGstyle={{ display: "inline-block" }} />
           <div className="text-xs mt-1">4.5</div>
@@ -23,7 +27,7 @@ const ProductCard: FC = () => {
           <div className="text-sm">1,000,000 تومان</div>
         </div>
         <div className="mt-3 px-4">
-          <Button variant="outline" className="h-8! w-full">
+          <Button variant="outline" className="h-8 w-full">
             جزییات
           </Button>
         </div>