Translate admin panel to all 6 languages

src/app/admin/articles/page.tsx

@@ -1,4 +1,5 @@
 import Link from "next/link";
+import { getTranslations } from "next-intl/server";
 import { Newspaper } from "lucide-react";
 import { StatusCard } from "@/components/admin/dashboard";
 import { deleteArticle } from "@/actions/admin-articles";
@@ -12,6 +13,7 @@ export default async function AdminArticles({
   searchParams: Promise<{ error?: string }>;
 }) {
   const { error } = await searchParams;
+  const t = await getTranslations("pages.admin.articles");
   const articles = await prisma.websiteArticles
     .findMany({
       orderBy: { createdAt: "desc" },
@@ -31,11 +33,11 @@ export default async function AdminArticles({
           <Newspaper size={20} className="text-[var(--color-primary)]" />
         </div>
         <div className="flex-1">
-          <h1 className="m-0 text-xl font-extrabold text-[var(--color-text)]">Articles</h1>
-          <p className="m-0 text-xs text-[var(--color-text-muted)] mt-0.5">News articles (<code>website_articles</code>) shown on the public site. 50 most recent.</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>
         <Link href="/admin/articles/new" className="btn btn-primary">
-          + New article
+          + {t("newArticle")}
         </Link>
       </div>
 
@@ -46,22 +48,22 @@ export default async function AdminArticles({
       ) : null}
 
       <div className="grid grid-cols-[repeat(auto-fit,minmax(180px,1fr))] gap-3.5 mb-6">
-        <StatusCard label="Articles shown" value={articles.length} icon="📰" />
-        <StatusCard label="Latest" value={latest} hint="most recent post" icon="🕒" />
+        <StatusCard label={t("articlesShown")} value={articles.length} icon="📰" />
+        <StatusCard label={t("latest")} value={latest} hint={t("mostRecentPost")} icon="🕒" />
       </div>
 
       <section className="mt-6">
-        <h2 className="admin-section-title">Recent articles</h2>
+        <h2 className="admin-section-title">{t("recentArticles")}</h2>
         {articles.length === 0 ? (
-          <div className="admin-empty">No articles yet.</div>
+          <div className="admin-empty">{t("noArticles")}</div>
         ) : (
           <table>
             <thead>
               <tr>
-                <th>Title</th>
-                <th>Slug</th>
-                <th>Created</th>
-                <th>Actions</th>
+                <th>{t("colTitle")}</th>
+                <th>{t("colSlug")}</th>
+                <th>{t("colCreated")}</th>
+                <th>{t("colActions")}</th>
               </tr>
             </thead>
             <tbody>
@@ -81,7 +83,7 @@ export default async function AdminArticles({
                   <td>
                     <div className="flex gap-2">
                       <Link href={`/admin/articles/${a.id}`} className="btn btn-primary">
-                        Edit
+                        {t("edit")}
                       </Link>
                       <form action={deleteArticle} className="m-0">
                         <input type="hidden" name="id" value={String(a.id)} />
@@ -89,7 +91,7 @@ export default async function AdminArticles({
                           type="submit"
                           className="btn btn-danger"
                         >
-                          Delete
+                          {t("delete")}
                         </button>
                       </form>
                     </div>