Edit Locale

Name

Also known as (comma separated)

Brief definition Combination of language and region (e.g. en-GB).

Notes

Tier Core Useful Reference Deleted

Controls schema (JSON array) [ { "id": "locale", "type": "select", "label": "Locale", "default": "en-GB", "options": [ "en-US", "en-GB", "fr-CA" ] }, { "id": "sampleNumber", "type": "number", "label": "Sample number", "default": 12345.6, "min": 0, "max": 999999, "step": 0.1 }, { "id": "showBreakdown", "type": "toggle", "label": "Show language + region breakdown", "default": true }, { "id": "accent", "type": "color", "label": "Accent colour", "default": "#D9C8F0", "presets": [ "#D9C8F0", "#A8E6C1", "#F5C2E0", "#BFD9F2", "#E8A020", "#241430" ] } ]

Templates (JSON object keyed by format) { "html": "<div class=\"loc\" data-num=\"{{sampleNumber}}\" data-locale=\"{{locale}}\">\n <p class=\"loc__tag\" style=\"background:{{accent}};\">{{locale}}</p>\n {{#if showBreakdown}}\n <p class=\"loc__part loc__part--en-us\">language: <strong>en</strong> &nbsp; region: <strong>US</strong></p>\n <p class=\"loc__part loc__part--en-gb\">language: <strong>en</strong> &nbsp; region: <strong>GB</strong></p>\n <p class=\"loc__part loc__part--fr-ca\">language: <strong>fr</strong> &nbsp; region: <strong>CA</strong></p>\n {{/if}}\n <p class=\"loc__number\">&nbsp;</p>\n</div>\n<script>(function () {\n var el = document.querySelector(\".loc\");\n if (!el) return;\n var fmt = new Intl.NumberFormat(el.dataset.locale);\n el.querySelector(\".loc__number\").textContent = fmt.format(Number(el.dataset.num));\n})();</script>\n<style>\n.loc { font: 14px/1.5 system-ui, sans-serif; color: #241430; background: #FAF7F2; padding: 20px; border-radius: 12px; width: 280px; box-sizing: border-box; }\n.loc__tag { display: inline-block; font: 700 12px ui-monospace, monospace; padding: 4px 10px; border-radius: 6px; margin-bottom: 12px; }\n.loc__part { display: none; margin: 0 0 10px; font-size: 12px; color: #24143099; }\n.loc[data-locale=\"en-US\"] .loc__part--en-us, .loc[data-locale=\"en-GB\"] .loc__part--en-gb, .loc[data-locale=\"fr-CA\"] .loc__part--fr-ca { display: block; }\n.loc__number { margin: 0; font-size: 22px; font-weight: 800; }\n</style>", "tailwind": "<div class=\"loctw font-sans text-[#241430] bg-[#FAF7F2] p-5 rounded-xl w-[280px] box-border\" data-num=\"{{sampleNumber}}\" data-locale=\"{{locale}}\">\n <p class=\"inline-block font-bold text-xs font-mono py-1 px-2.5 rounded-md mb-3\" style=\"background:{{accent}};\">{{locale}}</p>\n {{#if showBreakdown}}\n <p class=\"loctw__part loctw__part--en-us hidden m-0 mb-2.5 text-xs text-[#24143099]\">language: <strong>en</strong> &nbsp; region: <strong>US</strong></p>\n <p class=\"loctw__part loctw__part--en-gb hidden m-0 mb-2.5 text-xs text-[#24143099]\">language: <strong>en</strong> &nbsp; region: <strong>GB</strong></p>\n <p class=\"loctw__part loctw__part--fr-ca hidden m-0 mb-2.5 text-xs text-[#24143099]\">language: <strong>fr</strong> &nbsp; region: <strong>CA</strong></p>\n {{/if}}\n <p class=\"loctw__number m-0 text-2xl font-extrabold\">&nbsp;</p>\n</div>\n<script>(function () {\n var el = document.querySelector(\".loctw\");\n if (!el) return;\n var fmt = new Intl.NumberFormat(el.dataset.locale);\n el.querySelector(\".loctw__number\").textContent = fmt.format(Number(el.dataset.num));\n})();</script>\n<style>\n.loctw[data-locale=\"en-US\"] .loctw__part--en-us, .loctw[data-locale=\"en-GB\"] .loctw__part--en-gb, .loctw[data-locale=\"fr-CA\"] .loctw__part--fr-ca { display: block; }\n</style>", "react": "import { useMemo } from \"react\";\n\nexport function Locale({\n locale = \"{{locale}}\",\n sampleNumber = {{sampleNumber}},\n showBreakdown = {{showBreakdown}},\n accent = \"{{accent}}\",\n}) {\n const number = useMemo(() => new Intl.NumberFormat(locale).format(sampleNumber), [locale, sampleNumber]);\n const [language, region] = locale.split(\"-\");\n return (\n <div style={{ font: \"14px/1.5 system-ui, sans-serif\", color: \"#241430\", background: \"#FAF7F2\", padding: 20, borderRadius: 12, width: 280, boxSizing: \"border-box\" }}>\n <p style={{ display: \"inline-block\", fontWeight: 700, fontSize: 12, fontFamily: \"ui-monospace, monospace\", padding: \"4px 10px\", borderRadius: 6, marginBottom: 12, background: accent }}>{locale}</p>\n {showBreakdown && <p style={{ margin: \"0 0 10px\", fontSize: 12, color: \"#24143099\" }}>language: <strong>{language}</strong> &nbsp; region: <strong>{region}</strong></p>}\n <p style={{ margin: 0, fontSize: 22, fontWeight: 800 }}>{number}</p>\n </div>\n );\n}" }