Arda Samadi
11656c2996
Show the seller's brand on the home product cards, like the design: a small logo circle + name overlaid above the title. - new SellerChip component: renders nothing without a name; falls back to the seller's initial when no logo is present (e.g. before the backend ships seller_logo). seller_name is already returned today, so the name shows immediately. - thread sellerName/sellerLogo/sellerUsername through ProductHomepage type, the home discounts + for-you mappings, and the MondrianProductList / HorizontalProductList card interfaces + overlays. Only renders where seller data is mapped (home), so seller-page and store-dashboard tiles are unaffected. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
33 lines
1.0 KiB
TypeScript
33 lines
1.0 KiB
TypeScript
interface SellerChipProps {
|
|
name?: string;
|
|
logo?: string | null;
|
|
}
|
|
|
|
/**
|
|
* Small brand chip (logo + name) shown over a product card's image overlay.
|
|
* Renders nothing when there's no seller name. Falls back to the seller's
|
|
* initial when no logo is available (e.g. before the backend exposes it).
|
|
*/
|
|
export default function SellerChip({ name, logo }: SellerChipProps) {
|
|
if (!name) return null;
|
|
return (
|
|
<div className="flex items-center gap-1.5 mb-1 min-w-0">
|
|
<span className="w-[15px] h-[15px] rounded-full overflow-hidden border border-white/40 bg-white/20 shrink-0 grid place-items-center text-[8px] font-bold text-white">
|
|
{logo ? (
|
|
<img
|
|
src={logo}
|
|
alt=""
|
|
className="w-full h-full object-cover"
|
|
onError={(e) => {
|
|
e.currentTarget.style.display = "none";
|
|
}}
|
|
/>
|
|
) : (
|
|
name.trim().charAt(0)
|
|
)}
|
|
</span>
|
|
<span className="text-white/85 text-[10.5px] truncate">{name}</span>
|
|
</div>
|
|
);
|
|
}
|