Localization should work now

Author: Giuseppetm

components/contact-popup/index.tsx

@@ -1,10 +1,10 @@
 import { Box, Button, Text, HStack, useColorModeValue } from "@chakra-ui/react"
 import { useState } from "react"
-import { useTranslation } from "next-i18next"
+import { useTranslations } from "next-intl"
 
 const ContactMailPopup = () => {
   const [isVisible, setIsVisible] = useState(true)
-  const { t } = useTranslation("about")
+  const t = useTranslations("about")
 
   const bg = useColorModeValue("white", "gray.800")
   const borderColor = useColorModeValue("gray.200", "gray.700")

components/course-card/index.tsx

@@ -2,7 +2,7 @@ import React from "react"
 import { Box, Flex, Text, useColorModeValue, HStack, Link, VStack, Divider, Tag } from "@chakra-ui/react"
 import { motion } from "framer-motion"
 import { ArrowRight, ArrowUpRight } from "lucide-react"
-import { useTranslation } from "next-i18next"
+import { useTranslations } from "next-intl"
 import { CourseDegree } from "@/types/api"
 import { getYearColor } from "@/utils/degree"
 
@@ -13,7 +13,7 @@ interface CourseCardProps {
 const MotionBox = motion(Box)
 
 const CourseCard: React.FC<CourseCardProps> = ({ data }) => {
-  const { t } = useTranslation("degree")
+  const t = useTranslations("degree")
   const { course, year, semester } = data
 
   const isDark = useColorModeValue(false, true)

components/degree-group-card/index.tsx

@@ -2,7 +2,7 @@ import React from "react"
 import { Box, Text, HStack, VStack, Stack, useColorModeValue } from "@chakra-ui/react"
 import { motion } from "framer-motion"
 import { ArrowRight, ArrowUpRight } from "lucide-react"
-import { useTranslation } from "next-i18next"
+import { useTranslations } from "next-intl"
 import { Degree, Group } from "@/types/api"
 
 interface DegreeGroupCardProps {
@@ -13,7 +13,7 @@ interface DegreeGroupCardProps {
 const MotionBox = motion(Box)
 
 const DegreeGroupCard: React.FC<DegreeGroupCardProps> = ({ degree, group }) => {
-  const { t } = useTranslation("degree")
+  const t = useTranslations("degree")
 
   const border = useColorModeValue("gray.200", "gray.700")
   const titleColor = useColorModeValue("white", "white")

components/empty-state/index.tsx

@@ -1,13 +1,13 @@
 import { Box, Text, VStack, useColorModeValue } from "@chakra-ui/react"
 import { Inbox } from "lucide-react"
-import { useTranslation } from "next-i18next"
+import { useTranslations } from "next-intl"
 
 interface EmptyStateProps {
   label?: string
 }
 
 const EmptyState: React.FC<EmptyStateProps> = ({ label }) => {
-  const { t } = useTranslation("common")
+  const t = useTranslations("common")
   const textColor = useColorModeValue("gray.600", "gray.400")
   const borderColor = useColorModeValue("gray.200", "gray.700")
   const bg = useColorModeValue("gray.50", "gray.800")

components/footer/index.tsx

@@ -1,9 +1,9 @@
 import { Box, Flex, Text, Link, Stack, Divider, IconButton, useColorModeValue, Tooltip } from "@chakra-ui/react"
 import { Facebook, Instagram, Github, Mail, Send, MessageCircle } from "lucide-react"
-import { useTranslation } from "next-i18next"
+import { useTranslations } from "next-intl"
 
 const Footer = () => {
-  const { t } = useTranslation("common")
+  const t = useTranslations("common")
 
   const bg = useColorModeValue("white", "gray.900")
   const border = useColorModeValue("gray.200", "gray.700")

components/header/index.tsx

@@ -2,7 +2,7 @@ import { Grid, GridItem, Tooltip, useDisclosure } from "@chakra-ui/react"
 import { Box, HStack, IconButton, useColorMode, useColorModeValue, Link as ChakraLink } from "@chakra-ui/react"
 import { HamburgerIcon, MoonIcon, SunIcon } from "@chakra-ui/icons"
 import Link from "next/link"
-import { useTranslation } from "next-i18next"
+import { useTranslations } from "next-intl"
 import LanguageSwitcher from "../language-switcher"
 import Sidebar from "./partials/sidebar"
 import { useRouter } from "next/router"
@@ -19,7 +19,7 @@ interface HeaderProps {
 
 const Header = ({ enableHideOnScrollUp }: HeaderProps) => {
   const router = useRouter()
-  const { t } = useTranslation("common")
+  const t = useTranslations("common")
   const { isOpen, onOpen, onClose } = useDisclosure()
   const { colorMode, toggleColorMode } = useColorMode()
   const { pathname } = useRouter()

components/header/partials/sidebar/index.tsx

@@ -19,7 +19,7 @@ import SearchBar from "@/components/search-bar"
 import { useRouter } from "next/router"
 import { ArrowLeft } from "lucide-react"
 import LanguageSwitcher from "@/components/language-switcher"
-import { useTranslation } from "next-i18next"
+import { useTranslations } from "next-intl"
 
 interface SidebarProps {
   isOpen: boolean
@@ -29,7 +29,7 @@ interface SidebarProps {
 
 const Sidebar = ({ isOpen, onClose, navItems }: SidebarProps) => {
   const router = useRouter()
-  const { t } = useTranslation("common")
+  const t = useTranslations("common")
 
   const bg = useColorModeValue("white", "gray.900")
   const textColor = useColorModeValue("gray.700", "whiteAlpha.900")

components/info-cards/index.tsx

@@ -1,9 +1,9 @@
 import { Box, Flex, Heading, Text, Tag, IconButton, useColorModeValue, Image, SimpleGrid, Stack, LinkBox, LinkOverlay } from "@chakra-ui/react"
 import { ArrowUpRight } from "lucide-react"
-import { useTranslation } from "next-i18next"
+import { useTranslations } from "next-intl"
 
 const ResourceCards = () => {
-  const { t } = useTranslation("common")
+  const t = useTranslations("common")
   const cardBg = useColorModeValue("gray.50", "gray.700")
   const tagBg = useColorModeValue("white", "gray.700")
   const tagBorder = useColorModeValue("gray.300", "gray.600")

components/privacy/popup.tsx

@@ -1,11 +1,11 @@
 import { Box, VStack, Text, HStack, Button, Link, useColorModeValue, Fade } from "@chakra-ui/react"
 import { usePrivacyStore } from "@/store/privacy"
 import { useEffect } from "react"
-import { useTranslation } from "next-i18next"
+import { useTranslations } from "next-intl"
 
 const PrivacyPopup: React.FC = () => {
   const { initialized, showPopup, init, accept, decline } = usePrivacyStore()
-  const { t } = useTranslation("common")
+  const t = useTranslations("common")
 
   const bg = useColorModeValue("white", "gray.800")
   const textColor = useColorModeValue("gray.700", "gray.200")

components/search-bar/index.tsx

@@ -2,7 +2,7 @@ import { useState, useEffect, useRef } from "react"
 import { InputGroup, InputLeftElement, Input, VStack, Text, useColorModeValue, InputRightElement, Button, Fade, StackProps } from "@chakra-ui/react"
 import { Search } from "lucide-react"
 import { useRouter } from "next/router"
-import { useTranslation } from "next-i18next"
+import { useTranslations } from "next-intl"
 
 interface SearchBarProps extends StackProps {
   enableLabel?: boolean
@@ -13,7 +13,7 @@ interface SearchBarProps extends StackProps {
 
 const SearchBar = ({ enableLabel = true, sidebarMode = false, onSearch, focusOnOpen = false, ...props }: SearchBarProps) => {
   const router = useRouter()
-  const { t } = useTranslation("common")
+  const t = useTranslations("common")
   const inputRef = useRef<HTMLInputElement>(null)
 
   const [query, setQuery] = useState("")