move translation to a single file

README.md

@@ -13,4 +13,9 @@ Open [http://localhost:3000](http://localhost:3000) with your browser to see the
 #### Linting
 ```bash
 npm run lint
+```
+
+### Translation
+```
+npm run build-intl
 ```

components/Footer.tsx

@@ -1,36 +1,13 @@
 import { useEffect, useState } from 'react'
-import type { Translation } from '@helpwave/hightide'
-import { HelpwaveLogo, LanguageDialog, TextButton, ThemeDialog, useTranslation } from '@helpwave/hightide'
+import { HelpwaveLogo, LanguageDialog, TextButton, ThemeDialog } from '@helpwave/hightide'
 import * as CookieConsent from 'vanilla-cookieconsent'
 import pluginConfig from '../utils/CookieConsentConfig'
 import FooterLinkGroup from './FooterLinkGroup'
 import 'vanilla-cookieconsent/dist/cookieconsent.css'
 import { Globe, SunIcon } from 'lucide-react'
+import { useLandingPageTranslation } from '@/i18n/useLandingPageTranslation'
 
 type Categories = 'socials' | 'general' | 'products' | 'development'
-type FooterTranslation = { [key in Categories]: string } & {
-  changeTheme: string,
-  changeLanguage: string,
-}
-
-const defaultFooterTranslation: Translation<FooterTranslation> = {
-  en: {
-    socials: 'socials',
-    general: 'general',
-    products: 'products',
-    development: 'development',
-    changeLanguage: 'Change Language',
-    changeTheme: 'Change Theme',
-  },
-  de: {
-    socials: 'social',
-    general: 'allgemein',
-    products: 'produkte',
-    development: 'entwicklung',
-    changeLanguage: 'Sprache ändern',
-    changeTheme: 'Farbschema ändern',
-  }
-}
 
 type LinkType = { name: string, link: string, openInCurrentTab?: boolean, onClick?: () => void }
 const linkGroups: Record<Categories, LinkType[]> = {
@@ -93,7 +70,7 @@ const grouping: (Categories[])[] = [
 
 const Footer = () => {
   const year = new Date().getFullYear()
-  const translation = useTranslation([defaultFooterTranslation], {})
+  const translation = useLandingPageTranslation()
   const [isThemeDialogOpen, setIsThemeDialogOpen] = useState<boolean>(false)
   const [isLanguageDialogOpen, setIsLanguageDialogOpen] = useState<boolean>(false)
 

components/Header.tsx

@@ -1,42 +1,11 @@
 import Link from 'next/link'
-import type { Translation } from '@helpwave/hightide'
-import { HelpwaveLogo, MarkdownInterpreter, Navigation, useTranslation } from '@helpwave/hightide'
+import { HelpwaveLogo, MarkdownInterpreter, Navigation } from '@helpwave/hightide'
+import { useLandingPageTranslation } from '@/i18n/useLandingPageTranslation'
 
 const homeURL = '/'
 
-type LinkNames = 'products' | 'mediquu' | 'support' | 'team' | 'invest' | 'tasks' | 'appzumdoc' | 'netzmanager'
-
-type HeaderTranslationType = {
-    contact: string,
-} & { [key in LinkNames]: string }
-
-const defaultHeaderTranslation: Translation<HeaderTranslationType> = {
-    en: {
-        products: 'Products',
-        mediquu: 'mediQuu',
-        team: 'Team',
-        contact: 'Contact us',
-        tasks: 'tasks',
-        support: 'Support',
-        invest: 'Invest',
-        appzumdoc: 'App Zum Doc',
-        netzmanager: 'mediQuu Netzmanager',
-    },
-    de: {
-        products: 'Produkte',
-        mediquu: 'mediQuu',
-        team: 'Team',
-        contact: 'Kontakt',
-        tasks: 'tasks',
-        support: 'Hilfe',
-        invest: 'Investieren',
-        appzumdoc: 'App Zum Doc',
-        netzmanager: 'mediQuu Netzmanager',
-    }
-}
-
 const Header = () => {
-  const translation = useTranslation([defaultHeaderTranslation])
+  const translation = useLandingPageTranslation()
 
   return (
     <div className="absolute top-0 z-[50] row items-center justify-between w-screen section-padding-x h-16 pt-2">

components/NewsLetterForm.tsx

@@ -1,62 +1,10 @@
-import type { PropsForTranslation, Translation } from '@helpwave/hightide'
-import { Input, LoadingButton, Select, SelectOption, useTranslation } from '@helpwave/hightide'
+import { Input, LoadingButton, Select, SelectOption } from '@helpwave/hightide'
 import { useState } from 'react'
+import { useLandingPageTranslation } from '@/i18n/useLandingPageTranslation'
 
 const industryList = ['investment', 'hospital', 'patientCare', 'research', 'development', 'press'] as const
 export type Industry = typeof industryList[number]
 
-type NewsLetterFormTranslation = {
-  title: string,
-  subtitle: string,
-  firstname: string,
-  lastname: string,
-  email: string,
-  company: string,
-  industry: string,
-  callToAction: string,
-  select: string,
-  thankYou: string,
-} & Record<Industry, string>
-
-const defaultNewsLetterFormTranslation: Translation<NewsLetterFormTranslation> = {
-  en: {
-    title: 'Stay Connected',
-    subtitle: 'Become part of our vision and never miss updates or releases',
-    firstname: 'Firstname',
-    lastname: 'Lastname',
-    email: 'Email',
-    company: 'Company',
-    industry: 'Industry',
-    callToAction: 'Stay In the Loop',
-    investment: 'Investment',
-    hospital: 'Hospital',
-    patientCare: 'Patient Care',
-    research: 'Research',
-    development: 'Development',
-    press: 'Press',
-    select: 'Select',
-    thankYou: 'Thank you. We will keep you up to date!'
-  },
-  de: {
-    title: 'Bleib Informiert',
-    subtitle: 'Werde Teil unserer Vision and verpasse keine Updates oder Veröffentlichungen',
-    firstname: 'Vorname',
-    lastname: 'Nachname',
-    email: 'Email',
-    company: 'Firma',
-    industry: 'Industry',
-    callToAction: 'Bleib informiert',
-    investment: 'Investment',
-    hospital: 'Krankenhaus',
-    patientCare: 'Patientenversorgung',
-    research: 'Wissenschaft',
-    development: 'Entwicklung',
-    press: 'Presse',
-    select: 'Auswählen',
-    thankYou: 'Danke. Wir werden dich auf dem Laufenden halten!'
-  }
-}
-
 export type NewsLetterFormType = {
   firstname: string,
   lastname: string,
@@ -70,15 +18,14 @@ export type NewsLetterFormProps = Partial<NewsLetterFormType> & {
 }
 
 export const NewsLetterForm = ({
-                                 overwriteTranslation,
                                  firstname = '',
                                  lastname = '',
                                  email = '',
                                  company = '',
                                  industry,
                                  onSubmit = () => Promise.resolve(),
-                               }: PropsForTranslation<NewsLetterFormTranslation, NewsLetterFormProps>) => {
-  const translation = useTranslation([defaultNewsLetterFormTranslation], overwriteTranslation)
+                               }: NewsLetterFormProps) => {
+  const translation = useLandingPageTranslation()
   const [isLoading, setLoading] = useState(false)
   const [showThankYouMessage, setShowThankYouMessage] = useState(false)
   const [formState, setFormState] = useState<NewsLetterFormType>({
@@ -92,8 +39,8 @@ export const NewsLetterForm = ({
   return (
     <div className="rounded-lg py-2 px-4 w-full bg-[#FFFFFFEE] border-2">
       <div className="col">
-        <span className="typography-title-md">{translation('title')}</span>
-        <span className="text-description">{translation('subtitle')}</span>
+        <span className="typography-title-md">{translation('titleNewsLetterForm')}</span>
+        <span className="text-description">{translation('subtitleNewsLetterForm')}</span>
         <div className="col my-2 gap-y-1">
           <form>
             <Input

components/TasksAppStoreBadge.tsx

@@ -1,4 +1,4 @@
-import { useLanguage } from '@helpwave/hightide'
+import { useLocale } from '@helpwave/hightide'
 import Image from 'next/image'
 import Link from 'next/link'
 
@@ -11,21 +11,21 @@ import Link from 'next/link'
  * Min height of 40px must be kepts
  */
 export const TasksAppStoreBadge = () => {
-  const { language } = useLanguage()
+  const { locale } = useLocale()
   const linkURL = {
-    de: 'https://apps.apple.com/de/app/helpwave-tasks/id6472594365?itsct=apps_box_badge&itscg=30200',
-    en: 'https://apps.apple.com/en/app/helpwave-tasks/id6472594365?itsct=apps_box_badge&itscg=30200'
-  }[language]
+    'de-DE': 'https://apps.apple.com/de/app/helpwave-tasks/id6472594365?itsct=apps_box_badge&itscg=30200',
+    'en-US': 'https://apps.apple.com/en/app/helpwave-tasks/id6472594365?itsct=apps_box_badge&itscg=30200'
+  }[locale]
 
   const alt = {
-    de: 'Jetzt bei Google Play',
-    en: 'Download on the App Store'
-  }[language]
+    'de-DE': 'Jetzt bei Google Play',
+    'en-US': 'Download on the App Store'
+  }[locale]
 
   const imageURL = {
-    de: 'https://tools.applemediaservices.com/api/badges/download-on-the-app-store/black/de-de?size=250x83&releaseDate=1702857600',
-    en: 'https://tools.applemediaservices.com/api/badges/download-on-the-app-store/black/en-us?size=250x83&releaseDate=1702857600'
-  }[language]
+    'de-DE': 'https://tools.applemediaservices.com/api/badges/download-on-the-app-store/black/de-de?size=250x83&releaseDate=1702857600',
+    'en-US': 'https://tools.applemediaservices.com/api/badges/download-on-the-app-store/black/en-us?size=250x83&releaseDate=1702857600'
+  }[locale]
 
   return (
     <Link href={linkURL} target="_blank" className="rounded-md">

components/TasksPlaystoreBadge.tsx

@@ -1,4 +1,4 @@
-import { useLanguage } from '@helpwave/hightide'
+import { useLocale } from '@helpwave/hightide'
 import Image from 'next/image'
 import Link from 'next/link'
 
@@ -9,21 +9,21 @@ import Link from 'next/link'
  *
  */
 export const TasksPlaystoreBadge = () => {
-  const { language } = useLanguage()
+  const { locale } = useLocale()
   const linkURL = {
-    de: 'https://play.google.com/store/apps/details?id=de.helpwave.tasks&pcampaignid=pcampaignidMKT-Other-global-all-co-prtnr-py-PartBadge-Mar2515-1',
-    en: 'https://play.google.com/store/apps/details?id=de.helpwave.tasks&pcampaignid=pcampaignidMKT-Other-global-all-co-prtnr-py-PartBadge-Mar2515-1'
-  }[language]
+    'de-DE': 'https://play.google.com/store/apps/details?id=de.helpwave.tasks&pcampaignid=pcampaignidMKT-Other-global-all-co-prtnr-py-PartBadge-Mar2515-1',
+    'en-US': 'https://play.google.com/store/apps/details?id=de.helpwave.tasks&pcampaignid=pcampaignidMKT-Other-global-all-co-prtnr-py-PartBadge-Mar2515-1'
+  }[locale]
 
   const alt = {
-    de: 'Jetzt bei Google Play',
-    en: 'Get it on Google Play'
-  }[language]
+    'de-DE': 'Jetzt bei Google Play',
+    'en-US':  'Get it on Google Play'
+  }[locale]
 
   const imageURL = {
-    de: '/images/google_play_badge_german.png',
-    en: '/images/google_play_badge_english.png'
-  }[language]
+    'de-DE': '/images/google_play_badge_german.png',
+    'en-US':  '/images/google_play_badge_english.png'
+  }[locale]
   return (
     <Link href={linkURL} target="_blan" className="rounded-md">
       <Image alt={alt} src={imageURL} height={0} width={0} className="w-full min-h-[54px] max-h-[54px] min-w-[182px] max-w-[182px]"/>

components/TextImage.tsx

@@ -1,11 +1,9 @@
-import type { FormTranslationType, PropsForTranslation } from '@helpwave/hightide'
-import { formTranslation, SolidButton, useTranslation } from '@helpwave/hightide'
+import { SolidButton } from '@helpwave/hightide'
 import { clsx } from 'clsx'
+import { useLandingPageTranslation } from '@/i18n/useLandingPageTranslation'
 
 type TextImageColor = 'primary' | 'secondary' | 'dark'
 
-type TextImageTranslation = FormTranslationType
-
 export type TextImageProps = {
   title: string,
   description: string,
@@ -22,7 +20,6 @@ export type TextImageProps = {
  * A Component for layering a Text upon an image
  */
 export const TextImage = ({
-                            overwriteTranslation,
                             title,
                             description,
                             imageUrl,
@@ -32,8 +29,8 @@ export const TextImage = ({
                             contentClassName = '',
                             className = '',
                             disableMoreClick = true,
-                          }: PropsForTranslation<TextImageTranslation, TextImageProps>) => {
-  const translation = useTranslation([formTranslation], overwriteTranslation)
+                          }: TextImageProps) => {
+  const translation = useLandingPageTranslation()
 
   const chipColorMapping: Record<TextImageColor, string> = {
     primary: 'text-text-image-primary-background bg-text-image-primary-text',

components/sections/landing/MarketStatsSection.tsx

@@ -1,6 +1,4 @@
-import type { PropsForTranslation } from '@helpwave/hightide'
-import { useTranslation } from '@helpwave/hightide'
-import type { Translation } from '@helpwave/hightide'
+import { useLandingPageTranslation } from '@/i18n/useLandingPageTranslation'
 import type { PropsWithChildren } from 'react'
 import Image from 'next/image'
 import { SectionBase } from '@/components/sections/SectionBase'
@@ -12,57 +10,32 @@ type MarketStatsItemProps = PropsWithChildren<{
 
 const MarketStatsItem = ({ children, stat, title }: MarketStatsItemProps) => {
   return (
-    <div className="col items-center">
+    <div className="col items-center min-w-56">
       {children}
       <span className="text-3xl max-tablet:text-xl mt-2 max-tablet:font-semibold">{stat}</span>
-      <h4><span className="text-description text-xl max-tablet:!text-base">{title}</span></h4>
+      <h4><span className="text-on-secondary/60 text-xl max-tablet:!text-base">{title}</span></h4>
     </div>
   )
 }
 
-type MarketStatsSectionTranslation = {
-  germanyHealthcareSystem: string,
-  marketPotential: string,
-  hospitals: string,
-  healthcareWorkers: string,
-  gdp: string,
-}
-
-const defaultExpansionTranslation: Translation<MarketStatsSectionTranslation> = {
-  en: {
-    germanyHealthcareSystem: 'Germany\'s Healthcare System',
-    marketPotential: 'Market Potential',
-    hospitals: 'hospitals',
-    healthcareWorkers: 'healthcare workers',
-    gdp: 'of GDP'
-  },
-  de: {
-    germanyHealthcareSystem: 'Deutsches Gesundheitssystem',
-    marketPotential: 'Markt Potential',
-    hospitals: 'Krankenhäuser',
-    healthcareWorkers: 'Gesundheitspersonal',
-    gdp: 'des BIP'
-  }
-}
-
-const MarketStatsSection = ({ overwriteTranslation }: PropsForTranslation<MarketStatsSectionTranslation>) => {
-  const translation = useTranslation([defaultExpansionTranslation], overwriteTranslation)
+const MarketStatsSection = () => {
+  const translation = useLandingPageTranslation()
   return (
-    <SectionBase backgroundColor="secondary" className="col text-white pb-24 font-space">
-      <h1 className="w-full text-3xl text-center font-space">{translation('germanyHealthcareSystem')}</h1>
-      <span className="text-center text-description">{translation('marketPotential')}</span>
-      <div className="mt-8 w-full flex flex-wrap gap-y-16 gap-x-32 justify-evenly items-center">
-        <MarketStatsItem stat="1.800" title={translation('hospitals')}>
+    <SectionBase backgroundColor="secondary" className="flex-col-2 text-on-secondary font-space" outerClassName="pb-24">
+      <h1 className="w-full text-3xl text-center font-space">{translation('section.market.germanyHealthcareSystem')}</h1>
+      <span className="text-center text-on-secondary/60">{translation('section.market.marketPotential')}</span>
+      <div className="mt-8 w-full flex flex-wrap gap-y-16 gap-x-24 justify-evenly items-center">
+        <MarketStatsItem stat="1.800" title={translation('section.market.hospitals')}>
           {/* Image needs attribution to https://www.flaticon.com/free-icon/hospital_3809392?term=hospital&page=1&position=8&origin=search&related_id=3809392 */}
           <Image width={72} height={72} alt="" src="https://cdn.helpwave.de/icons/hospital.png" className="w-[72px] h-[72px] max-tablet:w-[48px] max-tablet:h-[48px] p-[5%]"/>
         </MarketStatsItem>
 
-        <MarketStatsItem stat="1.000.000" title={translation('healthcareWorkers')}>
+        <MarketStatsItem stat="1.000.000" title={translation('section.market.healthcareWorkers')}>
           {/* Image needs attribution to https://www.flaticon.com/free-icon/hospital_3809392?term=hospital&page=1&position=8&origin=search&related_id=3809392 */}
           <Image width={72} height={72} alt="" src="https://cdn.helpwave.de/icons/doctors.png" className="w-[72px] h-[72px] max-tablet:w-[48px] max-tablet:h-[48px]"/>
         </MarketStatsItem>
 
-        <MarketStatsItem stat="12,1%" title={translation('gdp')}>
+        <MarketStatsItem stat="12,1%" title={translation('section.market.gdp')}>
           {/* Image needs attribution to https://www.freepik.com/icon/donut-chart_483638 */}
           <Image width={72} height={72} alt="" src="https://cdn.helpwave.de/icons/pie_chart.png" className="w-[72px] h-[72px] max-tablet:w-[48px] max-tablet:h-[48px]"/>
         </MarketStatsItem>