Arda Samadi
60d6a2a6e4
- ProductDetailView: gallery | info two-column grid on desktop with breadcrumb; gallery sticky; reviews + similar products full-width below. Mobile stack unchanged (only lg: utilities + a moved BottomBar, which is position:fixed so its DOM location doesn't affect mobile) - BottomBar: static inline buy card on desktop (fixed bottom bar on mobile) - ProductInfo: larger title + tightened top spacing at lg - MyLayout: desktop gate now includes /product/* Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
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 lg:mt-2">
|
|
<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 lg:text-[26px] font-bold">{product.title}</p>
|
|
</div>
|
|
<p className="text-R12 text-GRAY">{product.description}</p>
|
|
</div>
|
|
);
|