Edit Route Guard

Name

Also known as (comma separated)

Brief definition Logic controlling access to a route.

Notes

Tier Core Useful Reference Deleted

Controls schema (JSON array) [ { "id": "label", "type": "text", "label": "Destination", "default": "Billing settings" }, { "id": "requirement", "type": "text", "label": "Requirement", "default": "Admin role" }, { "id": "blocked", "type": "toggle", "label": "Access blocked", "default": false }, { "id": "accent", "type": "color", "label": "Accent colour", "default": "#241430", "presets": [ "#241430", "#A8E6C1", "#BFD9F2", "#F5C2E0", "#D9C8F0", "#E8A020" ] } ]

Templates (JSON object keyed by format) { "html": "<div class=\"guard\" style=\"--accent:{{accent}};\">\n <a class=\"guard__link\" href=\"#\" {{#if blocked}}aria-disabled=\"true\" tabindex=\"-1\"{{/if}}>\n <span class=\"guard__lock\" aria-hidden=\"true\"></span>{{label}}\n </a>\n {{#if blocked}}<span class=\"guard__badge guard__badge--blocked\">Blocked &middot; requires {{requirement}}</span>{{/if}}\n {{#unless blocked}}<span class=\"guard__badge guard__badge--allowed\">Allowed</span>{{/unless}}\n</div>\n<style>\n.guard { display: flex; align-items: center; gap: 10px; font: 14px system-ui, sans-serif; color: #241430; }\n.guard__link { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; color: #241430; padding: 8px 10px; border-radius: 8px; }\n.guard__link:hover { background: #FAF7F2; }\n.guard__link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }\n.guard__link[aria-disabled=\"true\"] { opacity: .45; pointer-events: none; }\n.guard__lock { width: 10px; height: 8px; border: 2px solid currentColor; border-radius: 2px; position: relative; }\n.guard__lock::before { content: \"\"; position: absolute; left: 1px; top: -6px; width: 6px; height: 6px; border: 2px solid currentColor; border-bottom: none; border-radius: 6px 6px 0 0; }\n.guard__badge { font-size: 12px; padding: 3px 9px; border-radius: 999px; }\n.guard__badge--allowed { background: rgba(168,230,193,.5); color: #1c6b3c; }\n.guard__badge--blocked { background: rgba(36,20,48,.08); color: #241430; }\n</style>", "tailwind": "<div class=\"flex items-center gap-2.5 font-sans text-sm text-[#241430]\" style=\"--accent:{{accent}};\">\n <a class=\"route-guard-tw__link inline-flex items-center gap-1.5 no-underline text-[#241430] px-2.5 py-2 rounded-lg hover:bg-[#FAF7F2]\" href=\"#\" {{#if blocked}}aria-disabled=\"true\" tabindex=\"-1\"{{/if}}>\n <span class=\"route-guard-tw__lock w-2.5 h-2 border-2 border-current rounded-sm relative\" aria-hidden=\"true\"></span>{{label}}\n </a>\n {{#if blocked}}<span class=\"text-xs px-2.5 py-1 rounded-full bg-[#241430]/[.08]\">Blocked &middot; requires {{requirement}}</span>{{/if}}\n {{#unless blocked}}<span class=\"text-xs px-2.5 py-1 rounded-full bg-[#A8E6C1]/50 text-[#1c6b3c]\">Allowed</span>{{/unless}}\n</div>\n<style>\n.route-guard-tw__link[aria-disabled=\"true\"] { opacity: .45; pointer-events: none; }\n.route-guard-tw__link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }\n.route-guard-tw__lock::before { content: \"\"; position: absolute; left: 1px; top: -6px; width: 6px; height: 6px; border: 2px solid currentColor; border-bottom: none; border-radius: 6px 6px 0 0; }\n</style>", "react": "export function RouteGuard({\n label = \"{{label}}\",\n requirement = \"{{requirement}}\",\n blocked = {{blocked}},\n accent = \"{{accent}}\",\n}) {\n return (\n <div style={{ display: \"flex\", alignItems: \"center\", gap: 10, fontFamily: \"system-ui, sans-serif\", fontSize: 14, color: \"#241430\" }}>\n <a\n href=\"#\"\n aria-disabled={blocked ? \"true\" : undefined}\n tabIndex={blocked ? -1 : undefined}\n style={{ display: \"inline-flex\", alignItems: \"center\", gap: 6, textDecoration: \"none\", color: \"#241430\", padding: \"8px 10px\", borderRadius: 8, opacity: blocked ? .45 : 1, pointerEvents: blocked ? \"none\" : \"auto\" }}\n >\n <span aria-hidden=\"true\" style={{ width: 10, height: 8, border: \"2px solid currentColor\", borderRadius: 2 }} />\n {label}\n </a>\n {blocked ? (\n <span style={{ fontSize: 12, padding: \"3px 9px\", borderRadius: 999, background: \"rgba(36,20,48,.08)\", color: \"#241430\" }}>Blocked &middot; requires {requirement}</span>\n ) : (\n <span style={{ fontSize: 12, padding: \"3px 9px\", borderRadius: 999, background: \"rgba(168,230,193,.5)\", color: \"#1c6b3c\" }}>Allowed</span>\n )}\n </div>\n );\n}" }