Translate admin panel to all 6 languages

src/app/admin/settings/page.tsx

@@ -1,3 +1,4 @@
+import { getTranslations } from "next-intl/server";
 import { createSetting, deleteSetting, updateSetting } from "@/actions/admin-settings";
 import { StatusCard } from "@/components/admin/dashboard";
 import { prisma } from "@/lib/prisma";
@@ -5,6 +6,8 @@ import { prisma } from "@/lib/prisma";
 export const dynamic = "force-dynamic";
 
 export default async function AdminSettings() {
+  const t = await getTranslations("pages.admin.settings");
+
   let settings: Awaited<ReturnType<typeof prisma.websiteSetting.findMany>> = [];
   try {
     settings = await prisma.websiteSetting.findMany({ orderBy: { key: "asc" } });
@@ -21,36 +24,36 @@ export default async function AdminSettings() {
           <span className="text-lg">⚙️</span>
         </div>
         <div>
-          <h1 className="m-0 text-xl font-extrabold text-[var(--color-text)]">CMS Settings</h1>
+          <h1 className="m-0 text-xl font-extrabold text-[var(--color-text)]">{t("title")}</h1>
           <p className="m-0 text-xs text-[var(--color-text-muted)] mt-0.5">
-            Key/value config read at runtime via <code>siteSettings.get()</code>. Saving busts the cache.
+            {t.rich("subtitle", { code: (chunks) => <code>{chunks}</code> })}
           </p>
         </div>
       </div>
 
       <div className="admin-stat-row">
-        <span className="admin-stat-chip">{settings.length} settings</span>
-        <span className="admin-stat-chip">{documented} with comment</span>
+        <span className="admin-stat-chip">{t("settingsCount", { count: settings.length })}</span>
+        <span className="admin-stat-chip">{t("documentedCount", { count: documented })}</span>
       </div>
 
       <section>
-        <h2 className="admin-section-title">Add / overwrite</h2>
+        <h2 className="admin-section-title">{t("addOverwrite")}</h2>
         <form action={createSetting} className="admin-card">
           <div className="flex gap-2 flex-wrap">
-            <input name="key" placeholder="key" required />
-            <input name="value" placeholder="value" className="flex-1 min-w-[160px]" />
-            <input name="comment" placeholder="comment" />
-            <button type="submit" className="btn btn-primary">Save</button>
+            <input name="key" placeholder={t("form.keyPlaceholder")} required />
+            <input name="value" placeholder={t("form.valuePlaceholder")} className="flex-1 min-w-[160px]" />
+            <input name="comment" placeholder={t("form.commentPlaceholder")} />
+            <button type="submit" className="btn btn-primary">{t("save")}</button>
           </div>
         </form>
       </section>
 
       <section>
         <h2 className="admin-section-title">
-          Settings <span className="inline-block text-[0.72rem] font-bold px-2 py-0.5 rounded-full bg-[var(--color-primary)]/18 text-[var(--color-text)]">{settings.length}</span>
+          {t("settings")} <span className="inline-block text-[0.72rem] font-bold px-2 py-0.5 rounded-full bg-[var(--color-primary)]/18 text-[var(--color-text)]">{settings.length}</span>
         </h2>
         {settings.length === 0 ? (
-          <div className="admin-empty">No settings yet.</div>
+          <div className="admin-empty">{t("noSettings")}</div>
         ) : (
           <div className="grid">
             {settings.map((s) => (
@@ -64,7 +67,7 @@ export default async function AdminSettings() {
                     <input type="hidden" name="key" value={s.key} />
                     <input name="value" defaultValue={s.value} style={{ flex: 1 }} />
                     <button type="submit" className="btn btn-outline">
-                      Save
+                      {t("save")}
                     </button>
                   </form>
                   <form action={deleteSetting}>