hamid zarghami
36 lines
1.5 KiB
TypeScript
36 lines
1.5 KiB
TypeScript
"use client";
|
||
import Button from "@/app/components/Button";
|
||
import ProductImage from "@/assets/images/product_image.png";
|
||
import Image from "next/image";
|
||
import { type FC } from "react";
|
||
import { Rating } from "react-simple-star-rating";
|
||
|
||
const ProductCard: FC = () => {
|
||
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" />
|
||
</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="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>
|
||
</div>
|
||
<div className="mt-2 text-[#0A1B2C8F]/56 text-sm text-center">قیمت از </div>
|
||
<div className="flex gap-1.5 items-center justify-center">
|
||
<div className="text-[#0A1B2C8F]/56 line-through decoration-[#D00003] text-[10px]">10,000,000</div>
|
||
<div className="text-sm">1,000,000 تومان</div>
|
||
</div>
|
||
<div className="mt-3 px-4">
|
||
<Button variant="outline" className="h-8! w-full">
|
||
جزییات
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
};
|
||
|
||
export default ProductCard;
|