feat: use @helpwave/common in landing-page/

.gitignore

@@ -1,6 +1,6 @@
 # dependencies
-/node_modules
-/.pnp
+node_modules
+.pnp
 .pnp.js
 
 # debug

landing-page/components/LanguageSwitcher.tsx

@@ -0,0 +1,34 @@
+import { tw } from '@twind/core'
+import { useTranslation } from '@helpwave/common/hooks/useTranslation'
+import { useLanguage } from '@helpwave/common/hooks/useLanguage'
+import type { Languages } from '@helpwave/common/hooks/useLanguage'
+
+type LanguageSwitcherTranslation = {
+  toggleLanguage: string
+}
+
+const defaultLanguageSwitcherTranslations: Record<Languages, LanguageSwitcherTranslation> = {
+  en: {
+    toggleLanguage: 'Toggle language',
+  },
+  de: {
+    toggleLanguage: 'Sprache wechseln',
+  }
+}
+
+// TODO: Basic and naive implementation of a LanguageSwitcher
+const LanguageSwitcher = () => {
+  const { language, setLanguage } = useLanguage()
+  const translation = useTranslation(language, defaultLanguageSwitcherTranslations)
+
+  const onClick = () => {
+    if (language === 'de') setLanguage('en')
+    if (language === 'en') setLanguage('de')
+  }
+
+  return (
+    <button className={tw('border-2 m-2 p-1 border-gray-800 text-white w-44')} onClick={onClick}>{translation.toggleLanguage}</button>
+  )
+}
+
+export default LanguageSwitcher

landing-page/components/sections/ContactSection.tsx

@@ -8,9 +8,9 @@ import { Toast } from '../Toast'
 import Send from '../../icons/Send'
 import AlertCircle from '../../icons/AlertCircle'
 import { hubspotSubmitForm } from '../../utils/hubspot'
-import { useTranslation } from '../../hooks/useTranslation'
-import type { PropsWithLanguage } from '../../hooks/useTranslation'
-import type { Languages } from '../../hooks/useLanguage'
+import { useTranslation } from '@helpwave/common/hooks/useTranslation'
+import type { PropsWithLanguage } from '@helpwave/common/hooks/useTranslation'
+import type { Languages } from '@helpwave/common/hooks/useLanguage'
 
 type ContactSectionLanguage = {
   heading: string,

landing-page/components/sections/FeaturesSection.tsx

@@ -2,9 +2,9 @@ import { forwardRef } from 'react'
 import { Section } from '../Section'
 import { tw, tx } from '@twind/core'
 import { Checkbox } from '../Checkbox'
-import { useTranslation } from '../../hooks/useTranslation'
-import type { PropsWithLanguage } from '../../hooks/useTranslation'
-import type { Languages } from '../../hooks/useLanguage'
+import { useTranslation } from '@helpwave/common/hooks/useTranslation'
+import type { PropsWithLanguage } from '@helpwave/common/hooks/useTranslation'
+import type { Languages } from '@helpwave/common/hooks/useLanguage'
 
 export type FeaturesSectionLanguage = {
   heading: string,

landing-page/components/sections/PartnerSection.tsx

@@ -4,9 +4,9 @@ import { TitleSection } from '../Section'
 import StadtWarendorf from '../../icons/partners/StadtWarendorf'
 import Ukm from '../../icons/partners/ukm'
 import MSHack from '../../icons/partners/MSHack'
-import { useTranslation } from '../../hooks/useTranslation'
-import type { PropsWithLanguage } from '../../hooks/useTranslation'
-import type { Languages } from '../../hooks/useLanguage'
+import { useTranslation } from '@helpwave/common/hooks/useTranslation'
+import type { PropsWithLanguage } from '@helpwave/common/hooks/useTranslation'
+import type { Languages } from '@helpwave/common/hooks/useLanguage'
 
 const partners = [
   { name: 'Muensterhack', Icon: MSHack, url: 'https://www.muensterhack.de/' },

landing-page/components/sections/RoadmapSection.tsx

@@ -1,9 +1,9 @@
 import { forwardRef } from 'react'
 import { tw } from '@twind/core'
 import { TitleSection } from '../Section'
-import { useTranslation } from '../../hooks/useTranslation'
-import type { PropsWithLanguage } from '../../hooks/useTranslation'
-import type { Languages } from '../../hooks/useLanguage'
+import { useTranslation } from '@helpwave/common/hooks/useTranslation'
+import type { PropsWithLanguage } from '@helpwave/common/hooks/useTranslation'
+import type { Languages } from '@helpwave/common/hooks/useLanguage'
 
 export type RoadmapSectionLanguage = {
   heading: string

landing-page/components/sections/StartSection.tsx

@@ -4,9 +4,9 @@ import { tw } from '@twind/core'
 import Header from '../Header'
 import Helpwave from '../../icons/HelpwaveRect'
 import { Checkbox } from '../Checkbox'
-import type { Languages } from '../../hooks/useLanguage'
-import { useTranslation } from '../../hooks/useTranslation'
-import type { PropsWithLanguage } from '../../hooks/useTranslation'
+import { useTranslation } from '@helpwave/common/hooks/useTranslation'
+import type { PropsWithLanguage } from '@helpwave/common/hooks/useTranslation'
+import type { Languages } from '@helpwave/common/hooks/useLanguage'
 
 export type StartSectionLanguage = {
   HeroMessageComponent: ReactFC,

landing-page/components/sections/TeamSection.tsx

@@ -2,9 +2,9 @@ import { forwardRef } from 'react'
 import { tw } from '@twind/core'
 import GridBox from '../GridBox'
 import { Section } from '../Section'
-import { useTranslation } from '../../hooks/useTranslation'
-import type { PropsWithLanguage } from '../../hooks/useTranslation'
-import type { Languages } from '../../hooks/useLanguage'
+import { useTranslation } from '@helpwave/common/hooks/useTranslation'
+import type { PropsWithLanguage } from '@helpwave/common/hooks/useTranslation'
+import type { Languages } from '@helpwave/common/hooks/useLanguage'
 
 const roles = { /* eslint-disable key-spacing, no-multi-spaces */
   FRONTEND_DEVELOPER: { id: 'FRONTEND_DEVELOPER', name: 'Frontend Developer', color: 'hw-primary-300' },

landing-page/package.json

@@ -9,6 +9,7 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@helpwave/common": "workspace:*",
     "@next/font": "^13.0.6",
     "@radix-ui/react-checkbox": "^1.0.1",
     "@twind/core": "^1.1.2",

landing-page/pages/_app.tsx

@@ -5,7 +5,7 @@ import { Inter, Space_Grotesk as SpaceGrotesk } from '@next/font/google'
 import { tw } from '@twind/core'
 import withNextApp from '../twind/next/app'
 import { config } from '../twind.config'
-import { ProvideLanguage } from '../hooks/useLanguage'
+import { ProvideLanguage } from '@helpwave/common/hooks/useLanguage'
 
 const inter = Inter({
   subsets: ['latin'],