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
2023-07-01 17:27:30 +02:00
parent 51a07d2052
commit b7a7424b5a
30 changed files with 1021 additions and 88 deletions
--- a/front/src/pages/sanferminak.tsx
+++ b/front/src/pages/sanferminak.tsx
@@ -0,0 +1,145 @@
+import { graphql, navigate, PageProps, useStaticQuery } from 'gatsby';
+import React from 'react';
+import { GlobalStyles } from '../ui/GlobalStyles';
+
+import { Helmet } from 'react-helmet';
+import { Gainburua } from '../components/Gainburua';
+import styled from 'styled-components';
+import { colors, font, fontWeight, media, size } from '../ui/theme';
+import { Container } from '../components/Container';
+import { rem } from 'polished';
+import ReactMarkdown from 'react-markdown';
+import { Oina } from '../components/Oina';
+import { SFEgunaEdukia } from '../components/SFEgunaEdukia';
+
+export interface SFEguna {
+  id: string;
+  eguna: string;
+  ekitaldi_nagusia: {
+    id: string;
+    hitzordua: string;
+    izenburua: string;
+  };
+}
+
+interface DataProps {
+  strapiSanferminak: {
+    datu_orokorrak: {
+      deskribapena: string;
+      izenburua: string;
+    };
+    edukia?: string;
+    sf_egunak?: SFEguna[];
+  };
+}
+
+const IndexPage: React.VFC<PageProps> = () => {
+  const { strapiSanferminak } = useStaticQuery<DataProps>(graphql`
+    {
+      strapiSanferminak {
+        datu_orokorrak {
+          izenburua
+          deskribapena
+        }
+        edukia
+        sf_egunak {
+          eguna
+          id
+          ekitaldi_nagusia {
+            id
+            hitzordua
+            izenburua
+          }
+        }
+      }
+    }
+  `);
+
+  return (
+    <>
+      <Helmet
+        title={`${strapiSanferminak.datu_orokorrak.izenburua} | Laba`}
+        htmlAttributes={{ lang: 'eu' }}
+      >
+        <meta
+          name="description"
+          content={strapiSanferminak.datu_orokorrak.deskribapena}
+        />
+      </Helmet>
+
+      <GlobalStyles />
+
+      <Gainburua
+        atala="sanferminak"
+        izenburua={strapiSanferminak.datu_orokorrak.izenburua}
+        deskribapena={strapiSanferminak.datu_orokorrak.deskribapena}
+        onClick={() => {
+          navigate('/sanferminak#edukia');
+        }}
+      />
+
+      <ContentWrapper id="edukia">
+        <Container>
+          {strapiSanferminak.edukia && (
+            <Deskribapena>{strapiSanferminak.edukia}</Deskribapena>
+          )}
+
+          {strapiSanferminak.sf_egunak &&
+            strapiSanferminak.sf_egunak.length > 0 && (
+              <SFEgunZerrenda>
+                {strapiSanferminak.sf_egunak.map(sfeguna => (
+                  <SFEgunaElementua key={sfeguna.id}>
+                    <SFEgunaEdukia sfeguna={sfeguna} />
+                  </SFEgunaElementua>
+                ))}
+              </SFEgunZerrenda>
+            )}
+        </Container>
+      </ContentWrapper>
+
+      <Oina />
+    </>
+  );
+};
+
+const SFEgunaElementua = styled.li`
+  padding: ${rem(size.small)};
+
+  width: 100%;
+  background-color: ${colors.beltza};
+
+  ${media.tablet`
+    aspect-ratio: 1/1;
+    margin-bottom: 0;
+  `}
+`;
+
+const SFEgunZerrenda = styled.ul`
+  display: grid;
+  grid-column-gap: ${rem(size.mini)};
+  grid-row-gap: ${rem(size.mini)};
+
+  ${media.tablet`
+    grid-template-columns: repeat(2, 1fr);
+  `}
+
+  ${media.desktop`
+    grid-template-columns: repeat(3, 1fr);
+  `}
+`;
+
+const Deskribapena = styled(ReactMarkdown)`
+  margin-bottom: ${rem(size.large)};
+
+  p:not(-last-child) {
+    margin-bottom: ${rem(size.base)};
+  }
+`;
+
+const ContentWrapper = styled.div`
+  padding: ${size.huge}px 0;
+  font-weight: ${fontWeight.regular};
+  ${font.large()};
+`;
+
+export default IndexPage;