From 4354ee7ba1c6ac9a9567944ae6169b1664e0ea8a Mon Sep 17 00:00:00 2001
From: Mohamed Bassem <me@mbassem.com>
Date: Sun, 17 Nov 2024 00:33:28 +0000
Subject: feature: Add i18n support. Fixes #57 (#635)

* feature(web): Add basic scaffolding for i18n

* refactor: Switch most of the app's strings to use i18n strings

* fix: Remove unused i18next-resources-for-ts command

* Add user setting

* More translations

* Drop the german translation for now
---
 apps/web/components/settings/ImportExport.tsx | 20 +++++++++++++-------
 1 file changed, 13 insertions(+), 7 deletions(-)

(limited to 'apps/web/components/settings/ImportExport.tsx')

diff --git a/apps/web/components/settings/ImportExport.tsx b/apps/web/components/settings/ImportExport.tsx
index 7889b4d8..5cb35def 100644
--- a/apps/web/components/settings/ImportExport.tsx
+++ b/apps/web/components/settings/ImportExport.tsx
@@ -7,6 +7,7 @@ import { buttonVariants } from "@/components/ui/button";
 import FilePickerButton from "@/components/ui/file-picker-button";
 import { Progress } from "@/components/ui/progress";
 import { toast } from "@/components/ui/use-toast";
+import { useTranslation } from "@/lib/i18n/client";
 import {
   ParsedBookmark,
   parseHoarderBookmarkFile,
@@ -31,6 +32,7 @@ import {
 import { BookmarkTypes } from "@hoarder/shared/types/bookmarks";
 
 export function ExportButton() {
+  const { t } = useTranslation();
   return (
     <Link
       href="/api/bookmarks/export"
@@ -40,12 +42,13 @@ export function ExportButton() {
       )}
     >
       <Download />
-      <p>Export Links and Notes</p>
+      <p>{t("settings.import.export_links_and_notes")}</p>
     </Link>
   );
 }
 
 export function ImportExportRow() {
+  const { t } = useTranslation();
   const router = useRouter();
 
   const [importProgress, setImportProgress] = useState<{
@@ -145,7 +148,7 @@ export function ImportExportRow() {
     },
     onSuccess: async (resp) => {
       const importList = await createList({
-        name: `Imported Bookmarks`,
+        name: t("settings.import.imported_bookmarks"),
         icon: "⬆️",
       });
       setImportProgress({ done: 0, total: resp.length });
@@ -211,7 +214,7 @@ export function ImportExportRow() {
           }
         >
           <Upload />
-          <p>Import Bookmarks from HTML file</p>
+          <p>{t("settings.import.import_bookmarks_from_html_file")}</p>
         </FilePickerButton>
 
         <FilePickerButton
@@ -224,7 +227,7 @@ export function ImportExportRow() {
           }
         >
           <Upload />
-          <p>Import Bookmarks from Pocket export</p>
+          <p>{t("settings.import.import_bookmarks_from_pocket_export")}</p>
         </FilePickerButton>
         <FilePickerButton
           loading={false}
@@ -236,7 +239,7 @@ export function ImportExportRow() {
           }
         >
           <Upload />
-          <p>Import Bookmarks from Omnivore export</p>
+          <p>{t("settings.import.import_bookmarks_from_omnivore_export")}</p>
         </FilePickerButton>
         <FilePickerButton
           loading={false}
@@ -248,7 +251,7 @@ export function ImportExportRow() {
           }
         >
           <Upload />
-          <p>Import Bookmarks from Hoarder export</p>
+          <p>{t("settings.import.import_bookmarks_from_hoarder_export")}</p>
         </FilePickerButton>
         <ExportButton />
       </div>
@@ -269,9 +272,12 @@ export function ImportExportRow() {
 }
 
 export default function ImportExport() {
+  const { t } = useTranslation();
   return (
     <div className="flex w-full flex-col gap-2">
-      <p className="mb-4 text-lg font-medium">Import / Export Bookmarks</p>
+      <p className="mb-4 text-lg font-medium">
+        {t("settings.import.import_export_bookmarks")}
+      </p>
       <ImportExportRow />
     </div>
   );
-- 
cgit v1.2.3-70-g09d2