Almost finished translations

site/components/common/Footer/Footer.tsx

@@ -9,6 +9,7 @@ import { Logo, Container } from '@components/ui'
 import { I18nWidget } from '@components/common'
 import ThemeSwitcher from '@components/ui/ThemeSwitcher'
 import s from './Footer.module.css'
+import navBarLinks from '../../../static_data/navBarLinks.json'
 
 interface Props {
   className?: string
@@ -16,29 +17,18 @@ interface Props {
   pages?: Page[]
 }
 
-const links = [
-  {
-    name: 'Home',
-    url: '/',
-  },
-  {
-    name: 'About',
-    url: '/about'
-  },
-  {
-    name: 'News',
-    url: '/news'
-  },
-  {
-    name: 'Contact',
-    url: '/contact'
-  }
-]
+interface FooterLink {
+  label: string
+  href: string
+}
 
 const Footer: FC<Props> = ({ className, pages }) => {
   const { sitePages } = usePages(pages)
   const rootClassName = cn(s.root, className)
 
+  const { locale = 'it' } = useRouter()
+  const links = navBarLinks[locale as keyof typeof navBarLinks]
+
   return (
     <footer className={rootClassName}>
       <Container>
@@ -55,7 +45,16 @@ const Footer: FC<Props> = ({ className, pages }) => {
           </div>
           <div className="col-span-1 lg:col-span-7">
             <div className="grid md:grid-rows-4 md:grid-cols-3 md:grid-flow-col">
-              {[...links, ...sitePages].map((page) => (
+              {[...links].map((page: FooterLink) => (
+                <span key={page.href} className="py-3 md:py-0 md:pb-4">
+                  <Link href={page.href!}>
+                    <a className="text-accent-9 hover:text-accent-6 transition ease-in-out duration-150">
+                      {page.label}
+                    </a>
+                  </Link>
+                </span>
+              ))}
+              {[...sitePages].map((page) => (
                 <span key={page.url} className="py-3 md:py-0 md:pb-4">
                   <Link href={page.url!}>
                     <a className="text-accent-9 hover:text-accent-6 transition ease-in-out duration-150">

site/components/common/Layout/Layout.tsx

@@ -17,7 +17,7 @@ import { MenuSidebarView } from '@components/common/UserNav'
 import type { Page } from '@commerce/types/page'
 import type { Category } from '@commerce/types/site'
 import type { Link as LinkProps } from '../UserNav/MenuSidebarView'
-import navBarLinks from '../../../static_data/navBarLinks.json';
+import navBarLinks from '../../../static_data/navBarLinks.json'
 import Script from 'next/script'
 
 const Loading = () => (
@@ -111,13 +111,13 @@ const Layout: React.FC<Props> = ({
 }) => {
   const { acceptedCookies, onAcceptCookies } = useAcceptCookies()
   const { locale = 'it' } = useRouter()
-  const navBarlinks = navBarLinks.links;
+  const navBarlinks = navBarLinks[locale as keyof typeof navBarLinks]
 
   return (
     <CommerceProvider locale={locale}>
       <div className={cn(s.root)}>
         <Navbar links={navBarlinks} />
-        <main className="fit">{children}</main>
+        <main>{children}</main>
         <Footer pages={pageProps.pages} />
         <ModalUI />
         <CheckoutProvider>

site/components/common/Navbar/NavBarFiltersDrawer.tsx

@@ -1,57 +1,76 @@
-import { Drawer, DrawerOverlay, DrawerContent, DrawerHeader, DrawerBody, Link, Box, Stack, Heading, Divider } from "@chakra-ui/react"
-import React, { useEffect, useState } from "react"
-import filtersData from '../../../static_data/navBarMenuData.json';
-import NavBarFiltersItem from './NavBarFiltersItem';
+import {
+  Drawer,
+  DrawerOverlay,
+  DrawerContent,
+  DrawerHeader,
+  DrawerBody,
+  Link,
+  Box,
+  Stack,
+  Heading,
+  Divider,
+} from '@chakra-ui/react'
+import { useRouter } from 'next/router'
+import React, { useEffect, useState } from 'react'
+import filtersData from '../../../static_data/navBarMenuData.json'
+import NavBarFiltersItem from './NavBarFiltersItem'
 
-export default function NavBarFiltersDrawer(props: { 
-  onClose: () => void;
-  isOpen: boolean;
+export default function NavBarFiltersDrawer(props: {
+  onClose: () => void
+  isOpen: boolean
 }) {
+  const { locale = 'it' } = useRouter()
 
-    const [placement, setPlacement] = React.useState('left' as const)
-    const [regions, setRegions] = React.useState<NavItem[]>([]);
-    const [categories, setCategories] = React.useState<NavItem[]>([]);
+  const [placement, setPlacement] = React.useState('left' as const)
+  const [regions, setRegions] = React.useState<NavItem[]>([])
+  const [categories, setCategories] = React.useState<NavItem[]>([])
 
-    useEffect(() => {
-      setRegions(filtersData.regions);
-      setCategories(filtersData.categories);
-    }, []);
-
-    return (
-      <>
-        <Drawer placement={placement} onClose={props.onClose} isOpen={props.isOpen}>
-          <DrawerOverlay />
-          <DrawerContent>
-            <DrawerBody>
-              <Stack mt={5} direction={"column"} spacing={"20"}>
-                <Box>
-                  <Heading size={"lg"} mb={5}>Regions</Heading>
-                  {
-                    regions.map(region => (
-                      <NavBarFiltersItem key={region.label} {...region} />
-                    ))
-                  }
-                </Box>
-                <Box>
-                  <Heading mb={5} size={"lg"}>Categories</Heading>
-                  {
-                    categories.map(category => (
-                      <NavBarFiltersItem key={category.label} {...category} />
-                    ))
-                  }
-                </Box>
-              </Stack>
-            </DrawerBody>
-          </DrawerContent>
-      </Drawer>
-      </>
+  useEffect(() => {
+    setRegions(filtersData.regions)
+    setCategories(
+      filtersData.categories[locale as keyof typeof filtersData.categories]
     )
-  }
-  
-  interface NavItem {
-    label: string;
-    subLabel?: string;
-    children?: Array<NavItem>;
-    href?: string;
-    enabled: boolean;
-  };
+  }, [])
+
+  return (
+    <>
+      <Drawer
+        placement={placement}
+        onClose={props.onClose}
+        isOpen={props.isOpen}
+      >
+        <DrawerOverlay />
+        <DrawerContent>
+          <DrawerBody>
+            <Stack mt={5} direction={'column'} spacing={'20'}>
+              <Box>
+                <Heading size={'lg'} mb={5}>
+                  {locale === 'it' ? 'Regioni' : 'Regions'}
+                </Heading>
+                {regions.map((region) => (
+                  <NavBarFiltersItem key={region.label} {...region} />
+                ))}
+              </Box>
+              <Box>
+                <Heading mb={5} size={'lg'}>
+                  {locale === 'it' ? 'Categorie' : 'Categories'}
+                </Heading>
+                {categories.map((category) => (
+                  <NavBarFiltersItem key={category.label} {...category} />
+                ))}
+              </Box>
+            </Stack>
+          </DrawerBody>
+        </DrawerContent>
+      </Drawer>
+    </>
+  )
+}
+
+interface NavItem {
+  label: string
+  subLabel?: string
+  children?: Array<NavItem>
+  href?: string
+  enabled: boolean
+}

site/components/common/Navbar/Navbar.tsx

@@ -17,12 +17,18 @@ interface NavbarProps {
 }
 
 const Navbar: FC<NavbarProps> = ({ links }) => {
-
-  const { isOpen: isOpenDrawer, onOpen: onOpenDrawer, onClose: onCloseDrawer } = useDisclosure()
+  const {
+    isOpen: isOpenDrawer,
+    onOpen: onOpenDrawer,
+    onClose: onCloseDrawer,
+  } = useDisclosure()
 
   return (
     <>
-      <NavBarFiltersDrawer onClose={onCloseDrawer} isOpen={isOpenDrawer} ></NavBarFiltersDrawer>
+      <NavBarFiltersDrawer
+        onClose={onCloseDrawer}
+        isOpen={isOpenDrawer}
+      ></NavBarFiltersDrawer>
       <NavbarRoot>
         <Container clean className="mx-auto max-w-8xl px-6">
           <div className={s.nav}>
@@ -38,10 +44,13 @@ const Navbar: FC<NavbarProps> = ({ links }) => {
                 </Link>
                 {links?.map((l) => (
                   <Link href={l.href} key={l.href}>
-                    {
-                      l.label === 'Regions' ? (<a onClick={onOpenDrawer} className={s.link}>{l.label}</a>)
-                        : <a className={s.link}>{l.label}</a> 
-                    }
+                    {l.label === 'Regions' || l.label === 'Regioni' ? (
+                      <a onClick={onOpenDrawer} className={s.link}>
+                        {l.label}
+                      </a>
+                    ) : (
+                      <a className={s.link}>{l.label}</a>
+                    )}
                   </Link>
                 ))}
               </nav>

site/components/common/Searchbar/Searchbar.tsx

@@ -40,7 +40,11 @@ const Searchbar: FC<Props> = ({ className, id = 'search' }) => {
       <input
         id={id}
         className={s.input}
-        placeholder="Search for products..."
+        placeholder={
+          router.locale === 'en'
+            ? 'Search for products...'
+            : 'Cerca Prodotti...'
+        }
         defaultValue={router.query.q}
         onKeyUp={handleKeyUp}
       />