Edit Parent Component

Name

Also known as (comma separated)

Brief definition Component containing another component.

Notes

Tier Core Useful Reference Deleted

Controls schema (JSON array) [ { "id": "propName", "type": "text", "label": "Shared prop name", "default": "count" }, { "id": "stateValue", "type": "text", "label": "Parent state value", "default": "42" }, { "id": "childCount", "type": "select", "label": "Children containing", "default": "2", "options": [ "1", "2", "3" ] }, { "id": "accent", "type": "color", "label": "Accent colour", "default": "#A8E6C1", "presets": [ "#A8E6C1", "#F5C2E0", "#BFD9F2", "#D9C8F0", "#E8A020", "#241430" ] } ]

Templates (JSON object keyed by format) { "html": "<div class=\"parentc\" data-count=\"{{childCount}}\">\n <div class=\"parentc__box\" style=\"border-color:{{accent}};\">Parent &mdash; owns {{propName}}={{stateValue}}</div>\n <div class=\"parentc__children\">\n <div class=\"parentc__child\" style=\"background:{{accent}};\">Child<small>{{propName}}={{stateValue}}</small></div>\n <div class=\"parentc__child\" style=\"background:{{accent}};\">Child<small>{{propName}}={{stateValue}}</small></div>\n <div class=\"parentc__child\" style=\"background:{{accent}};\">Child<small>{{propName}}={{stateValue}}</small></div>\n </div>\n</div>\n<style>\n.parentc { font: 12px/1.5 system-ui, sans-serif; color: #241430; background: #FAF7F2; padding: 18px; border-radius: 12px; width: 300px; box-sizing: border-box; }\n.parentc__box { border: 2px dashed; border-radius: 8px; padding: 10px; font-weight: 700; text-align: center; margin-bottom: 12px; }\n.parentc__children { display: flex; gap: 8px; }\n.parentc__child { flex: 1; border-radius: 8px; padding: 10px; text-align: center; font-weight: 700; box-sizing: border-box; }\n.parentc__child small { display: block; font-weight: 400; font-size: 10px; margin-top: 3px; }\n.parentc[data-count=\"1\"] .parentc__child:nth-child(n+2) { display: none; }\n.parentc[data-count=\"2\"] .parentc__child:nth-child(n+3) { display: none; }\n</style>", "tailwind": "<div class=\"parentctw parentctw--{{childCount}} font-sans text-[#241430] bg-[#FAF7F2] p-4.5 rounded-xl w-[300px] box-border\">\n <div class=\"border-2 border-dashed rounded-lg p-2.5 font-bold text-center mb-3\" style=\"border-color:{{accent}};\">Parent &mdash; owns {{propName}}={{stateValue}}</div>\n <div class=\"flex gap-2\">\n <div class=\"parentctw__child flex-1 rounded-lg p-2.5 text-center font-bold box-border\" style=\"background:{{accent}};\">Child<small class=\"block font-normal text-[10px] mt-1\">{{propName}}={{stateValue}}</small></div>\n <div class=\"parentctw__child flex-1 rounded-lg p-2.5 text-center font-bold box-border\" style=\"background:{{accent}};\">Child<small class=\"block font-normal text-[10px] mt-1\">{{propName}}={{stateValue}}</small></div>\n <div class=\"parentctw__child flex-1 rounded-lg p-2.5 text-center font-bold box-border\" style=\"background:{{accent}};\">Child<small class=\"block font-normal text-[10px] mt-1\">{{propName}}={{stateValue}}</small></div>\n </div>\n</div>\n<style>\n.parentctw--1 .parentctw__child:nth-child(n+2) { display: none; }\n.parentctw--2 .parentctw__child:nth-child(n+3) { display: none; }\n</style>", "react": "export function ParentComponent({\n propName = \"{{propName}}\",\n stateValue = \"{{stateValue}}\",\n childCount = \"{{childCount}}\",\n accent = \"{{accent}}\",\n}) {\n const n = Number(childCount);\n const children = [0, 1, 2].filter((i) => i < n);\n return (\n <div style={{ font: \"12px/1.5 system-ui, sans-serif\", color: \"#241430\", background: \"#FAF7F2\", padding: 18, borderRadius: 12, width: 300, boxSizing: \"border-box\" }}>\n <div style={{ border: `2px dashed ${accent}`, borderRadius: 8, padding: 10, fontWeight: 700, textAlign: \"center\", marginBottom: 12 }}>Parent &mdash; owns {propName}={stateValue}</div>\n <div style={{ display: \"flex\", gap: 8 }}>\n {children.map((i) => (\n <div key={i} style={{ flex: 1, borderRadius: 8, padding: 10, textAlign: \"center\", fontWeight: 700, boxSizing: \"border-box\", background: accent }}>\n Child\n <small style={{ display: \"block\", fontWeight: 400, fontSize: 10, marginTop: 3 }}>{propName}={stateValue}</small>\n </div>\n ))}\n </div>\n </div>\n );\n}" }