Feature/sf agenda sortzen du (#6)

* feat: laba-gara atala sortzen du

* feat: Strapi bertsioa igotzen du eta sf-ekitaldia sortzen du

* feat: ekitaldi nagusiak erakusten ditu

* feat: beste hitzorduak erakusten ditu

* feat: ordena aldatzen du

* fix: nabigazioa konpontzen du

* fix: font-weight aldatzen du

* refactor: datu modeloak aldatzen ditu

* feat: hoverrak aldatzen ditu

* feat: estilo hobekuntzak sartzen ditu

* feat: favicon aldatzen du

* mugikor nabigazioa konpontzen du

front/src/components/Gainburua/DesktopNabigazioa.tsx

@@ -1,18 +1,24 @@
 import React from 'react';
 import { Link } from 'gatsby';
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
 import { rem } from 'polished';
 import { size } from '../../ui/theme';
+import { AtalaName } from './Gainburua';
 
-export const DesktopNabigazioa: React.FC<{
-  atala?: 'hasiera' | 'kafetegia';
-}> = ({ atala }) => {
+interface Props {
+  atala?: AtalaName;
+}
+
+export const DesktopNabigazioa: React.FC<Props> = ({ atala }) => {
   return (
     <Nabigazioa>
       <EstekaZerrenda>
         <Esteka aktiboa={atala === 'hasiera'}>
           <Link to="/">Laba gara</Link>
         </Esteka>
+        <Esteka aktiboa={atala === 'sanferminak'}>
+          <Link to="/sanferminak">Sanferminak</Link>
+        </Esteka>
         <Esteka aktiboa={atala === 'kafetegia'}>
           <Link to="/kafetegia">Dastatu Laba</Link>
         </Esteka>
@@ -36,9 +42,18 @@ export const EstekaZerrenda = styled.ul`
 export const Esteka = styled.li<{ aktiboa?: boolean }>`
   padding: ${rem(size.small)};
 
+  color: var(--color);
+
   ${({ aktiboa }) =>
-    aktiboa &&
-    `
-    border-bottom: 3px solid var(--color);
-  `}
+    aktiboa
+      ? css`
+          border-bottom: 3px solid var(--color);
+        `
+      : css`
+          transition: color 0.4s ease;
+
+          &:hover {
+            color: var(--hover-color);
+          }
+        `}
 `;

front/src/components/Gainburua/Gainburua.tsx

@@ -14,10 +14,12 @@ import MediaQuery from 'react-responsive';
 import { KontaktuDatuak } from './KontaktuDatuak';
 import Gezia from '../../assets/gezia.svg';
 
+export type AtalaName = 'hasiera' | 'kafetegia' | 'sanferminak';
+
 interface Props {
   izenburua?: string;
   deskribapena?: string;
-  atala?: 'hasiera' | 'kafetegia';
+  atala?: AtalaName;
   onClick?: () => void;
 }
 
@@ -38,7 +40,7 @@ export const Gainburua: React.FC<Props> = ({
             <MugikorLogoWrapper>
               <Link to="/">
                 <LogoWrapper>
-                  <Logo title="Laba gara" />
+                  <Logo title="Laba gara" atala={atala} />
                 </LogoWrapper>
               </Link>
             </MugikorLogoWrapper>
@@ -50,7 +52,7 @@ export const Gainburua: React.FC<Props> = ({
         <GainburuWrapper>
           <Link to="/">
             <LogoWrapper>
-              <Logo title="Laba gara" />
+              <Logo title="Laba gara" atala={atala} />
             </LogoWrapper>
           </Link>
 
@@ -83,15 +85,19 @@ export const Gainburua: React.FC<Props> = ({
 };
 
 const GeziaWrapper = styled.div`
-  display: flex;
-  justify-content: flex-end;
+  display: none;
+
+  ${media.desktop`
+    display: flex;
+    justify-content: flex-end;
+  `}
 `;
 
 const GeziaLogo = styled(Gezia)<{ atala: 'hasiera' | 'kafetegia' }>`
   cursor: pointer;
   path {
-    fill: ${({ atala }) =>
-      atala === 'hasiera' ? colors.zuria : colors.beltza};
+    transition: fill 0.4s ease;
+    fill: var(--color);
   }
 
   animation-duration: 2s;
@@ -110,6 +116,12 @@ const GeziaLogo = styled(Gezia)<{ atala: 'hasiera' | 'kafetegia' }>`
       transform: rotate(90deg) translateX(0);
     }
   }
+
+  &:hover {
+    path {
+      fill: var(--hover-color);
+    }
+  }
 `;
 
 const Nagusia = styled.main`
@@ -138,20 +150,16 @@ const MugikorLogoWrapper = styled.div`
   justify-content: center;
 `;
 
-const Wrapper = styled.div<{ atala?: 'hasiera' | 'kafetegia' }>`
-  --color: ${({ atala }) =>
-    atala === 'hasiera' ? colors.zuria : colors.beltza};
+const Wrapper = styled.div<{ atala?: AtalaName }>`
+  --color: ${({ atala }) => getAtalaColor(atala)};
+  --hover-color: ${({ atala }) => getAtalaHoverColor(atala)};
 
   display: flex;
   flex-direction: column;
 
-  background-color: ${({ atala }) =>
-    atala === 'hasiera' ? colors.gorria : colors.horia};
+  background-color: ${({ atala }) => getAtalaBackground(atala)};
   color: var(--color);
 
-  /* HACK: Hasiera orriak edukirik ez duenez, gainburuak altuera osoa hartuko du */
-  min-height: ${({ atala }) => (atala === 'hasiera' ? '100vh' : '0')};
-
   ${media.desktop`
     min-height: ${({ atala }: { atala: 'hasiera' | 'kafetegia' }) =>
       Boolean(atala) ? '100vh' : '0'};  
@@ -162,10 +170,17 @@ const LogoWrapper = styled.div`
   width: ${rem(size.huge)};
 `;
 
-const Logo = styled(LabaLogo)`
+const Logo = styled(LabaLogo)<{ atala?: AtalaName }>`
   path {
+    transition: fill 0.4s ease;
     fill: var(--color);
   }
+
+  &:hover {
+    path {
+      fill: var(--hover-color);
+    }
+  }
 `;
 
 const GainburuWrapper = styled.header`
@@ -215,3 +230,39 @@ const Izenburua = styled.h1`
 
   ${font.gargantuan()};
 `;
+
+function getAtalaBackground(atala?: AtalaName) {
+  if (atala === 'sanferminak') {
+    return colors.morea;
+  }
+
+  if (atala === 'hasiera') {
+    return colors.gorria;
+  }
+
+  if (atala === 'kafetegia') {
+    return colors.horia;
+  }
+
+  return colors.beltza;
+}
+
+function getAtalaColor(atala?: AtalaName) {
+  if (atala === 'hasiera' || atala === 'sanferminak') {
+    return colors.zuria;
+  }
+
+  if (atala === 'kafetegia') {
+    return colors.beltza;
+  }
+
+  return colors.zuria;
+}
+
+function getAtalaHoverColor(atala?: AtalaName) {
+  if (atala === 'sanferminak' || atala === 'hasiera') {
+    return colors.horia;
+  }
+
+  return colors.gorria;
+}

front/src/components/Gainburua/KontaktuDatuak.tsx

@@ -16,7 +16,7 @@ export const KontaktuDatuak: React.FC = () => {
   return (
     <Kontaktua>
       <Helbidea>
-        <p>Gazteluko plaza 2</p>
+        <p>Gazteluko plaza, 2</p>
         <p>Iruñea</p>
       </Helbidea>
 
@@ -61,16 +61,30 @@ export const Instagram = styled(InstagramLogo)`
   width: ${rem(size.base)};
   height: ${rem(size.base)};
   path {
+    transition: fill 0.4s ease;
     fill: var(--color);
   }
+
+  &:hover {
+    path {
+      fill: var(--hover-color);
+    }
+  }
 `;
 
 export const Twitter = styled(TwitterLogo)`
   width: ${rem(size.base)};
   height: ${rem(size.base)};
   path {
+    transition: fill 0.4s ease;
     fill: var(--color);
   }
+
+  &:hover {
+    path {
+      fill: var(--hover-color);
+    }
+  }
 `;
 
 export const SareSozialak = styled.ul`

front/src/components/Gainburua/MugikorNabigazioa.tsx

@@ -25,6 +25,9 @@ export const MugikorNabigazioa: React.FC = () => {
               <Esteka>
                 <Link to="/">Laba gara</Link>
               </Esteka>
+              <Esteka>
+                <Link to="/sanferminak">Sanferminak</Link>
+              </Esteka>
               <Esteka>
                 <Link to="/kafetegia">Dastatu Laba</Link>
               </Esteka>
@@ -85,7 +88,7 @@ const OpenClose = styled.div`
 const NabigazioaWrapper = styled.div`
   @keyframes sartu {
     from {
-      right: -300px;
+      right: -100vw;
     }
     to {
       right: 0;
@@ -104,7 +107,7 @@ const NabigazioaWrapper = styled.div`
   position: fixed;
   top: 0;
   right: 0;
-  min-width: 300px;
+  width: 100vw;
   background-color: ${colors.beltza};
   color: ${colors.zuria};
   height: 100vh;
@@ -121,7 +124,7 @@ const KontaktuDatuak: React.FC = () => {
   return (
     <Kontaktua>
       <Helbidea>
-        <p>Gazteluko plaza 2</p>
+        <p>Gazteluko plaza, 2</p>
         <p>Iruñea</p>
       </Helbidea>
 

front/src/components/SFEgunaEdukia.tsx

@@ -0,0 +1,98 @@
+import React from 'react';
+import { datesUtils } from '../utils/dateUtils';
+import { SFEguna } from '../pages/sanferminak';
+import styled from 'styled-components';
+import { rem } from 'polished';
+import { colors, font, fontWeight, size } from '../ui/theme';
+import { graphql, useStaticQuery } from 'gatsby';
+
+interface DataProps {
+  allStrapiSfEkitaldia: {
+    nodes: {
+      id: string;
+      hitzordua: string;
+      izenburua: string;
+    }[];
+  };
+}
+
+export const SFEgunaEdukia: React.FC<{ sfeguna: SFEguna }> = ({ sfeguna }) => {
+  const { eguna, ekitaldi_nagusia } = sfeguna;
+
+  const {
+    allStrapiSfEkitaldia: { nodes: egunak },
+  } = useStaticQuery<DataProps>(graphql`
+    {
+      allStrapiSfEkitaldia {
+        nodes {
+          hitzordua
+          id
+          izenburua
+        }
+      }
+    }
+  `);
+
+  const besteEgunak = egunak.filter(
+    ekitaldia =>
+      datesUtils.areSameDay(new Date(ekitaldia.hitzordua), new Date(eguna)) &&
+      ekitaldi_nagusia.id !== ekitaldia.id,
+  );
+
+  return (
+    <SFEgunWrapper>
+      <SFEgunaEguna>Uztailak {new Date(eguna).getDate()}.</SFEgunaEguna>
+
+      <SFEgunaNagusiaOrdua>
+        {datesUtils.getHour(new Date(ekitaldi_nagusia.hitzordua))}
+      </SFEgunaNagusiaOrdua>
+
+      <SFEgunaNagusiaIzenburua>
+        {ekitaldi_nagusia.izenburua}
+      </SFEgunaNagusiaIzenburua>
+
+      {besteEgunak.map(eguna => (
+        <BesteHitzordua>
+          {datesUtils.getHour(new Date(eguna.hitzordua))} {eguna.izenburua}
+        </BesteHitzordua>
+      ))}
+    </SFEgunWrapper>
+  );
+};
+
+const BesteHitzordua = styled.p`
+  color: ${colors.zuria};
+  ${font.base()};
+  font-weight: ${fontWeight.bold};
+
+  margin-top: ${rem(size.base)};
+`;
+
+const SFEgunaEguna = styled.p`
+  margin-bottom: ${rem(size.base)};
+
+  ${font.large()};
+  color: ${colors.zuria};
+`;
+
+const SFEgunaNagusiaIzenburua = styled.h2`
+  flex-grow: 1;
+
+  ${font.large()};
+  color: ${colors.zuria};
+  font-weight: ${fontWeight.bold};
+  text-align: center;
+`;
+
+const SFEgunaNagusiaOrdua = styled.p`
+  ${font.base()};
+  color: ${colors.zuria};
+  font-weight: ${fontWeight.bold};
+  text-align: center;
+`;
+
+const SFEgunWrapper = styled.div`
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+`;