client side i18n fully implemented

components/Announcement.tsx

@@ -1,5 +1,6 @@
 import Link from "next/link";
 import React, { MouseEventHandler } from "react";
+import { Trans } from "next-i18next";
 
 type Props = {
   toggleAnnouncementBar: MouseEventHandler<HTMLButtonElement>;
@@ -13,15 +14,17 @@ export default function Announcement({ toggleAnnouncementBar }: Props) {
       <div className="mx-auto w-full p-2 flex justify-between gap-2 items-center border border-primary shadow-xl rounded-xl bg-base-300 backdrop-blur-sm bg-opacity-80 max-w-md">
         <i className="bi-stars text-2xl text-yellow-600 dark:text-yellow-500"></i>
         <p className="w-4/5 text-center text-sm sm:text-base">
-          See what&apos;s new in{" "}
-          <Link
-            href={`https://blog.linkwarden.app/releases/${announcementId}`}
-            target="_blank"
-            className="underline"
-          >
-            Linkwarden {announcementId}
-          </Link>
-          !
+          <Trans
+            i18nKey="new_version_announcement"
+            values={{ version: announcementId }}
+            components={[
+              <Link
+                href={`https://blog.linkwarden.app/releases/${announcementId}`}
+                target="_blank"
+                className="underline"
+              />,
+            ]}
+          />
         </p>
         <button
           onClick={toggleAnnouncementBar}