Reusability

Ability to use a component in multiple contexts.

html

<div class="reuse reuse--nav">
  <p class="reuse__hint">The same &lt;Badge&gt; component, unchanged, reused in three places</p>
  <div class="reuse__ctx reuse__ctx--nav">Dashboard <span class="reuse__badge reuse__badge--bold" style="background:#D9C8F0;">Beta</span></div>
  <div class="reuse__ctx reuse__ctx--card"><strong>Analytics module</strong><span class="reuse__badge reuse__badge--bold" style="background:#D9C8F0;">Beta</span></div>
  <div class="reuse__ctx reuse__ctx--table">Row: Export tool <span class="reuse__badge reuse__badge--bold" style="background:#D9C8F0;">Beta</span></div>
</div>
<style>
.reuse { font: 13px/1.5 system-ui, sans-serif; color: #241430; background: #FAF7F2; padding: 18px; border-radius: 12px; width: 300px; box-sizing: border-box; }
.reuse__hint { margin: 0 0 12px; font-size: 11px; color: #24143099; }
.reuse__ctx { display: none; align-items: center; justify-content: space-between; padding: 12px; border-radius: 8px; background: #ffffff; border: 1.5px solid #24143018; }
.reuse__badge { font-size: 11px; padding: 3px 9px; border-radius: 999px; color: #241430; font-weight: 400; }
.reuse__badge--bold { font-weight: 700; }
.reuse--nav .reuse__ctx--nav, .reuse--card .reuse__ctx--card, .reuse--table .reuse__ctx--table { display: flex; }
</style>

tailwind

<div class="reusetw reusetw--nav font-sans text-[#241430] bg-[#FAF7F2] p-4.5 rounded-xl w-[300px] box-border">
  <p class="m-0 mb-3 text-[11px] text-[#24143099]">The same &lt;Badge&gt; component, unchanged, reused in three places</p>
  <div class="reusetw__ctx reusetw__ctx--nav hidden items-center justify-between p-3 rounded-lg bg-white border border-[#24143018]">Dashboard <span class="text-[11px] py-0.5 px-2.5 rounded-full text-[#241430] font-bold" style="background:#D9C8F0;">Beta</span></div>
  <div class="reusetw__ctx reusetw__ctx--card hidden items-center justify-between p-3 rounded-lg bg-white border border-[#24143018]"><strong>Analytics module</strong><span class="text-[11px] py-0.5 px-2.5 rounded-full text-[#241430] font-bold" style="background:#D9C8F0;">Beta</span></div>
  <div class="reusetw__ctx reusetw__ctx--table hidden items-center justify-between p-3 rounded-lg bg-white border border-[#24143018]">Row: Export tool <span class="text-[11px] py-0.5 px-2.5 rounded-full text-[#241430] font-bold" style="background:#D9C8F0;">Beta</span></div>
</div>
<style>
.reusetw--nav .reusetw__ctx--nav, .reusetw--card .reusetw__ctx--card, .reusetw--table .reusetw__ctx--table { display: flex; }
</style>

react

export function Reusability({
  badgeText = "Beta",
  context = "nav",
  accent = "#D9C8F0",
  bold = true,
}) {
  const Badge = () => <span style={{ fontSize: 11, padding: "3px 9px", borderRadius: 999, color: "#241430", fontWeight: bold ? 700 : 400, background: accent }}>{badgeText}</span>;
  const ctxStyle = { display: "flex", alignItems: "center", justifyContent: "space-between", padding: 12, borderRadius: 8, background: "#ffffff", border: "1.5px solid #24143018" };
  return (
    <div style={{ font: "13px/1.5 system-ui, sans-serif", color: "#241430", background: "#FAF7F2", padding: 18, borderRadius: 12, width: 300, boxSizing: "border-box" }}>
      <p style={{ margin: "0 0 12px", fontSize: 11, color: "#24143099" }}>The same &lt;Badge&gt; component, unchanged, reused in three places</p>
      {context === "nav" && <div style={ctxStyle}>Dashboard <Badge /></div>}
      {context === "card" && <div style={ctxStyle}><strong>Analytics module</strong><Badge /></div>}
      {context === "table" && <div style={ctxStyle}>Row: Export tool <Badge /></div>}
    </div>
  );
}