Composite Component

Component composed of several components.

<Toolbar>

Button
Button
Button

</Toolbar>

html

<div class="comp2" data-count="3">
  <p class="comp2__name">&lt;Toolbar&gt;</p>
  <div class="comp2__row">
    <div class="comp2__child" style="background:#F5C2E0;">Button</div>
    <div class="comp2__child" style="background:#F5C2E0;">Button</div>
    <div class="comp2__child" style="background:#F5C2E0;">Button</div>
  </div>
  <p class="comp2__name">&lt;/Toolbar&gt;</p>
</div>
<style>
.comp2 { font: 13px/1.5 system-ui, sans-serif; color: #241430; background: #FAF7F2; padding: 18px; border-radius: 12px; width: 300px; box-sizing: border-box; border: 1.5px dashed #24143030; }
.comp2__name { margin: 0; font: 11px ui-monospace, monospace; color: #24143099; }
.comp2__row { display: flex; gap: 8px; min-height: 34px; padding: 8px 0; }
.comp2__child { flex: 1; border-radius: 6px; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 600; }
.comp2[data-count="0"] .comp2__child { display: none; }
.comp2[data-count="1"] .comp2__child:nth-child(n+2) { display: none; }
</style>

tailwind

<div class="comp2tw comp2tw--3 font-sans text-[#241430] bg-[#FAF7F2] p-4.5 rounded-xl w-[300px] box-border border border-dashed border-[#24143030]">
  <p class="m-0 font-mono text-[11px] text-[#24143099]">&lt;Toolbar&gt;</p>
  <div class="comp2tw__row flex gap-2 min-h-[34px] py-2">
    <div class="comp2tw__child flex-1 rounded-md flex items-center justify-center text-[11px] font-semibold" style="background:#F5C2E0;">Button</div>
    <div class="comp2tw__child flex-1 rounded-md flex items-center justify-center text-[11px] font-semibold" style="background:#F5C2E0;">Button</div>
    <div class="comp2tw__child flex-1 rounded-md flex items-center justify-center text-[11px] font-semibold" style="background:#F5C2E0;">Button</div>
  </div>
  <p class="m-0 font-mono text-[11px] text-[#24143099]">&lt;/Toolbar&gt;</p>
</div>
<style>
.comp2tw--0 .comp2tw__child { display: none; }
.comp2tw--1 .comp2tw__child:nth-child(n+2) { display: none; }
</style>

react

export function CompositeComponent({
  name = "Toolbar",
  childCount = "3",
  accent = "#F5C2E0",
  showLabels = true,
}) {
  const n = Number(childCount);
  const children = [0, 1, 2].filter((i) => i < n);
  return (
    <div style={{ font: "13px/1.5 system-ui, sans-serif", color: "#241430", background: "#FAF7F2", padding: 18, borderRadius: 12, width: 300, boxSizing: "border-box", border: "1.5px dashed #24143030" }}>
      <p style={{ margin: 0, fontFamily: "ui-monospace, monospace", fontSize: 11, color: "#24143099" }}>&lt;{name}&gt;</p>
      <div style={{ display: "flex", gap: 8, minHeight: 34, padding: "8px 0" }}>
        {children.map((i) => (
          <div key={i} style={{ flex: 1, borderRadius: 6, display: "flex", alignItems: "center", justifyContent: "center", fontSize: 11, fontWeight: 600, background: accent }}>
            {showLabels && "Button"}
          </div>
        ))}
      </div>
      <p style={{ margin: 0, fontFamily: "ui-monospace, monospace", fontSize: 11, color: "#24143099" }}>&lt;/{name}&gt;</p>
    </div>
  );
}