using web-utils in demobank

2 files changed, 11 insertions, 10 deletions

diff --git a/packages/demobank-ui/src/components/menu/SideBar.tsx b/packages/demobank-ui/src/components/menu/SideBar.tsx
index d7833df5a..7bfba2a75 100644
--- a/packages/demobank-ui/src/components/menu/SideBar.tsx
+++ b/packages/demobank-ui/src/components/menu/SideBar.tsx
@@ -20,7 +20,7 @@
  */
 
 import { h, VNode } from "preact";
-import { Translate } from "../../i18n";
+import { useTranslationContext } from "../../context/translation.js";
 
 interface Props {
   mobile?: boolean;
@@ -31,6 +31,7 @@ export function Sidebar({ mobile }: Props): VNode {
   const config = { version: "none" };
   // FIXME: add replacement for __VERSION__ with the current version
   const process = { env: { __VERSION__: "0.0.0" } };
+  const { i18n } = useTranslationContext();
 
   return (
     <aside class="aside is-placed-left is-expanded">
@@ -49,20 +50,20 @@ export function Sidebar({ mobile }: Props): VNode {
       </div>
       <div class="menu is-menu-main">
         <p class="menu-label">
-          <Translate>Bank menu</Translate>
+          <i18n.Translate>Bank menu</i18n.Translate>
         </p>
         <ul class="menu-list">
           <li>
             <div class="ml-4">
               <span class="menu-item-label">
-                <Translate>Select option1</Translate>
+                <i18n.Translate>Select option1</i18n.Translate>
               </span>
             </div>
           </li>
           <li>
             <div class="ml-4">
               <span class="menu-item-label">
-                <Translate>Select option2</Translate>
+                <i18n.Translate>Select option2</i18n.Translate>
               </span>
             </div>
           </li>
diff --git a/packages/demobank-ui/src/components/picker/DurationPicker.tsx b/packages/demobank-ui/src/components/picker/DurationPicker.tsx
index 94f2326bc..b8a7671c3 100644
--- a/packages/demobank-ui/src/components/picker/DurationPicker.tsx
+++ b/packages/demobank-ui/src/components/picker/DurationPicker.tsx
@@ -21,7 +21,7 @@
 
 import { h, VNode } from "preact";
 import { useState } from "preact/hooks";
-import { useTranslator } from "../../i18n";
+import { useTranslationContext } from "../../context/translation.js";
 import "../../scss/DurationPicker.scss";
 
 export interface Props {
@@ -46,13 +46,13 @@ export function DurationPicker({
   const ms = ss * 60;
   const hs = ms * 60;
   const ds = hs * 24;
-  const i18n = useTranslator();
+  const { i18n } = useTranslationContext();
 
   return (
     <div class="rdp-picker">
       {days && (
         <DurationColumn
-          unit={i18n`days`}
+          unit={i18n.str`days`}
           max={99}
           value={Math.floor(value / ds)}
           onDecrease={value >= ds ? () => onChange(value - ds) : undefined}
@@ -62,7 +62,7 @@ export function DurationPicker({
       )}
       {hours && (
         <DurationColumn
-          unit={i18n`hours`}
+          unit={i18n.str`hours`}
           max={23}
           min={1}
           value={Math.floor(value / hs) % 24}
@@ -73,7 +73,7 @@ export function DurationPicker({
       )}
       {minutes && (
         <DurationColumn
-          unit={i18n`minutes`}
+          unit={i18n.str`minutes`}
           max={59}
           min={1}
           value={Math.floor(value / ms) % 60}
@@ -84,7 +84,7 @@ export function DurationPicker({
       )}
       {seconds && (
         <DurationColumn
-          unit={i18n`seconds`}
+          unit={i18n.str`seconds`}
           max={59}
           value={Math.floor(value / ss) % 60}
           onDecrease={value >= ss ? () => onChange(value - ss) : undefined}