Added i18n support (#129)

components/Navigation.tsx

@@ -5,37 +5,39 @@ import { Home, Calendar, List, Gift, Coins, Settings, Info, CheckSquare } from '
 import { useAtom } from 'jotai'
 import { browserSettingsAtom } from '@/lib/atoms'
 import { useEffect, useState } from 'react'
+import { useTranslations } from 'next-intl'
 import AboutModal from './AboutModal'
 import { HabitIcon, TaskIcon } from '@/lib/constants'
 import { useHelpers } from '@/lib/client-helpers'
 
 type ViewPort = 'main' | 'mobile'
 
-const navItems = (isTasksView: boolean) => [
-  { icon: Home, label: 'Dashboard', href: '/', position: 'main' },
-  {
-    icon: isTasksView ? TaskIcon : HabitIcon,
-    label: isTasksView ? 'Tasks' : 'Habits',
-    href: '/habits',
-    position: 'main'
-  },
-  { icon: Calendar, label: 'Calendar', href: '/calendar', position: 'main' },
-  { icon: Gift, label: 'Wishlist', href: '/wishlist', position: 'main' },
-  { icon: Coins, label: 'Coins', href: '/coins', position: 'main' },
-]
-
 interface NavigationProps {
   className?: string
   viewPort: ViewPort
 }
 
 export default function Navigation({ className, viewPort }: NavigationProps) {
+  const t = useTranslations('Navigation')
   const [showAbout, setShowAbout] = useState(false)
   const [isMobileView, setIsMobileView] = useState(false)
   const [browserSettings] = useAtom(browserSettingsAtom)
   const isTasksView = browserSettings.viewType === 'tasks'
   const { isIOS } = useHelpers()
 
+  const navItems = (isTasksView: boolean) => [
+    { icon: Home, label: t('dashboard'), href: '/', position: 'main' },
+    {
+      icon: isTasksView ? TaskIcon : HabitIcon,
+      label: isTasksView ? t('tasks') : t('habits'),
+      href: '/habits',
+      position: 'main'
+    },
+    { icon: Calendar, label: t('calendar'), href: '/calendar', position: 'main' },
+    { icon: Gift, label: t('wishlist'), href: '/wishlist', position: 'main' },
+    { icon: Coins, label: t('coins'), href: '/coins', position: 'main' },
+  ]
+
   useEffect(() => {
     const handleResize = () => {
       setIsMobileView(window.innerWidth < 1024)