i18n

src/components/infos/Infos.tsx

@@ -3,6 +3,11 @@ import { Feature } from 'ol';
 import { Geometry } from 'ol/geom';
 import { Component, createSignal, For } from 'solid-js';
 import { unwrap } from 'solid-js/store';
+import {
+  I18nContext,
+  createI18nContext,
+  useI18n,
+} from '@solid-primitives/i18n';
 import CloseIcon from '@suid/icons-material/Close';
 import { tree } from '../map';
 import style from './Infos.module.css';
@@ -49,6 +54,7 @@ export const clickHandler = (event: any) => {
 };
 
 const Infos: Component<{}> = (props) => {
+  const [t, { add, locale, dict }] = useI18n();
   const handleClickOpen = () => {
     setOpen(true);
   };
@@ -59,7 +65,7 @@ const Infos: Component<{}> = (props) => {
   return (
     <Dialog onClose={handleClose} open={open()} class={style.dialog}>
       <DialogTitle class={style.title}>
-        <div class={style['title-text']}>Nearby</div>
+        <div class={style['title-text']}>{t('nearby')}</div>
         <IconButton onClick={handleClose} class={style.close}>
           <CloseIcon />
         </IconButton>

src/components/map-tile-provider/MapTileProvider.tsx

@@ -1,6 +1,11 @@
 import OSM from 'ol/source/OSM';
 import XYZ from 'ol/source/XYZ';
 import { Component, createSignal, For } from 'solid-js';
+import {
+  I18nContext,
+  createI18nContext,
+  useI18n,
+} from '@solid-primitives/i18n';
 
 import style from './MapTileProvider.module.css';
 import LayersIcon from '@suid/icons-material/Layers';
@@ -84,6 +89,8 @@ const MapTilesProvider: Component<{}> = (props) => {
 
   const params = useParams();
 
+  const [t] = useI18n();
+
   const handleChange = (ev: any) => {
     navigate(
       `/map/${ev.target.value}/${params.lon}/${params.lat}/${params.zoom}/${params.rotation}`
@@ -100,7 +107,7 @@ const MapTilesProvider: Component<{}> = (props) => {
       </div>
       <Dialog onClose={handleClose} open={open()} class={style.dialog}>
         <DialogTitle class={style.title}>
-          <div class={style['title-text']}>Choose your map</div>
+          <div class={style['title-text']}>{t('chooseYourMap')}</div>
           <IconButton onClick={handleClose} class={style.close}>
             <CloseIcon />
           </IconButton>