Translate admin panel to all 6 languages

src/app/admin/badges/page.tsx

@@ -1,3 +1,4 @@
+import { getTranslations } from "next-intl/server";
 import { giveBadge } from "@/actions/admin-badges";
 import { uploadBadge } from "@/actions/admin-badge-upload";
 import { prisma } from "@/lib/prisma";
@@ -12,6 +13,7 @@ export default async function AdminBadges({
 }: {
   searchParams: Promise<{ uploaded?: string; error?: string }>;
 }) {
+  const t = await getTranslations("pages.admin.badges");
   const { uploaded, error } = await searchParams;
 
   let badges: Awaited<ReturnType<typeof prisma.websiteBadges.findMany>> = [];
@@ -31,53 +33,53 @@ export default async function AdminBadges({
           <Award size={20} className="text-[var(--color-primary)]" />
         </div>
         <div>
-          <h1 className="m-0 text-xl font-extrabold text-[var(--color-text)]">Badges</h1>
-          <p className="m-0 text-xs text-[var(--color-text-muted)] mt-0.5">Website badge catalogue.</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>
 
       {uploaded && (
         <div className="mb-4 p-3 rounded-lg bg-green-600/10 text-green-600 dark:text-green-400 text-xs">
-          Uploaded Badge image <code>{uploaded}.gif</code> saved.
+          {t("uploadedMessage", { code: uploaded })}
         </div>
       )}
       {error && (
         <div className="mb-4 p-3 rounded-lg bg-red-600/10 text-red-600 dark:text-red-400 text-xs">
-          Error: {error}
+          {t("errorMessage", { error })}
         </div>
       )}
 
       <section className="mt-6">
-        <h2 className="admin-section-title">Upload badge image</h2>
+        <h2 className="admin-section-title">{t("uploadTitle")}</h2>
         <p className="text-xs text-[var(--color-text-muted)] -mt-2 mb-3">
-          Saves a <code>.gif</code> badge image to the emulator badge directory.
+          {t("uploadSubtitle")}
         </p>
         <form action={uploadBadge} className="admin-card">
           <div className="flex gap-2 flex-wrap items-center">
             <input type="file" name="file" accept=".gif,.png" required />
             <input
               name="code"
-              placeholder="Badge code (e.g. ADM)"
+              placeholder={t("badgeCodePlaceholder")}
               required
               maxLength={64}
               pattern="[A-Za-z0-9_-]{1,64}"
               className="flex-1 min-w-[160px]"
             />
             <button type="submit" className="btn btn-primary">
-              Upload
+              {t("uploadButton")}
             </button>
           </div>
         </form>
       </section>
 
       <section className="mt-6">
-        <h2 className="admin-section-title">Give badge to user</h2>
+        <h2 className="admin-section-title">{t("giveTitle")}</h2>
         <form action={giveBadge} className="admin-card">
           <div className="flex gap-2 flex-wrap items-center">
-            <input name="userId" type="number" min={1} placeholder="User ID" required />
+            <input name="userId" type="number" min={1} placeholder={t("userIdPlaceholder")} required />
             <input
               name="code"
-              placeholder="Badge code (e.g. ADM)"
+              placeholder={t("badgeCodePlaceholder")}
               required
               maxLength={32}
               className="flex-1 min-w-[160px]"
@@ -91,24 +93,24 @@ export default async function AdminBadges({
               ))}
             </datalist>
             <button type="submit" className="btn btn-primary">
-              Give badge
+              {t("giveButton")}
             </button>
           </div>
         </form>
       </section>
 
       <section className="mt-6">
-        <h2 className="admin-section-title">Catalogue ({badges.length})</h2>
+        <h2 className="admin-section-title">{t("catalogueTitle")} ({badges.length})</h2>
         {badges.length === 0 ? (
-          <div className="admin-empty">No badges in the catalogue.</div>
+          <div className="admin-empty">{t("noBadges")}</div>
         ) : (
           <div className="overflow-x-auto">
             <table>
               <thead>
                 <tr>
-                  <th>Code</th>
-                  <th>Name</th>
-                  <th>Description</th>
+                  <th>{t("colCode")}</th>
+                  <th>{t("colName")}</th>
+                  <th>{t("colDescription")}</th>
                   <th />
                 </tr>
               </thead>
@@ -130,12 +132,12 @@ export default async function AdminBadges({
                           name="userId"
                           type="number"
                           min={1}
-                          placeholder="User ID"
+                          placeholder={t("userIdPlaceholder")}
                           required
                           className="w-[90px]"
                         />
                         <button type="submit" className="btn btn-outline">
-                          Give
+                          {t("giveButton")}
                         </button>
                       </form>
                     </td>