Edit String Catalogue

Name

Also known as (comma separated)

Brief definition Store of translatable interface text.

Notes

Tier Core Useful Reference Deleted

Controls schema (JSON array) [ { "id": "catalogueName", "type": "text", "label": "Catalogue", "default": "app.strings" }, { "id": "highlightLang", "type": "select", "label": "Highlight column", "default": "fr", "options": [ "en", "fr", "es" ] }, { "id": "showKeys", "type": "toggle", "label": "Show string keys", "default": true }, { "id": "accent", "type": "color", "label": "Accent colour", "default": "#E8A020", "presets": [ "#E8A020", "#A8E6C1", "#F5C2E0", "#BFD9F2", "#D9C8F0", "#241430" ] } ]

Templates (JSON object keyed by format) { "html": "<div class=\"cat cat--{{highlightLang}}\">\n <p class=\"cat__name\">{{catalogueName}}</p>\n <table class=\"cat__table\" style=\"--a:{{accent}};\">\n <tr><th>{{#if showKeys}}key{{/if}}</th><th class=\"cat__col cat__col--en\">en</th><th class=\"cat__col cat__col--fr\">fr</th><th class=\"cat__col cat__col--es\">es</th></tr>\n <tr><td>{{#if showKeys}}save_button{{/if}}</td><td class=\"cat__col cat__col--en\">Save</td><td class=\"cat__col cat__col--fr\">Enregistrer</td><td class=\"cat__col cat__col--es\">Guardar</td></tr>\n <tr><td>{{#if showKeys}}cancel_button{{/if}}</td><td class=\"cat__col cat__col--en\">Cancel</td><td class=\"cat__col cat__col--fr\">Annuler</td><td class=\"cat__col cat__col--es\">Cancelar</td></tr>\n </table>\n</div>\n<style>\n.cat { font: 12px/1.5 system-ui, sans-serif; color: #241430; background: #FAF7F2; padding: 16px; border-radius: 12px; width: 300px; box-sizing: border-box; }\n.cat__name { margin: 0 0 10px; font: 11px ui-monospace, monospace; color: #24143099; }\n.cat__table { width: 100%; border-collapse: collapse; }\n.cat__table th, .cat__table td { text-align: left; padding: 6px; border-bottom: 1px solid #24143014; font-size: 11px; }\n.cat--en .cat__col--en, .cat--fr .cat__col--fr, .cat--es .cat__col--es { background: var(--a); border-radius: 4px; }\n</style>", "tailwind": "<div class=\"cattw cattw--{{highlightLang}} font-sans text-[#241430] bg-[#FAF7F2] p-4 rounded-xl w-[300px] box-border\">\n <p class=\"m-0 mb-2.5 font-mono text-[11px] text-[#24143099]\">{{catalogueName}}</p>\n <table class=\"w-full border-collapse\" style=\"--a:{{accent}};\">\n <tr><th class=\"text-left p-1.5 border-b border-[#24143014] text-[11px]\">{{#if showKeys}}key{{/if}}</th><th class=\"cattw__col cattw__col--en text-left p-1.5 border-b border-[#24143014] text-[11px]\">en</th><th class=\"cattw__col cattw__col--fr text-left p-1.5 border-b border-[#24143014] text-[11px]\">fr</th><th class=\"cattw__col cattw__col--es text-left p-1.5 border-b border-[#24143014] text-[11px]\">es</th></tr>\n <tr><td class=\"p-1.5 border-b border-[#24143014] text-[11px]\">{{#if showKeys}}save_button{{/if}}</td><td class=\"cattw__col cattw__col--en p-1.5 border-b border-[#24143014] text-[11px]\">Save</td><td class=\"cattw__col cattw__col--fr p-1.5 border-b border-[#24143014] text-[11px]\">Enregistrer</td><td class=\"cattw__col cattw__col--es p-1.5 border-b border-[#24143014] text-[11px]\">Guardar</td></tr>\n <tr><td class=\"p-1.5 text-[11px]\">{{#if showKeys}}cancel_button{{/if}}</td><td class=\"cattw__col cattw__col--en p-1.5 text-[11px]\">Cancel</td><td class=\"cattw__col cattw__col--fr p-1.5 text-[11px]\">Annuler</td><td class=\"cattw__col cattw__col--es p-1.5 text-[11px]\">Cancelar</td></tr>\n </table>\n</div>\n<style>\n.cattw--en .cattw__col--en, .cattw--fr .cattw__col--fr, .cattw--es .cattw__col--es { background: var(--a); border-radius: 4px; }\n</style>", "react": "export function StringCatalogue({\n catalogueName = \"{{catalogueName}}\",\n highlightLang = \"{{highlightLang}}\",\n showKeys = {{showKeys}},\n accent = \"{{accent}}\",\n}) {\n const rows = [\n { key: \"save_button\", en: \"Save\", fr: \"Enregistrer\", es: \"Guardar\" },\n { key: \"cancel_button\", en: \"Cancel\", fr: \"Annuler\", es: \"Cancelar\" },\n ];\n const langs = [\"en\", \"fr\", \"es\"];\n const cell = (l) => ({ padding: 6, borderBottom: \"1px solid #24143014\", fontSize: 11, background: l === highlightLang ? accent : \"transparent\", borderRadius: l === highlightLang ? 4 : 0 });\n return (\n <div style={{ font: \"12px/1.5 system-ui, sans-serif\", color: \"#241430\", background: \"#FAF7F2\", padding: 16, borderRadius: 12, width: 300, boxSizing: \"border-box\" }}>\n <p style={{ margin: \"0 0 10px\", fontFamily: \"ui-monospace, monospace\", fontSize: 11, color: \"#24143099\" }}>{catalogueName}</p>\n <table style={{ width: \"100%\", borderCollapse: \"collapse\" }}>\n <tbody>\n <tr><th style={{ textAlign: \"left\", padding: 6, fontSize: 11 }}>{showKeys && \"key\"}</th>{langs.map((l) => <th key={l} style={cell(l)}>{l}</th>)}</tr>\n {rows.map((r) => (\n <tr key={r.key}>\n <td style={{ textAlign: \"left\", padding: 6, fontSize: 11 }}>{showKeys && r.key}</td>\n {langs.map((l) => <td key={l} style={cell(l)}>{r[l]}</td>)}\n </tr>\n ))}\n </tbody>\n </table>\n </div>\n );\n}" }