Edit Dead End

Name

Also known as (comma separated)

Brief definition View with no obvious next action/navigation.

Notes

Tier Core Useful Reference Deleted

Controls schema (JSON array) [ { "id": "message", "type": "text", "label": "Message", "default": "No results found" }, { "id": "fixed", "type": "toggle", "label": "Fixed (has a way out)", "default": false }, { "id": "accent", "type": "color", "label": "Accent colour", "default": "#BFD9F2", "presets": [ "#241430", "#A8E6C1", "#F5C2E0", "#BFD9F2", "#D9C8F0", "#E8A020" ] } ]

Templates (JSON object keyed by format) { "html": "<div class=\"de-demo\" style=\"--accent:{{accent}};\">\n <span class=\"de-demo__badge{{#if fixed}} de-demo__badge--good{{/if}}\">{{#if fixed}}&#10003; Better{{/if}}{{unless fixed}}&#10007; Anti-pattern: dead end{{/unless}}</span>\n <div class=\"de-demo__panel\">\n <p class=\"de-demo__msg\">{{message}}</p>\n {{#if fixed}}\n <div class=\"de-demo__links\">\n <a href=\"#\" class=\"de-demo__link\">&larr; Back to search</a>\n <a href=\"#\" class=\"de-demo__link\">Browse categories</a>\n <a href=\"#\" class=\"de-demo__link de-demo__link--primary\">Go home</a>\n </div>\n {{/if}}\n {{unless fixed}}<p class=\"de-demo__nothing\">(nothing else on this screen)</p>{{/unless}}\n </div>\n</div>\n<style>\n.de-demo { width: 300px; font: 13px system-ui, sans-serif; color: #241430; }\n.de-demo__badge { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 11px; font-weight: 700; margin-bottom: 10px; background: #b3261e; color: #FAF7F2; }\n.de-demo__badge--good { background: #1a7a44; }\n.de-demo__panel { padding: 26px 16px; border-radius: 12px; background: #24143008; text-align: center; }\n.de-demo__msg { margin: 0 0 4px; font-weight: 700; }\n.de-demo__nothing { margin: 0; font-size: 11px; color: #241430aa; font-style: italic; }\n.de-demo__links { margin-top: 12px; display: flex; flex-direction: column; gap: 6px; }\n.de-demo__link { color: var(--accent); font-weight: 600; text-decoration: none; }\n.de-demo__link--primary { padding: 8px; border-radius: 7px; background: var(--accent); color: #241430; }\n</style>", "tailwind": "<div style=\"width:300px;font-family:system-ui,sans-serif;color:#241430\">\n <span class=\"de-tw-badge{{#if fixed}} de-tw-badge--good{{/if}} inline-block px-2.5 py-0.5 rounded-full text-[11px] font-bold mb-2.5\">{{#if fixed}}&#10003; Better{{/if}}{{unless fixed}}&#10007; Anti-pattern: dead end{{/unless}}</span>\n <div class=\"px-4 py-6.5 rounded-xl text-center bg-[#24143008]\">\n <p class=\"m-0 mb-1 font-bold\">{{message}}</p>\n {{#if fixed}}\n <div class=\"mt-3 flex flex-col gap-1.5\">\n <a href=\"#\" class=\"font-semibold no-underline\" style=\"color:{{accent}}\">&larr; Back to search</a>\n <a href=\"#\" class=\"font-semibold no-underline\" style=\"color:{{accent}}\">Browse categories</a>\n <a href=\"#\" class=\"font-semibold no-underline p-2 rounded-md\" style=\"background:{{accent}};color:#241430\">Go home</a>\n </div>\n {{/if}}\n {{unless fixed}}<p class=\"m-0 text-[11px] text-[#241430aa] italic\">(nothing else on this screen)</p>{{/unless}}\n </div>\n</div>\n<style>\n.de-tw-badge { background: #b3261e; color: #FAF7F2; }\n.de-tw-badge--good { background: #1a7a44; color: #FAF7F2; }\n</style>", "react": "export function DeadEnd({\n message = \"{{message}}\",\n fixed = {{fixed}},\n accent = \"{{accent}}\",\n}) {\n return (\n <div style={{ width: 300, fontFamily: \"system-ui, sans-serif\", fontSize: 13, color: \"#241430\" }}>\n <span style={{ display: \"inline-block\", padding: \"3px 10px\", borderRadius: 999, fontSize: 11, fontWeight: 700, marginBottom: 10, background: fixed ? \"#1a7a44\" : \"#b3261e\", color: \"#FAF7F2\" }}>\n {fixed ? \"\\u2713 Better\" : \"\\u2717 Anti-pattern: dead end\"}\n </span>\n <div style={{ padding: \"26px 16px\", borderRadius: 12, background: \"#24143008\", textAlign: \"center\" }}>\n <p style={{ margin: \"0 0 4px\", fontWeight: 700 }}>{message}</p>\n {fixed ? (\n <div style={{ marginTop: 12, display: \"flex\", flexDirection: \"column\", gap: 6 }}>\n <a href=\"#\" style={{ color: accent, fontWeight: 600, textDecoration: \"none\" }}>&larr; Back to search</a>\n <a href=\"#\" style={{ color: accent, fontWeight: 600, textDecoration: \"none\" }}>Browse categories</a>\n <a href=\"#\" style={{ padding: 8, borderRadius: 7, background: accent, color: \"#241430\", fontWeight: 600, textDecoration: \"none\" }}>Go home</a>\n </div>\n ) : <p style={{ margin: 0, fontSize: 11, color: \"#241430aa\", fontStyle: \"italic\" }}>(nothing else on this screen)</p>}\n </div>\n </div>\n );\n}" }