Inspector

Contextual panel for viewing/editing object properties.

html

<div class="insp-demo insp-demo--right">
  <div class="insp-demo__canvas">Canvas</div>
  <aside class="insp-demo__panel" style="width:180px;border-color:#D9C8F0;">
    <h4 class="insp-demo__title" style="color:#D9C8F0;">Rectangle 3</h4>
    <div class="insp-demo__row"><span>X</span><span>128</span></div>
    <div class="insp-demo__row"><span>Y</span><span>64</span></div>
    <div class="insp-demo__row"><span>Width</span><span>240</span></div>
    <div class="insp-demo__row"><span>Height</span><span>96</span></div>
  </aside>
</div>
<style>
.insp-demo { display: flex; height: 160px; font: 13px system-ui, sans-serif; color: #241430; border: 1px solid #24143022; }
.insp-demo--left { flex-direction: row-reverse; }
.insp-demo__canvas { flex: 1; background: repeating-linear-gradient(45deg, #24143008 0 8px, transparent 8px 16px); display: flex; align-items: center; justify-content: center; color: #24143066; }
.insp-demo__panel { flex: none; box-sizing: border-box; background: #FAF7F2; border-left: 1px solid; padding: 12px; overflow-y: auto; }
.insp-demo--left .insp-demo__panel { border-left: none; border-right: 1px solid; }
.insp-demo__title { margin: 0 0 10px; font-size: 13px; }
.insp-demo__row { display: flex; justify-content: space-between; padding: 5px 0; border-bottom: 1px solid #24143014; }
.insp-demo__row span:first-child { color: #24143099; }
</style>

tailwind

<div class="flex h-40 font-sans text-[13px] text-[#241430] border border-[#24143022] insp-tw insp-tw--right">
  <div class="flex-1 flex items-center justify-center text-[#24143066]" style="background-image:repeating-linear-gradient(45deg, #24143008 0 8px, transparent 8px 16px);">Canvas</div>
  <aside class="flex-none box-border bg-[#FAF7F2] border-l p-3 overflow-y-auto" style="width:180px;border-color:#D9C8F0;">
    <h4 class="m-0 mb-2.5 text-[13px]" style="color:#D9C8F0;">Rectangle 3</h4>
    <div class="flex justify-between py-1.5 border-b border-[#24143014]"><span class="text-[#24143099]">X</span><span>128</span></div>
    <div class="flex justify-between py-1.5 border-b border-[#24143014]"><span class="text-[#24143099]">Y</span><span>64</span></div>
    <div class="flex justify-between py-1.5 border-b border-[#24143014]"><span class="text-[#24143099]">Width</span><span>240</span></div>
    <div class="flex justify-between py-1.5"><span class="text-[#24143099]">Height</span><span>96</span></div>
  </aside>
</div>
<style>
.insp-tw--left { flex-direction: row-reverse; }
.insp-tw--left aside { border-left: none; border-right: 1px solid; }
</style>

react

export function Inspector({
  title = "Rectangle 3",
  position = "right",
  width = 180,
  accent = "#D9C8F0",
}) {
  const isLeft = position === "left";
  const rows = [["X", "128"], ["Y", "64"], ["Width", "240"], ["Height", "96"]];
  return (
    <div style={{ display: "flex", flexDirection: isLeft ? "row-reverse" : "row", height: 160, fontFamily: "system-ui, sans-serif", fontSize: 13, color: "#241430", border: "1px solid #24143022" }}>
      <div style={{ flex: 1, display: "flex", alignItems: "center", justifyContent: "center", color: "#24143066", backgroundImage: "repeating-linear-gradient(45deg, #24143008 0 8px, transparent 8px 16px)" }}>Canvas</div>
      <aside style={{ flex: "none", boxSizing: "border-box", width, background: "#FAF7F2", padding: 12, overflowY: "auto", borderLeft: isLeft ? "none" : `1px solid ${accent}`, borderRight: isLeft ? `1px solid ${accent}` : "none" }}>
        <h4 style={{ margin: "0 0 10px", fontSize: 13, color: accent }}>{title}</h4>
        {rows.map(([k, v]) => (
          <div key={k} style={{ display: "flex", justifyContent: "space-between", padding: "5px 0", borderBottom: "1px solid #24143014" }}>
            <span style={{ color: "#24143099" }}>{k}</span><span>{v}</span>
          </div>
        ))}
      </aside>
    </div>
  );
}