special offer

src/components/listview/MenuItem.tsx

@@ -103,6 +103,13 @@ const MenuItem = ({ product, variantId: variantIdProp, variantValue: variantValu
   const formattedOriginalPrice = useMemo(() => (effectivePrice ? effectivePrice.toLocaleString("fa-IR") : "0"), [effectivePrice]);
 
   const hasDiscount = useMemo(() => (product.discount || 0) > 0, [product.discount]);
+  const isSpecialOffer = product.isSpecialOffer === true;
+
+  const specialOfferBadge = isSpecialOffer ? (
+    <span className="inline-block rounded-md bg-primary text-primary-foreground text-[10px] font-medium px-1.5 py-0.5 leading-tight">
+      پیشنهاد ویژه
+    </span>
+  ) : null;
 
   const quantityLabel = useMemo(() => {
     if (displayQuantity == null) return null;
@@ -126,7 +133,8 @@ const MenuItem = ({ product, variantId: variantIdProp, variantValue: variantValu
 
   if (viewMode === "grid") {
     return (
-      <div className="flex flex-col w-full h-full">
+      <div className="relative flex flex-col w-full h-full">
+        {specialOfferBadge && <div className="absolute top-0 left-0 z-10">{specialOfferBadge}</div>}
         <Link href={productDetailUrl} className="cursor-pointer rounded-xl aspect-square overflow-hidden flex items-center justify-center max-h-[100px]">
           <img className="rounded-xl max-w-full max-h-full  object-center" src={resolvedImage} alt={productName} />
         </Link>
@@ -161,8 +169,9 @@ const MenuItem = ({ product, variantId: variantIdProp, variantValue: variantValu
 
   return (
     <>
-      {badge && (
-        <div className="absolute top-3 left-3 z-10">
+      {(badge || specialOfferBadge) && (
+        <div className="absolute top-3 left-3 z-10 flex flex-col items-start gap-1">
+          {specialOfferBadge}
           {badge}
         </div>
       )}