Container Component

Handles state/data/business logic.

html

<div class="ctnr ctnr--loaded">
  <div class="ctnr__box" style="border-color:#BFD9F2;">UserContainer<small>fetches user.name</small></div>
  <span class="ctnr__arrow" aria-hidden="true">&darr;</span>
  <div class="ctnr__box ctnr__box--presentational">
    UserView (presentational)
    <div class="ctnr__skeleton" role="status" aria-label="loading"></div>
    <div class="ctnr__value">Ada Lovelace</div>
  </div>
</div>
<style>
.ctnr { font: 12px/1.5 system-ui, sans-serif; color: #241430; background: #FAF7F2; padding: 18px; border-radius: 12px; width: 280px; box-sizing: border-box; text-align: center; }
.ctnr__box { border: 2px dashed; border-radius: 8px; padding: 10px; font-weight: 700; }
.ctnr__box small { display: block; font-weight: 400; font-size: 10px; color: #24143099; margin-top: 4px; }
.ctnr__box--presentational { border-style: solid; border-color: #24143020; margin-top: 4px; }
.ctnr__arrow { display: block; font-size: 16px; color: #24143060; margin: 4px 0; }
.ctnr__skeleton { display: none; height: 16px; border-radius: 4px; background: #24143014; margin: 8px auto 0; width: 70%; }
.ctnr__value { display: none; margin-top: 8px; font-weight: 600; }
.ctnr--loading .ctnr__skeleton { display: block; }
.ctnr--loaded .ctnr__value { display: block; }
</style>

tailwind

<div class="ctnrtw ctnrtw--loaded font-sans text-xs text-[#241430] bg-[#FAF7F2] p-4.5 rounded-xl w-[280px] box-border text-center">
  <div class="border-2 border-dashed rounded-lg p-2.5 font-bold" style="border-color:#BFD9F2;">UserContainer<small class="block font-normal text-[10px] text-[#24143099] mt-1">fetches user.name</small></div>
  <span class="block text-base text-[#24143060] my-1" aria-hidden="true">&darr;</span>
  <div class="border border-solid border-[#24143020] rounded-lg p-2.5 font-bold mt-1">
    UserView (presentational)
    <div class="ctnrtw__skeleton hidden h-4 rounded bg-[#24143014] mx-auto mt-2 w-[70%]" role="status" aria-label="loading"></div>
    <div class="ctnrtw__value hidden mt-2 font-semibold">Ada Lovelace</div>
  </div>
</div>
<style>
.ctnrtw--loading .ctnrtw__skeleton { display: block; }
.ctnrtw--loaded .ctnrtw__value { display: block; }
</style>

react

export function ContainerComponent({
  dataLabel = "user.name",
  value = "Ada Lovelace",
  state = "loaded",
  accent = "#BFD9F2",
}) {
  const loading = state === "loading";
  return (
    <div style={{ font: "12px/1.5 system-ui, sans-serif", color: "#241430", background: "#FAF7F2", padding: 18, borderRadius: 12, width: 280, boxSizing: "border-box", textAlign: "center" }}>
      <div style={{ border: `2px dashed ${accent}`, borderRadius: 8, padding: 10, fontWeight: 700 }}>
        UserContainer
        <small style={{ display: "block", fontWeight: 400, fontSize: 10, color: "#24143099", marginTop: 4 }}>fetches {dataLabel}</small>
      </div>
      <span aria-hidden="true" style={{ display: "block", fontSize: 16, color: "#24143060", margin: "4px 0" }}>&darr;</span>
      <div style={{ border: "1.5px solid #24143020", borderRadius: 8, padding: 10, fontWeight: 700, marginTop: 4 }}>
        UserView (presentational)
        {loading
          ? <div role="status" aria-label="loading" style={{ height: 16, borderRadius: 4, background: "#24143014", margin: "8px auto 0", width: "70%" }} />
          : <div style={{ marginTop: 8, fontWeight: 600 }}>{value}</div>}
      </div>
    </div>
  );
}