Irudiak erakusten ditu (#8)

* feat: atzealde irudia erakusten du

* feat: cloudinary sartzen du

* feat: kartela erakusten du

* chore: typescript errorea ekiditen du

* feat: irisgarritasuna hobetzen du

* feat: modalaren estiloa hobetzendu

* feat: og image aldatzen du

front/src/pages/sanferminak.tsx

@@ -1,17 +1,27 @@
 import { graphql, navigate, PageProps, useStaticQuery } from 'gatsby';
-import React from 'react';
+import React, { useState } from 'react';
 import { GlobalStyles } from '../ui/GlobalStyles';
 
 import { Gainburua } from '../components/Gainburua';
 import styled from 'styled-components';
-import { colors, font, fontWeight, media, size } from '../ui/theme';
+import {
+  breakpoints,
+  colors,
+  font,
+  fontWeight,
+  media,
+  size,
+} from '../ui/theme';
 import { Container } from '../components/Container';
-import { rem } from 'polished';
+import { rem, rgba } from 'polished';
 import ReactMarkdown from 'react-markdown';
 import { Oina } from '../components/Oina';
 import { SFEgunaEdukia } from '../components/SFEgunaEdukia';
 import { datesUtils } from '../utils/dateUtils';
 import { SEO } from '../components/SEO';
+import { GatsbyImage, getImage, ImageDataLike } from 'gatsby-plugin-image';
+import { Dialog } from '../components/Dialog';
+import MediaQuery from 'react-responsive';
 
 export interface SFEguna {
   id: string;
@@ -21,6 +31,8 @@ export interface SFEguna {
     hitzordua: string;
     izenburua: string;
   };
+  kartela?: { file: ImageDataLike };
+  atzealde_irudia?: { file: ImageDataLike };
 }
 
 interface DataProps {
@@ -30,7 +42,7 @@ interface DataProps {
       izenburua: string;
     };
     edukia?: string;
-    sf_egunak?: SFEguna[];
+    sf_egunak: SFEguna[];
   };
 }
 
@@ -51,11 +63,30 @@ const IndexPage: React.VFC<PageProps> = ({ location }) => {
             hitzordua
             izenburua
           }
+          kartela {
+            alternativeText
+            file {
+              childImageSharp {
+                gatsbyImageData(layout: FULL_WIDTH, aspectRatio: 1)
+              }
+            }
+          }
+          atzealde_irudia {
+            alternativeText
+            file {
+              childImageSharp {
+                gatsbyImageData(width: 300, aspectRatio: 1)
+              }
+            }
+          }
         }
       }
     }
   `);
 
+  const [openKartela, setOpenKartela] = useState<ImageDataLike>();
+  const kartelaImage = openKartela && getImage(openKartela);
+
   return (
     <>
       <GlobalStyles />
@@ -84,34 +115,87 @@ const IndexPage: React.VFC<PageProps> = ({ location }) => {
           {strapiSanferminak.sf_egunak &&
             strapiSanferminak.sf_egunak.length > 0 && (
               <SFEgunZerrenda>
-                {strapiSanferminak.sf_egunak.map(sfeguna => (
-                  <SFEgunaElementua
-                    key={sfeguna.id}
-                    className={
-                      datesUtils.isToday(new Date(sfeguna.eguna))
-                        ? 'active'
-                        : ''
-                    }
-                  >
-                    <SFEgunaEdukia sfeguna={sfeguna} />
-                  </SFEgunaElementua>
-                ))}
+                {strapiSanferminak.sf_egunak.map(sfeguna => {
+                  const image =
+                    sfeguna.atzealde_irudia &&
+                    getImage(sfeguna.atzealde_irudia?.file);
+
+                  return (
+                    <SFEgunaElementua key={sfeguna.id}>
+                      <MediaQuery minWidth={breakpoints.tablet}>
+                        {image && (
+                          <AtzealdeIrudia
+                            alt="Atzealdeko irudia"
+                            image={image}
+                          />
+                        )}
+                      </MediaQuery>
+
+                      <EdukiaWrapper
+                        role="button"
+                        aria-label={sfeguna.ekitaldi_nagusia.izenburua}
+                        className={
+                          datesUtils.isToday(new Date(sfeguna.eguna))
+                            ? 'active'
+                            : ''
+                        }
+                        onClick={() => setOpenKartela(sfeguna.kartela?.file)}
+                      >
+                        <SFEgunaEdukia sfeguna={sfeguna} />
+                      </EdukiaWrapper>
+                    </SFEgunaElementua>
+                  );
+                })}
               </SFEgunZerrenda>
             )}
         </Container>
       </ContentWrapper>
 
       <Oina />
+
+      <Dialog
+        open={Boolean(openKartela)}
+        onClose={() => setOpenKartela(undefined)}
+      >
+        {kartelaImage && <Kartela alt="Kartela" image={kartelaImage} />}
+      </Dialog>
     </>
   );
 };
 
-const SFEgunaElementua = styled.li`
+const AtzealdeIrudia = styled(GatsbyImage)`
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+
+  z-index: -1;
+`;
+
+const Kartela = styled(GatsbyImage)`
+  width: 100%;
+  height: 100%;
+`;
+
+const EdukiaWrapper = styled.div`
+  top: 0;
+  height: 100%;
+  width: 100%;
   padding: ${rem(size.small)};
 
-  width: 100%;
   background-color: ${colors.beltza};
-  color: ${colors.zuria};
+  transition: background-color 0.75s ease;
+
+  cursor: pointer;
+
+  &:hover {
+    background-color: ${rgba(colors.beltza, 0.8)};
+  }
+
+  ${media.tablet`
+    position: absolute;
+  `}
 
   &.active {
     @keyframes mymove {
@@ -128,8 +212,15 @@ const SFEgunaElementua = styled.li`
 
     animation: mymove 4s infinite;
   }
+`;
+
+const SFEgunaElementua = styled.li`
+  width: 100%;
+
+  color: ${colors.zuria};
 
   ${media.tablet`
+    position: relative;
     aspect-ratio: 1/1;
     margin-bottom: 0;
   `}