diff options
Diffstat (limited to 'packages/demobank-ui/src/components')
-rw-r--r-- | packages/demobank-ui/src/components/menu/SideBar.tsx | 9 | ||||
-rw-r--r-- | packages/demobank-ui/src/components/picker/DurationPicker.tsx | 12 |
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} |