Edit Internationalisation (i18n) · UI Element Compendium

Name

Also known as (comma separated)

Brief definition

Notes

Tier

Controls schema (JSON array)

Templates (JSON object keyed by format)

{
  "html": "<div class=\"i18n i18n--{{locale}}{{#if i18nReady}} i18n--ready{{/if}}\">\n  <p class=\"i18n__code\">t(&quot;{{buttonKey}}&quot;)</p>\n  <button type=\"button\" class=\"i18n__btn i18n__btn--hardcoded\" style=\"background:{{accent}};\">Submit</button>\n  <button type=\"button\" class=\"i18n__btn i18n__btn--en\" style=\"background:{{accent}};\">Submit</button>\n  <button type=\"button\" class=\"i18n__btn i18n__btn--es\" style=\"background:{{accent}};\">Enviar</button>\n  <button type=\"button\" class=\"i18n__btn i18n__btn--fr\" style=\"background:{{accent}};\">Envoyer</button>\n  <p class=\"i18n__note\">{{#if i18nReady}}String is looked up per locale.{{/if}}{{#unless i18nReady}}Text is hardcoded &mdash; it never changes with locale.{{/unless}}</p>\n</div>\n<style>\n.i18n { font: 14px/1.5 system-ui, sans-serif; color: #241430; background: #FAF7F2; padding: 20px; border-radius: 12px; width: 280px; box-sizing: border-box; text-align: center; }\n.i18n__code { margin: 0 0 12px; font: 11px ui-monospace, monospace; color: #24143099; }\n.i18n__btn { display: none; border: none; padding: 10px 20px; border-radius: 8px; color: #241430; font: 600 14px system-ui, sans-serif; cursor: pointer; }\n.i18n__btn--hardcoded { display: inline-block; }\n.i18n--ready .i18n__btn--hardcoded { display: none; }\n.i18n--ready.i18n--en .i18n__btn--en, .i18n--ready.i18n--es .i18n__btn--es, .i18n--ready.i18n--fr .i18n__btn--fr { display: inline-block; }\n.i18n__note { margin: 12px 0 0; font-size: 11px; color: #24143099; }\n</style>",
  "tailwind": "<div class=\"i18ntw i18ntw--{{locale}}{{#if i18nReady}} i18ntw--ready{{/if}} font-sans text-[#241430] bg-[#FAF7F2] p-5 rounded-xl w-[280px] box-border text-center\">\n  <p class=\"m-0 mb-3 font-mono text-[11px] text-[#24143099]\">t(&quot;{{buttonKey}}&quot;)</p>\n  <button type=\"button\" class=\"i18ntw__btn i18ntw__btn--hardcoded inline-block border-none py-2.5 px-5 rounded-lg font-semibold text-sm cursor-pointer\" style=\"background:{{accent}};\">Submit</button>\n  <button type=\"button\" class=\"i18ntw__btn i18ntw__btn--en hidden border-none py-2.5 px-5 rounded-lg font-semibold text-sm cursor-pointer\" style=\"background:{{accent}};\">Submit</button>\n  <button type=\"button\" class=\"i18ntw__btn i18ntw__btn--es hidden border-none py-2.5 px-5 rounded-lg font-semibold text-sm cursor-pointer\" style=\"background:{{accent}};\">Enviar</button>\n  <button type=\"button\" class=\"i18ntw__btn i18ntw__btn--fr hidden border-none py-2.5 px-5 rounded-lg font-semibold text-sm cursor-pointer\" style=\"background:{{accent}};\">Envoyer</button>\n  <p class=\"m-0 mt-3 text-[11px] text-[#24143099]\">{{#if i18nReady}}String is looked up per locale.{{/if}}{{#unless i18nReady}}Text is hardcoded &mdash; it never changes with locale.{{/unless}}</p>\n</div>\n<style>\n.i18ntw--ready .i18ntw__btn--hardcoded { display: none; }\n.i18ntw--ready.i18ntw--en .i18ntw__btn--en, .i18ntw--ready.i18ntw--es .i18ntw__btn--es, .i18ntw--ready.i18ntw--fr .i18ntw__btn--fr { display: inline-block; }\n</style>",
  "react": "export function InternationalisationI18n({\n  buttonKey = \"{{buttonKey}}\",\n  locale = \"{{locale}}\",\n  i18nReady = {{i18nReady}},\n  accent = \"{{accent}}\",\n}) {\n  const labels = { en: \"Submit\", es: \"Enviar\", fr: \"Envoyer\" };\n  const label = i18nReady ? labels[locale] : \"Submit\";\n  const btnStyle = { border: \"none\", padding: \"10px 20px\", borderRadius: 8, color: \"#241430\", fontWeight: 600, fontSize: 14, cursor: \"pointer\", background: accent };\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\", textAlign: \"center\" }}>\n      <p style={{ margin: \"0 0 12px\", fontFamily: \"ui-monospace, monospace\", fontSize: 11, color: \"#24143099\" }}>t(\"{buttonKey}\")</p>\n      <button type=\"button\" style={btnStyle}>{label}</button>\n      <p style={{ margin: \"12px 0 0\", fontSize: 11, color: \"#24143099\" }}>{i18nReady ? \"String is looked up per locale.\" : \"Text is hardcoded \\u2014 it never changes with locale.\"}</p>\n    </div>\n  );\n}"
}