31 lines
1.0 KiB
TypeScript
31 lines
1.0 KiB
TypeScript
import discountRed from "~/assets/icons/product/discount-red.svg";
|
|
import { ProductDetail } from "src/api/types";
|
|
|
|
interface ProductInfoProps {
|
|
product: ProductDetail;
|
|
productDiscountPercent: number;
|
|
}
|
|
|
|
export const ProductInfo = ({
|
|
product,
|
|
productDiscountPercent,
|
|
}: ProductInfoProps) => (
|
|
<div className="flex flex-col gap-2 mt-8 px-4">
|
|
<div className="flex gap-3 items-center">
|
|
{productDiscountPercent && productDiscountPercent > 0 ? (
|
|
<div className="flex gap-[2px] items-center">
|
|
<p className="text-B14 font-bold text-RED mt-1">
|
|
{productDiscountPercent || "0"}
|
|
</p>
|
|
<img src={discountRed} alt="discount-red" className="w-6 h-6" />
|
|
</div>
|
|
) : null}
|
|
{productDiscountPercent && productDiscountPercent > 0 ? (
|
|
<div className="w-[6px] h-[6px] rounded-full bg-BLACK" />
|
|
) : null}
|
|
<p className="text-B18 font-bold">{product.title}</p>
|
|
</div>
|
|
<p className="text-R12 text-GRAY">{product.description}</p>
|
|
</div>
|
|
);
|