add translation to synthetic data screen

Author: rubenlangius

src/routes/SyntheticData.tsx

@@ -10,6 +10,8 @@ import { useReactToPrint } from 'react-to-print';
 import Measuring from '@/components/icons/measuring.svg?react';
 import SyntheticDataSettings from '@/components/SyntheticDataSettings';
 import { SyntheticDataInfo } from '@/components/synthetic-data-interfaces/cluster-export';
+import LanguageSwitcher from '@/components/ui/languageSwitcher';
+import { useTranslation } from 'react-i18next';
 
 const PAGE_STYLE = `
     @page {
@@ -50,7 +52,7 @@ export default function SyntheticDataGeneration() {
         contentRef: contentRef,
         pageStyle: PAGE_STYLE,
     });
-
+    const { t } = useTranslation();
     const {
         loading,
         initialised,
@@ -104,6 +106,7 @@ export default function SyntheticDataGeneration() {
 
     return (
         <main ref={contentRef} className="gap-4 p-4 flex flex-col">
+            <LanguageSwitcher />
             <div className="relative flex-1 flex-col items-start">
                 <SyntheticDataSettings
                     onRun={onRun}
@@ -129,7 +132,7 @@ export default function SyntheticDataGeneration() {
                             onClick={() => reactToPrintFn()}
                         >
                             <Share className="size-3.5 mr-2" />
-                            Share
+                            {t('shareButton')}
                         </Button>
                     </div>
                 )}
@@ -140,7 +143,7 @@ export default function SyntheticDataGeneration() {
                     <>
                         <Measuring className="max-w-96 m-auto 2xl:max-w-full" />
                         <h1 className="text-md text-center text-aaDark">
-                            Let's get started! Fill out the form.
+                            {t('getStarted')}
                         </h1>
                         <div className="flex-1" />
                     </>