Konboa sortzen du (#3)

* feat: konboak sortzen ditu

* fix: responsive-a konpontzen du

front/gatsby-config.js

@@ -27,6 +27,9 @@ const query = qs.stringify(
       tostadak: {
         populate: ['alergenoak'],
       },
+      konboak: {
+        populate: ['alergenoak'],
+      },
     },
   },
   {

front/src/pages/kafetegia.tsx

@@ -6,7 +6,7 @@ import { Helmet } from 'react-helmet';
 import { Gainburua } from '../components/Gainburua';
 import { Container } from '../components/Container';
 import styled from 'styled-components';
-import { colors, font, fontWeight, size } from '../ui/theme';
+import { colors, font, fontWeight, media, size } from '../ui/theme';
 
 import BeganoaLogo from '../assets/beganoa.svg';
 import EkologikoaLogo from '../assets/ekologikoa.svg';
@@ -26,6 +26,7 @@ const Kafetegia: React.VFC<PageProps> = () => {
     pikatzekoak,
     gozoak,
     tostadak,
+    konboak,
   } = useKafetegiaData();
 
   return (
@@ -42,8 +43,8 @@ const Kafetegia: React.VFC<PageProps> = () => {
         deskribapena={deskribapena}
       />
 
-      <Container>
-        <ContentWrapper>
+      <ContentWrapper>
+        <Container>
           <TaldeWrapper>
             <IzenburuWrapper>
               <Marra />
@@ -93,7 +94,24 @@ const Kafetegia: React.VFC<PageProps> = () => {
               />
             </ZerrendaWrapper>
           </TaldeWrapper>
+        </Container>
 
+        <KonboWrapper>
+          <Container>
+            <IzenburuWrapper>
+              <Marra />
+              <Izenburua>GOSARI KONBOAK</Izenburua>
+            </IzenburuWrapper>
+
+            <OrduaWrapper>
+              <p>11:00ak arte</p>
+            </OrduaWrapper>
+
+            <ProduktuZerrenda produktuZerrenda={konboak} />
+          </Container>
+        </KonboWrapper>
+
+        <Container>
           <TaldeWrapper>
             <IzenburuWrapper>
               <Marra />
@@ -102,20 +120,41 @@ const Kafetegia: React.VFC<PageProps> = () => {
 
             <AlergenoLegenda />
           </TaldeWrapper>
-        </ContentWrapper>
-      </Container>
+
+          <OnEgin>
+            <p>On egin!</p>
+          </OnEgin>
+        </Container>
+      </ContentWrapper>
     </>
   );
 };
 
+const OrduaWrapper = styled.div`
+  ${font.small()};
+  font-weight: ${fontWeight.bold};
+  text-align: right;
+  margin-bottom: ${size.base}px;
+`;
+
+const KonboWrapper = styled.div`
+  background-color: ${colors.horia};
+  padding-top: ${size.base}px;
+  padding-bottom: ${size.base}px;
+  margin-bottom: ${size.large}px;
+`;
+
+const OnEgin = styled.div`
+  text-align: center;
+  ${font.gargantuan()};
+`;
+
 const ContentWrapper = styled.div`
   padding: ${size.huge}px 0;
 `;
 
 const TaldeWrapper = styled.section`
-  &:not(:last-child) {
-    margin-bottom: ${size.large}px;
-  }
+  margin-bottom: ${size.large}px;
 `;
 
 const ZerrendaWrapper = styled.div`
@@ -126,10 +165,10 @@ const ZerrendaWrapper = styled.div`
 
 const ProduktuZerrenda: React.FC<{
   produktuZerrenda: Produktua[];
-  izena: React.ReactNode;
+  izena?: React.ReactNode;
 }> = ({ produktuZerrenda, izena }) => (
   <ProduktuTaula>
-    <ProduktuMota>{izena}</ProduktuMota>
+    {izena && <ProduktuMota>{izena}</ProduktuMota>}
 
     {produktuZerrenda.map(produktua => (
       <tr key={produktua.id}>
@@ -174,10 +213,15 @@ const ProduktuTaula = styled.table`
 `;
 
 const Ezaugarria = styled.td`
-  width: ${size.medium}px;
-  height: ${size.medium}px;
+  width: ${size.base}px;
+  height: ${size.base}px;
   padding: 0 ${size.xtiny}px;
   vertical-align: top;
+
+  ${media.tablet`
+    width: ${size.medium}px;
+    height: ${size.medium}px;
+  `}
 `;
 
 const Izena = styled.td`

front/src/viewQueries/KafetegiaData.ts

@@ -10,4 +10,5 @@ export interface KafetegiaData {
   gozoak: Produktua[];
   anizkoJogurta: Produktua;
   tostadak: Produktua[];
+  konboak: Produktua[];
 }

front/src/viewQueries/useKafetegiaData.ts

@@ -16,6 +16,7 @@ interface DataProps {
         gozoak: ProduktuaDTO[];
         anizkoJogurta: ProduktuaDTO;
         tostadak: ProduktuaDTO[];
+        konboak: ProduktuaDTO[];
       };
     };
   };
@@ -35,6 +36,7 @@ export function useKafetegiaData(): KafetegiaData {
           pikatzekoak,
           gozoak,
           tostadak,
+          konboak,
         },
       },
     },
@@ -206,6 +208,29 @@ export function useKafetegiaData(): KafetegiaData {
                 ziapea
               }
             }
+            konboak {
+              id
+              ekologikoa
+              beganoa
+              izena
+              prezioa
+              alergenoak {
+                apioa
+                arraina
+                arrautzak
+                esnekiak
+                fruituLehorrak
+                glutena
+                kakahueteak
+                krustazeoak
+                lupinuak
+                moluskuak
+                sesamoa
+                soja
+                sulfitoak
+                ziapea
+              }
+            }
           }
         }
       }
@@ -222,5 +247,6 @@ export function useKafetegiaData(): KafetegiaData {
     pikatzekoak: pikatzekoak.map(produktuaFactory),
     gozoak: gozoak.map(produktuaFactory),
     tostadak: tostadak.map(produktuaFactory),
+    konboak: konboak.map(produktuaFactory),
   };
 }