Gainburua CSS modules-era pasatzen du (#11)

* chore: CSS modules sartzen du

* refactor: alergeno legenda CSS modules

* refactor: css modules erabiltzen du

* chore: datubasea berreskuratzen du

* chore: kontaktu datuak aldatzen ditu

* ignore: saltoa

* feat: mugikor nabigazioa erakusten du

* chore: mugikor nabigazioa pasatzen du

* refactor: kontaktu datuak batzen ditu

* fix: gezia konpontzen du

* refactor: move component

* refactor: move component

* refactor: move component

* fix: builda konpontzen du

* chore: erabiltzen ez zen konponentea kentzen du

* fix: hasiera eta kafetegia ez diren atalak konpontzen ditu

* chore: react-responsive dependentzia kentzen du

* chore: yarn.lock eguneratzen du

* fix: kontsolako erroreak kentzen ditu

front/src/pages/404.tsx

@@ -1,11 +1,13 @@
 import React from 'react';
-import { Link } from 'gatsby';
-import { GlobalStyles } from '../ui/GlobalStyles';
-import { Gainburua } from '../components/Gainburua';
-import { Container } from '../components/Container';
 import { Helmet } from 'react-helmet';
 
-const NotFoundPage: React.VFC = () => {
+import { Link } from 'gatsby';
+
+import { Container } from '../components/Container';
+import { Gainburua } from '../components/Gainburua';
+import { GlobalStyles } from '../ui/GlobalStyles';
+
+const NotFoundPage: React.FC = () => {
   return (
     <>
       <Helmet

front/src/pages/kafetegia.tsx

@@ -1,23 +1,23 @@
-import { PageProps, navigate } from 'gatsby';
 import React from 'react';
-import { GlobalStyles } from '../ui/GlobalStyles';
 
-import { Gainburua } from '../components/Gainburua';
-import { Container } from '../components/Container';
+import { PageProps } from 'gatsby';
+import { rem } from 'polished';
 import styled from 'styled-components';
-import { colors, font, fontWeight, media, size } from '../ui/theme';
 
 import BeganoaLogo from '../assets/beganoa.svg';
 import EkologikoaLogo from '../assets/ekologikoa.svg';
-import { rem } from 'polished';
-import { Produktua } from '../domain/models/Produktua';
-import { useKafetegiaData } from '../viewQueries/useKafetegiaData';
 import { AlergenoLegenda } from '../components/AlergenoLegenda';
+import { Container } from '../components/Container';
+import { Gainburua } from '../components/Gainburua';
 import { Oina } from '../components/Oina';
 import { SEO } from '../components/SEO';
 import { produktuaFactory } from '../domain/factories/produktuaFactory';
+import { Produktua } from '../domain/models/Produktua';
+import { GlobalStyles } from '../ui/GlobalStyles';
+import { colors, font, fontWeight, media, size } from '../ui/theme';
+import { useKafetegiaData } from '../viewQueries/useKafetegiaData';
 
-const Kafetegia: React.VFC<PageProps> = ({ location }) => {
+const Kafetegia: React.FC<PageProps> = ({ location }) => {
   const { izenburua, deskribapena, menua } = useKafetegiaData();
 
   // oraingoz menuak alergenorik ez duenez, ezkutatuko dugu
@@ -34,9 +34,6 @@ const Kafetegia: React.VFC<PageProps> = ({ location }) => {
         atala="kafetegia"
         izenburua={izenburua}
         deskribapena={deskribapena}
-        onClick={() => {
-          navigate('/kafetegia#edukia');
-        }}
       />
 
       <ContentWrapper id="edukia">
@@ -47,16 +44,14 @@ const Kafetegia: React.VFC<PageProps> = ({ location }) => {
               'StrapiComponentKafetegiaProduktuTaldea'
             ) {
               return (
-                <>
-                  <ZerrendaWrapper>
-                    <ProduktuZerrenda
-                      izena={konponentea.izenburua}
-                      produktuZerrenda={konponentea.produktuak.map(
-                        produktuaFactory,
-                      )}
-                    />
-                  </ZerrendaWrapper>
-                </>
+                <ZerrendaWrapper key={konponentea.id}>
+                  <ProduktuZerrenda
+                    izena={konponentea.izenburua}
+                    produktuZerrenda={konponentea.produktuak.map(
+                      produktuaFactory,
+                    )}
+                  />
+                </ZerrendaWrapper>
               );
             }
 
@@ -64,7 +59,7 @@ const Kafetegia: React.VFC<PageProps> = ({ location }) => {
               konponentea.konponentea === 'StrapiComponentKafetegiaIzenburua'
             ) {
               return (
-                <IzenburuWrapper>
+                <IzenburuWrapper key={konponentea.id}>
                   <Marra />
                   <Izenburua>{konponentea.izenburuBalioa}</Izenburua>
                 </IzenburuWrapper>
@@ -120,30 +115,32 @@ const ProduktuZerrenda: React.FC<{
   <ProduktuTaula>
     {izena && <ProduktuMota>{izena}</ProduktuMota>}
 
-    {produktuZerrenda.map(produktua => (
-      <tr key={produktua.id}>
-        <Ezaugarria>
-          {produktua.beganoa && <BeganoaLogo title="Produktu beganoa" />}
-        </Ezaugarria>
-        <Ezaugarria>
-          {produktua.ekologikoa && (
-            <EkologikoaLogo title="Produktu ekologikoa" />
-          )}
-        </Ezaugarria>
-        <Izena scope="row">
-          {produktua.izena}{' '}
-          {produktua.alergenoak.map(alergenoa => (
-            <Alergenoa>{alergenoa.zenbakia}</Alergenoa>
-          ))}
-        </Izena>
-        <Prezioa>
-          {new Intl.NumberFormat('eu-ES', {
-            style: 'currency',
-            currency: 'EUR',
-          }).format(produktua.prezioa)}
-        </Prezioa>
-      </tr>
-    ))}
+    <tbody>
+      {produktuZerrenda.map(produktua => (
+        <tr key={produktua.id}>
+          <Ezaugarria>
+            {produktua.beganoa && <BeganoaLogo title="Produktu beganoa" />}
+          </Ezaugarria>
+          <Ezaugarria>
+            {produktua.ekologikoa && (
+              <EkologikoaLogo title="Produktu ekologikoa" />
+            )}
+          </Ezaugarria>
+          <Izena scope="row">
+            {produktua.izena}{' '}
+            {produktua.alergenoak.map(alergenoa => (
+              <Alergenoa>{alergenoa.zenbakia}</Alergenoa>
+            ))}
+          </Izena>
+          <Prezioa>
+            {new Intl.NumberFormat('eu-ES', {
+              style: 'currency',
+              currency: 'EUR',
+            }).format(produktua.prezioa)}
+          </Prezioa>
+        </tr>
+      ))}
+    </tbody>
   </ProduktuTaula>
 );