Edit Reusability

Name

Also known as (comma separated)

Brief definition Ability to use a component in multiple contexts.

Notes

Tier Core Useful Reference Deleted

Controls schema (JSON array) [ { "id": "badgeText", "type": "text", "label": "Badge text", "default": "Beta" }, { "id": "context", "type": "select", "label": "Used inside", "default": "nav", "options": [ "nav", "card", "table" ] }, { "id": "accent", "type": "color", "label": "Accent colour", "default": "#D9C8F0", "presets": [ "#D9C8F0", "#A8E6C1", "#F5C2E0", "#BFD9F2", "#E8A020", "#241430" ] }, { "id": "bold", "type": "toggle", "label": "Bold text", "default": true } ]

Templates (JSON object keyed by format) { "html": "<div class=\"reuse reuse--{{context}}\">\n <p class=\"reuse__hint\">The same &lt;Badge&gt; component, unchanged, reused in three places</p>\n <div class=\"reuse__ctx reuse__ctx--nav\">Dashboard <span class=\"reuse__badge{{#if bold}} reuse__badge--bold{{/if}}\" style=\"background:{{accent}};\">{{badgeText}}</span></div>\n <div class=\"reuse__ctx reuse__ctx--card\"><strong>Analytics module</strong><span class=\"reuse__badge{{#if bold}} reuse__badge--bold{{/if}}\" style=\"background:{{accent}};\">{{badgeText}}</span></div>\n <div class=\"reuse__ctx reuse__ctx--table\">Row: Export tool <span class=\"reuse__badge{{#if bold}} reuse__badge--bold{{/if}}\" style=\"background:{{accent}};\">{{badgeText}}</span></div>\n</div>\n<style>\n.reuse { font: 13px/1.5 system-ui, sans-serif; color: #241430; background: #FAF7F2; padding: 18px; border-radius: 12px; width: 300px; box-sizing: border-box; }\n.reuse__hint { margin: 0 0 12px; font-size: 11px; color: #24143099; }\n.reuse__ctx { display: none; align-items: center; justify-content: space-between; padding: 12px; border-radius: 8px; background: #ffffff; border: 1.5px solid #24143018; }\n.reuse__badge { font-size: 11px; padding: 3px 9px; border-radius: 999px; color: #241430; font-weight: 400; }\n.reuse__badge--bold { font-weight: 700; }\n.reuse--nav .reuse__ctx--nav, .reuse--card .reuse__ctx--card, .reuse--table .reuse__ctx--table { display: flex; }\n</style>", "tailwind": "<div class=\"reusetw reusetw--{{context}} font-sans text-[#241430] bg-[#FAF7F2] p-4.5 rounded-xl w-[300px] box-border\">\n <p class=\"m-0 mb-3 text-[11px] text-[#24143099]\">The same &lt;Badge&gt; component, unchanged, reused in three places</p>\n <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]{{#if bold}} font-bold{{/if}}\" style=\"background:{{accent}};\">{{badgeText}}</span></div>\n <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]{{#if bold}} font-bold{{/if}}\" style=\"background:{{accent}};\">{{badgeText}}</span></div>\n <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]{{#if bold}} font-bold{{/if}}\" style=\"background:{{accent}};\">{{badgeText}}</span></div>\n</div>\n<style>\n.reusetw--nav .reusetw__ctx--nav, .reusetw--card .reusetw__ctx--card, .reusetw--table .reusetw__ctx--table { display: flex; }\n</style>", "react": "export function Reusability({\n badgeText = \"{{badgeText}}\",\n context = \"{{context}}\",\n accent = \"{{accent}}\",\n bold = {{bold}},\n}) {\n const Badge = () => <span style={{ fontSize: 11, padding: \"3px 9px\", borderRadius: 999, color: \"#241430\", fontWeight: bold ? 700 : 400, background: accent }}>{badgeText}</span>;\n const ctxStyle = { display: \"flex\", alignItems: \"center\", justifyContent: \"space-between\", padding: 12, borderRadius: 8, background: \"#ffffff\", border: \"1.5px solid #24143018\" };\n return (\n <div style={{ font: \"13px/1.5 system-ui, sans-serif\", color: \"#241430\", background: \"#FAF7F2\", padding: 18, borderRadius: 12, width: 300, boxSizing: \"border-box\" }}>\n <p style={{ margin: \"0 0 12px\", fontSize: 11, color: \"#24143099\" }}>The same &lt;Badge&gt; component, unchanged, reused in three places</p>\n {context === \"nav\" && <div style={ctxStyle}>Dashboard <Badge /></div>}\n {context === \"card\" && <div style={ctxStyle}><strong>Analytics module</strong><Badge /></div>}\n {context === \"table\" && <div style={ctxStyle}>Row: Export tool <Badge /></div>}\n </div>\n );\n}" }