Sotoontech/Vitron-Front
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(home): clean discount pill on product cards

Browse Source 
Restyle the discount badge to the redesign's pill: ٪ + rounded Persian
digits on a translucent white rounded-full chip, no icon. Drops the raw
decimal percent (e.g. "12.7" -> "٪۱۳") and the discount-red icon import.
Applied in both the discounts rail and the for-you masonry.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
Arda Samadi 2026-06-27 14:08:32 +03:30
parent f8289898bc
commit eefad5387c
2 changed files with 12 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
app/components/HorizontalProductList.tsx
View File

@ -4,7 +4,6 @@ import { motion } from "framer-motion";
import { ChevronLeft, ChevronRight, Images } from "lucide-react";
import { Skeleton } from "./ui/skeleton";
import { ErrorState } from "./UiProvider";
import discountRed from "~/assets/icons/product/discount-red.svg";
import placeholderImage from "~/assets/icons/product.png";
interface HorizontalProduct {
@ -250,16 +249,13 @@ const ProductThumbnail = ({
};
const DiscountBadge = ({ discountPercent }: { discountPercent?: number }) => {
if (!discountPercent) return null;
return (
<div className="absolute items-center gap-1 flex top-1 right-1 z-10 bg-[#FDFDFD]/75 text-[#FF3B30] py-[2px] px-2 rounded-[15px]">
<p
className="text-B14 font-bold leading-[20px]"
dir="ltr"
style={{ fontFamily: "Arial, sans-serif" }}
>
{discountPercent}
</p>
<img src={discountRed} alt="discount-red" className="w-5 h-5" />
<div
dir="ltr"
className="absolute top-2 right-2 z-10 bg-WHITE/90 text-RED font-extrabold text-[12px] px-2 py-[3px] rounded-full backdrop-blur-sm"
>
٪{Math.round(discountPercent).toLocaleString("fa-IR")}
</div>
);
};

16
app/components/MondrianProductList.tsx
View File

@ -10,7 +10,6 @@ import { useDeleteInstagramPost } from "~/requestHandler/use-instagram-hooks";
import placeholderImage from "~/assets/icons/product.png";
import placeholderImageDark from "~/assets/icons/product-dark.png";
import { useRootData } from "~/hooks/use-root-data";
import discountRed from "~/assets/icons/product/discount-red.svg";
interface MondrianList {
id?: string;
@ -429,16 +428,13 @@ const ProductCard = ({
);
};
const DiscountBadge = ({ discountPercent }: { discountPercent?: number }) => {
if (!discountPercent) return null;
return (
<div className="absolute items-center gap-1 flex top-1 right-1 z-10 bg-[#FDFDFD]/75 text-[#FF3B30] py-[2px] px-2 rounded-[15px]">
<p
className="text-B14 font-bold leading-[20px]"
dir="ltr"
style={{ fontFamily: "Arial, sans-serif" }}
>
{discountPercent}
</p>
<img src={discountRed} alt="discount-red" className="w-5 h-5" />
<div
dir="ltr"
className="absolute top-2 right-2 z-10 bg-WHITE/90 text-RED font-extrabold text-[12px] px-2 py-[3px] rounded-full backdrop-blur-sm"
>
٪{Math.round(discountPercent).toLocaleString("fa-IR")}
</div>
);
};