Presentational Component

Primarily responsible for rendering.

html

<div class="presc">
  <p class="presc__sig">PriceTag(price, status) &mdash; no internal state</p>
  <div class="presc__out presc__out--default" style="--accent:#E8A020;">
    <span class="presc__price">$42</span>
    <span class="presc__flag presc__flag--sale">Sale</span>
    <span class="presc__flag presc__flag--sold-out">Sold out</span>
  </div>
</div>
<style>
.presc { font: 13px/1.5 system-ui, sans-serif; color: #241430; background: #FAF7F2; padding: 20px; border-radius: 12px; width: 280px; box-sizing: border-box; }
.presc__sig { margin: 0 0 14px; font: 11px ui-monospace, monospace; color: #24143099; }
.presc__out { display: flex; align-items: center; gap: 8px; padding: 14px; border-radius: 8px; background: #ffffff; border: 1.5px solid #24143018; }
.presc__price { font-weight: 800; font-size: 18px; }
.presc__flag { display: none; font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 4px; color: #241430; }
.presc__out--sale .presc__flag--sale { display: inline-block; background: var(--accent); }
.presc__out--sold-out .presc__flag--sold-out { display: inline-block; background: #24143018; }
.presc__out--sold-out .presc__price { text-decoration: line-through; opacity: .5; }
</style>

tailwind

<div class="font-sans text-[#241430] bg-[#FAF7F2] p-5 rounded-xl w-[280px] box-border">
  <p class="m-0 mb-3.5 font-mono text-[11px] text-[#24143099]">PriceTag(price, status) &mdash; no internal state</p>
  <div class="presctw presctw--default flex items-center gap-2 p-3.5 rounded-lg bg-white border border-[#24143018]" style="--accent:#E8A020;">
    <span class="presctw__price font-extrabold text-lg">$42</span>
    <span class="presctw__flag presctw__flag--sale hidden text-[11px] font-bold py-0.5 px-2 rounded">Sale</span>
    <span class="presctw__flag presctw__flag--sold-out hidden text-[11px] font-bold py-0.5 px-2 rounded bg-[#24143018]">Sold out</span>
  </div>
</div>
<style>
.presctw--sale .presctw__flag--sale { display: inline-block; background: var(--accent); }
.presctw--sold-out .presctw__flag--sold-out { display: inline-block; }
.presctw--sold-out .presctw__price { text-decoration: line-through; opacity: .5; }
</style>

react

export function PresentationalComponent({
  name = "PriceTag",
  price = "$42",
  variant = "default",
  accent = "#E8A020",
}) {
  return (
    <div style={{ font: "13px/1.5 system-ui, sans-serif", color: "#241430", background: "#FAF7F2", padding: 20, borderRadius: 12, width: 280, boxSizing: "border-box" }}>
      <p style={{ margin: "0 0 14px", fontFamily: "ui-monospace, monospace", fontSize: 11, color: "#24143099" }}>{name}(price, status) &mdash; no internal state</p>
      <div style={{ display: "flex", alignItems: "center", gap: 8, padding: 14, borderRadius: 8, background: "#ffffff", border: "1.5px solid #24143018" }}>
        <span style={{ fontWeight: 800, fontSize: 18, textDecoration: variant === "sold-out" ? "line-through" : "none", opacity: variant === "sold-out" ? .5 : 1 }}>{price}</span>
        {variant === "sale" && <span style={{ fontSize: 11, fontWeight: 700, padding: "3px 8px", borderRadius: 4, background: accent }}>Sale</span>}
        {variant === "sold-out" && <span style={{ fontSize: 11, fontWeight: 700, padding: "3px 8px", borderRadius: 4, background: "#24143018" }}>Sold out</span>}
      </div>
    </div>
  );
}