String Catalogue

Store of translatable interface text.

html

<div class="cat cat--fr">
  <p class="cat__name">app.strings</p>
  <table class="cat__table" style="--a:#E8A020;">
    <tr><th>key</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>
    <tr><td>save_button</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>
    <tr><td>cancel_button</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>
  </table>
</div>
<style>
.cat { font: 12px/1.5 system-ui, sans-serif; color: #241430; background: #FAF7F2; padding: 16px; border-radius: 12px; width: 300px; box-sizing: border-box; }
.cat__name { margin: 0 0 10px; font: 11px ui-monospace, monospace; color: #24143099; }
.cat__table { width: 100%; border-collapse: collapse; }
.cat__table th, .cat__table td { text-align: left; padding: 6px; border-bottom: 1px solid #24143014; font-size: 11px; }
.cat--en .cat__col--en, .cat--fr .cat__col--fr, .cat--es .cat__col--es { background: var(--a); border-radius: 4px; }
</style>

tailwind

<div class="cattw cattw--fr font-sans text-[#241430] bg-[#FAF7F2] p-4 rounded-xl w-[300px] box-border">
  <p class="m-0 mb-2.5 font-mono text-[11px] text-[#24143099]">app.strings</p>
  <table class="w-full border-collapse" style="--a:#E8A020;">
    <tr><th class="text-left p-1.5 border-b border-[#24143014] text-[11px]">key</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>
    <tr><td class="p-1.5 border-b border-[#24143014] text-[11px]">save_button</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>
    <tr><td class="p-1.5 text-[11px]">cancel_button</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>
  </table>
</div>
<style>
.cattw--en .cattw__col--en, .cattw--fr .cattw__col--fr, .cattw--es .cattw__col--es { background: var(--a); border-radius: 4px; }
</style>

react

export function StringCatalogue({
  catalogueName = "app.strings",
  highlightLang = "fr",
  showKeys = true,
  accent = "#E8A020",
}) {
  const rows = [
    { key: "save_button", en: "Save", fr: "Enregistrer", es: "Guardar" },
    { key: "cancel_button", en: "Cancel", fr: "Annuler", es: "Cancelar" },
  ];
  const langs = ["en", "fr", "es"];
  const cell = (l) => ({ padding: 6, borderBottom: "1px solid #24143014", fontSize: 11, background: l === highlightLang ? accent : "transparent", borderRadius: l === highlightLang ? 4 : 0 });
  return (
    <div style={{ font: "12px/1.5 system-ui, sans-serif", color: "#241430", background: "#FAF7F2", padding: 16, borderRadius: 12, width: 300, boxSizing: "border-box" }}>
      <p style={{ margin: "0 0 10px", fontFamily: "ui-monospace, monospace", fontSize: 11, color: "#24143099" }}>{catalogueName}</p>
      <table style={{ width: "100%", borderCollapse: "collapse" }}>
        <tbody>
          <tr><th style={{ textAlign: "left", padding: 6, fontSize: 11 }}>{showKeys && "key"}</th>{langs.map((l) => <th key={l} style={cell(l)}>{l}</th>)}</tr>
          {rows.map((r) => (
            <tr key={r.key}>
              <td style={{ textAlign: "left", padding: 6, fontSize: 11 }}>{showKeys && r.key}</td>
              {langs.map((l) => <td key={l} style={cell(l)}>{r[l]}</td>)}
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}