Translate admin panel to all 6 languages

src/app/admin/bans/page.tsx

@@ -2,6 +2,7 @@ import { createBan, liftBan } from "@/actions/admin-bans";
 import { StatusCard } from "@/components/admin/dashboard";
 import { prisma } from "@/lib/prisma";
 import { Ban } from "lucide-react";
+import { getTranslations } from "next-intl/server";
 
 export const dynamic = "force-dynamic";
 
@@ -10,6 +11,7 @@ function fromUnix(ts: number): string {
 }
 
 export default async function AdminBans() {
+  const t = await getTranslations("pages.admin.bans");
   const now = Math.floor(Date.now() / 1000);
   let bans: Awaited<ReturnType<typeof prisma.ban.findMany>> = [];
   try {
@@ -33,58 +35,58 @@ export default async function AdminBans() {
           <Ban size={20} className="text-[var(--color-primary)]" />
         </div>
         <div>
-          <h1 className="m-0 text-xl font-extrabold text-[var(--color-text)]">Bans</h1>
-          <p className="m-0 text-xs text-[var(--color-text-muted)] mt-0.5">Active bans only (expiry in the future) · newest first.</p>
+          <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">{t("subtitle")}</p>
         </div>
       </div>
 
       <div className="grid grid-cols-[repeat(auto-fit,minmax(180px,1fr))] gap-3.5 mb-6">
         <StatusCard
-          label="Active bans"
+          label={t("activeBans")}
           value={bans.length}
           state={bans.length > 0 ? "warn" : "ok"}
           icon="🔨"
         />
         <StatusCard
-          label="Permanent"
+          label={t("permanent")}
           value={permanent}
           state={permanent > 0 ? "danger" : "neutral"}
           icon="⛔"
         />
-        <StatusCard label="Account bans" value={accountBans} icon="👤" />
+        <StatusCard label={t("accountBans")} value={accountBans} icon="👤" />
       </div>
 
       <form action={createBan} className="admin-card mb-6">
-        <h3 className="text-sm font-bold text-[var(--color-text)] m-0 mb-3">New ban</h3>
+        <h3 className="text-sm font-bold text-[var(--color-text)] m-0 mb-3">{t("newBan")}</h3>
         <div className="flex gap-2 flex-wrap">
-          <input name="userId" type="number" min={1} placeholder="User ID" required />
+          <input name="userId" type="number" min={1} placeholder={t("userIdPlaceholder")} required />
           <select name="type">
-            <option value="account">account</option>
-            <option value="ip">ip</option>
-            <option value="machine">machine</option>
-            <option value="super">super</option>
+            <option value="account">{t("typeAccount")}</option>
+            <option value="ip">{t("typeIp")}</option>
+            <option value="machine">{t("typeMachine")}</option>
+            <option value="super">{t("typeSuper")}</option>
           </select>
-          <input name="hours" type="number" min={0} placeholder="Hours (0 = perm)" />
-          <input name="reason" placeholder="Reason" className="flex-1 min-w-[160px]" />
+          <input name="hours" type="number" min={0} placeholder={t("hoursPlaceholder")} />
+          <input name="reason" placeholder={t("reasonPlaceholder")} className="flex-1 min-w-[160px]" />
           <button type="submit" className="btn btn-danger">
-            Ban
+            {t("ban")}
           </button>
         </div>
       </form>
 
       <section className="mt-6">
-        <h2 className="admin-section-title">Active bans ({bans.length})</h2>
+        <h2 className="admin-section-title">{t("activeBans")} ({bans.length})</h2>
         {bans.length === 0 ? (
-          <div className="admin-empty">No active bans.</div>
+          <div className="admin-empty">{t("noBans")}</div>
         ) : (
           <div className="overflow-x-auto">
             <table>
               <thead>
                 <tr>
-                  <th>User ID</th>
-                  <th>Type</th>
-                  <th>Reason</th>
-                  <th>Expires</th>
+                  <th>{t("colUserId")}</th>
+                  <th>{t("colType")}</th>
+                  <th>{t("colReason")}</th>
+                  <th>{t("colExpires")}</th>
                   <th />
                 </tr>
               </thead>
@@ -98,7 +100,7 @@ export default async function AdminBans() {
                     <td>{b.banReason || "—"}</td>
                     <td>
                       {b.banExpire === 0 ? (
-                        <span className="inline-block text-[0.72rem] font-bold px-2 py-0.5 rounded-full bg-red-500/22 text-[var(--color-text)]">permanent</span>
+                        <span className="inline-block text-[0.72rem] font-bold px-2 py-0.5 rounded-full bg-red-500/22 text-[var(--color-text)]">{t("permanent")}</span>
                       ) : (
                         <span className="text-sm text-gray-500 dark:text-gray-400 whitespace-nowrap">
                           {fromUnix(b.banExpire)}
@@ -109,7 +111,7 @@ export default async function AdminBans() {
                       <form action={liftBan}>
                         <input type="hidden" name="id" value={b.id} />
                         <button type="submit" className="btn btn-outline">
-                          Lift
+                          {t("lift")}
                         </button>
                       </form>
                     </td>