Translate admin panel to all 6 languages

src/app/admin/writeable-boxes/page.tsx

@@ -1,3 +1,4 @@
+import { getTranslations } from "next-intl/server";
 import { Layout } from "lucide-react";
 import { createBox, deleteBox, toggleBox, updateBox } from "@/actions/admin-writeable-boxes";
 import { StatusCard } from "@/components/admin/dashboard";
@@ -8,6 +9,7 @@ export const dynamic = "force-dynamic";
 export const metadata = { title: "Writeable boxes" };
 
 export default async function AdminWriteableBoxes() {
+  const t = await getTranslations("pages.admin.writeableBoxes");
   const boxes = await prisma.websiteWriteableBoxes
     .findMany({
       orderBy: [{ position: "asc" }, { id: "asc" }],
@@ -24,37 +26,37 @@ export default async function AdminWriteableBoxes() {
           <Layout size={20} className="text-[var(--color-primary)]" />
         </div>
         <div>
-          <h1 className="m-0 text-xl font-extrabold text-[var(--color-text)]">Writeable Boxes</h1>
-          <p className="m-0 text-xs text-[var(--color-text-muted)] mt-0.5">Content panels stored in <code>website_writeable_boxes</code> and ordered by <code>position</code>. <strong>Active</strong> boxes are shown on the public home page; hidden ones are kept here as drafts.</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>
 
       <section className="mt-6">
 
         <div className="grid grid-cols-[repeat(auto-fit,minmax(180px,1fr))] gap-3.5 mb-6">
-          <StatusCard label="Total boxes" value={boxes.length} icon="🗂️" />
+          <StatusCard label={t("totalBoxes")} value={boxes.length} icon="🗂️" />
           <StatusCard
-            label="Active"
+            label={t("active")}
             value={activeCount}
             state={activeCount > 0 ? "ok" : "neutral"}
-            hint="shown on the public home page"
+            hint={t("shownOnHomePage")}
             icon="✅"
           />
         </div>
       </section>
 
       <section className="mt-6">
-        <h2 className="admin-section-title">New box</h2>
+        <h2 className="admin-section-title">{t("newBox")}</h2>
         <form action={createBox} className="grid cols-2">
           <div>
             <label htmlFor="new_title" style={{ display: "block", fontWeight: 700 }}>
-              Title
+              {t("form.name")}
             </label>
             <input id="new_title" name="title" required maxLength={255} style={{ width: "100%" }} />
           </div>
           <div>
             <label htmlFor="new_icon" style={{ display: "block", fontWeight: 700 }}>
-              Icon (emoji)
+              {t("form.iconEmoji")}
             </label>
             <input
               id="new_icon"
@@ -66,7 +68,7 @@ export default async function AdminWriteableBoxes() {
           </div>
           <div>
             <label htmlFor="new_position" style={{ display: "block", fontWeight: 700 }}>
-              Position
+              {t("position")}
             </label>
             <input
               id="new_position"
@@ -79,12 +81,12 @@ export default async function AdminWriteableBoxes() {
           </div>
           <div style={{ display: "flex", alignItems: "flex-end" }}>
             <label style={{ display: "flex", alignItems: "center", gap: "0.4rem", fontWeight: 700 }}>
-              <input type="checkbox" name="isActive" value="1" defaultChecked /> Active
+              <input type="checkbox" name="isActive" value="1" defaultChecked /> {t("active")}
             </label>
           </div>
           <div style={{ gridColumn: "1 / -1" }}>
             <label htmlFor="new_content" style={{ display: "block", fontWeight: 700 }}>
-              Content (HTML)
+              {t("form.content")}
             </label>
             <textarea
               id="new_content"
@@ -95,16 +97,16 @@ export default async function AdminWriteableBoxes() {
           </div>
           <div style={{ gridColumn: "1 / -1", display: "flex", justifyContent: "flex-end" }}>
             <button type="submit" className="btn btn-primary">
-              + Create box
+              {t("form.save")}
             </button>
           </div>
         </form>
       </section>
 
       <section className="mt-6">
-        <h2 className="admin-section-title">Boxes ({boxes.length})</h2>
+        <h2 className="admin-section-title">{t("boxes")} ({boxes.length})</h2>
         {boxes.length === 0 ? (
-          <div className="admin-empty">No writeable boxes yet.</div>
+          <div className="admin-empty">{t("noBoxes")}</div>
         ) : (
           <div style={{ display: "flex", flexDirection: "column", gap: "1.25rem" }}>
             {boxes.map((box) => (
@@ -121,7 +123,7 @@ export default async function AdminWriteableBoxes() {
                   {box.icon ? <span aria-hidden>{box.icon}</span> : null}
                   <strong className="flex-1">{box.title}</strong>
                   <span className={`inline-block text-[0.72rem] font-bold px-2 py-0.5 rounded-full ${box.isActive ? "bg-green-600/20 text-[var(--color-text)]" : "bg-red-500/22 text-[var(--color-text)]"}`}>
-                    {box.isActive ? "Active" : "Hidden"}
+                    {box.isActive ? t("active") : t("hidden")}
                   </span>
                 </div>
 
@@ -132,7 +134,7 @@ export default async function AdminWriteableBoxes() {
                       htmlFor={`title_${box.id}`}
                       style={{ display: "block", fontWeight: 700 }}
                     >
-                      Title
+              {t("form.name")}
                     </label>
                     <input
                       id={`title_${box.id}`}
@@ -148,7 +150,7 @@ export default async function AdminWriteableBoxes() {
                       htmlFor={`icon_${box.id}`}
                       style={{ display: "block", fontWeight: 700 }}
                     >
-                      Icon (emoji)
+              {t("form.iconEmoji")}
                     </label>
                     <input
                       id={`icon_${box.id}`}
@@ -163,7 +165,7 @@ export default async function AdminWriteableBoxes() {
                       htmlFor={`position_${box.id}`}
                       style={{ display: "block", fontWeight: 700 }}
                     >
-                      Position
+              {t("position")}
                     </label>
                     <input
                       id={`position_${box.id}`}
@@ -189,7 +191,7 @@ export default async function AdminWriteableBoxes() {
                         value="1"
                         defaultChecked={box.isActive}
                       />{" "}
-                      Active
+                      {t("active")}
                     </label>
                   </div>
                   <div style={{ gridColumn: "1 / -1" }}>
@@ -197,7 +199,7 @@ export default async function AdminWriteableBoxes() {
                       htmlFor={`content_${box.id}`}
                       style={{ display: "block", fontWeight: 700 }}
                     >
-                      Content (HTML)
+              {t("form.content")}
                     </label>
                     <textarea
                       id={`content_${box.id}`}
@@ -209,7 +211,7 @@ export default async function AdminWriteableBoxes() {
                   </div>
                   <div style={{ gridColumn: "1 / -1", display: "flex", justifyContent: "flex-end" }}>
                     <button type="submit" className="btn btn-primary">
-                      Save
+                      {t("form.save")}
                     </button>
                   </div>
                 </form>
@@ -227,13 +229,13 @@ export default async function AdminWriteableBoxes() {
                     <input type="hidden" name="id" value={String(box.id)} />
                     <input type="hidden" name="next" value={box.isActive ? "0" : "1"} />
                     <button type="submit" className="btn">
-                      {box.isActive ? "Hide" : "Activate"}
+                      {box.isActive ? t("hide") : t("activate")}
                     </button>
                   </form>
                   <form action={deleteBox}>
                     <input type="hidden" name="id" value={String(box.id)} />
                     <button type="submit" className="btn btn-danger">
-                      Delete
+                      {t("delete")}
                     </button>
                   </form>
                 </div>