labels in tomatos counter added to translations

components/molecules/tomato-counter/tomato-counter.component.tsx

@@ -1,3 +1,4 @@
+import useTranslation from 'next-translate/useTranslation'
 import { FC, ReactNode } from 'react'
 import { Button, Card, Flex, Heading, Paragraph } from 'theme-ui'
 
@@ -6,56 +7,57 @@ import { Tomato } from '~/components/atoms/tomato'
 import { Interval, useIntervalsStore } from '~/stores/intervals'
 import { SegmentType } from '~/utils/config'
 
-const popupBody: Record<SegmentType, ReactNode> = {
-  WORK: 'Tomato earned by finishing a working interval!',
-  SHORT: 'Tomato earned by finishing a short break!',
-  LONG: 'Tomato earned by finishing a long break!',
+const popupBody: Record<SegmentType, string> = {
+  WORK: 'popup.work',
+  SHORT: 'popup.short',
+  LONG: 'popup.long',
 }
 
 export const TomatoCounter: FC = () => {
+  const { t } = useTranslation('timer')
   const { intervals, resetIntervals } = useIntervalsStore()
 
   if (intervals.length === 0) {
     return null
   }
 
   function resetIntervalsRequested () {
-    if (window.confirm('Do you want to reset your tomato counter? This action cannot be undone.')) {
+    if (window.confirm(t('restartWarning'))) {
       resetIntervals()
     }
   }
 
+  function createTomatoForInterval (interval: Interval, index: number) {
+    return (
+      <Popup
+        key={ `${ interval.type }-${ index }` }
+        content={ (
+          <Card variant="popup">
+            <Paragraph variant="text.popup">{ t(popupBody[interval.type]) }</Paragraph>
+          </Card>
+        ) }
+      >
+        <Tomato
+          height={ 28 }
+          type={ interval.type }
+        />
+      </Popup>
+    )
+  }
+
   return (
     <Flex sx={ { gap: '1em', justifyContent: 'center', alignItems: 'center', flexDirection: 'column' } }>
       <Heading as="h4" variant="text.paragraph">
-        Your day:
+        { t('yourDay') }
       </Heading>
 
       <Flex sx={ { gap: '0.25em' } }>
         { intervals.map(createTomatoForInterval) }
       </Flex>
 
       <Button onClick={ resetIntervalsRequested }>
-        Restart
+        { t('restart') }
       </Button>
     </Flex>
   )
 }
-
-function createTomatoForInterval (interval: Interval, index: number) {
-  return (
-    <Popup
-      key={ `${ interval.type }-${ index }` }
-      content={ (
-        <Card variant="popup">
-          <Paragraph variant="text.popup">{ popupBody[interval.type] }</Paragraph>
-        </Card>
-      ) }
-    >
-      <Tomato
-        height={ 28 }
-        type={ interval.type }
-      />
-    </Popup>
-  )
-}

i18n.json

@@ -2,7 +2,7 @@
   "locales": ["en", "es"],
   "defaultLocale": "en",
   "pages": {
-    "*": ["common"],
+    "*": ["common", "timer"],
     "/news": ["pages"],
     "/": ["home", "example"],
     "/about": ["about"]

locales/en/timer.json

@@ -0,0 +1,10 @@
+{
+  "yourDay": "Your day in tomatos:",
+  "popup": {
+    "work": "Tomato earned by finishing a working interval!",
+    "short": "Tomato earned by finishing a short break!",
+    "long": "Tomato earned by finishing a long break!"
+  },
+  "restart": "Restart",
+  "restartWarning": "Do you want to reset your tomato counter? This action cannot be undone."
+}

locales/es/timer.json

@@ -0,0 +1,10 @@
+{
+  "yourDay": "Tu día en tomates:",
+  "popup": {
+    "work": "¡Tomate ganado por terminar un intervalo de trabajo!",
+    "short": "¡Tomate ganado por tomar un breve descanso!",
+    "long": "¡Tomate ganado por tomar un descanso largo!"
+  },
+  "restart": "Reiniciar",
+  "restartWarning": "¿Quieres reiniciar tu contador de tomates del día? Ésta acción no se puede deshacer."
+}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "tomatoro",
-  "version": "3.0.192",
+  "version": "3.0.193",
   "private": true,
   "scripts": {
     "dev": "next dev",