import { format } from "../lib/format"; import { text } from "../lib/config"; import { Slot } from "../lib/slots"; import { plainText } from "../lib/plain"; import { Html } from "../components/Html"; import { PinIcon } from "../components/icons"; import { CardRemove } from "./CardRemove"; /** * Sticky product strip of the cards view: image, name and price for each * visible product. The base product carries a "Pinned" badge (or the * table's own label, e.g. "This product"); the others * offer "Pin" to become the base. On the shopper's own list each card also * has a Remove (✕) button on its image. */ export function CardStrip({ visible, base, baseLabel, canPin, onPin, canRemove, }) { return (

{visible.map((product) => { const isBase = base && product.id === base.id; return (

{isBase && ( {baseLabel || text("pinned", "Pinned")} )} {canRemove && }

{canPin && !isBase && ( )}

); })}

); }