labasarea/laba-webgunea
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Sanferminak kentzen ditu (#9)

Browse Source 
* chore: Strapi bertsioa igotzen du

* chore: Gatsby eguneratzen du

* chore: build-a konpontzen du

* feat: Sanferminak kentzen ditu

* feat: rimraf sartzen du

* chore: build-a ngrokekin lotzen du

* chore: karta eguneratzen du

* feat: karta eguneratzen du
This commit is contained in:
Aitor Urrutia
2023-12-07 12:46:06 +01:00
committed by GitHub
parent 9cfba79fe3
commit 8f14ee975d
28 changed files with 9447 additions and 10626 deletions
Download Patch File Download Diff File Expand all files Collapse all files

264
front/src/pages/sanferminak.tsx
View File

@@ -1,264 +0,0 @@
import { graphql, navigate, PageProps, useStaticQuery } from 'gatsby';
import React, { useState } from 'react';
import { GlobalStyles } from '../ui/GlobalStyles';
import { Gainburua } from '../components/Gainburua';
import styled from 'styled-components';
import {
breakpoints,
colors,
font,
fontWeight,
media,
size,
} from '../ui/theme';
import { Container } from '../components/Container';
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;
eguna: string;
ekitaldi_nagusia: {
id: string;
hitzordua: string;
izenburua: string;
};
kartela?: { file: ImageDataLike };
atzealde_irudia?: { file: ImageDataLike };
}
interface DataProps {
strapiSanferminak: {
datu_orokorrak: {
deskribapena: string;
izenburua: string;
};
edukia?: string;
sf_egunak: SFEguna[];
};
}
const IndexPage: React.VFC<PageProps> = ({ location }) => {
const { strapiSanferminak } = useStaticQuery<DataProps>(graphql`
{
strapiSanferminak {
datu_orokorrak {
izenburua
deskribapena
}
edukia
sf_egunak {
eguna
id
ekitaldi_nagusia {
id
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 />
<SEO
location={location}
title={strapiSanferminak.datu_orokorrak.izenburua}
description={strapiSanferminak.datu_orokorrak.izenburua}
/>
<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 => {
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
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 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.button`
display: block;
top: 0;
height: 100%;
width: 100%;
padding: ${rem(size.small)};
color: ${colors.zuria};
border: none;
background-color: ${colors.beltza};
transition: background-color 0.75s ease;
cursor: pointer;
&:hover {
background-color: ${rgba(colors.beltza, 0.8)};
}
&:focus {
outline: 4px solid ${colors.urdina};
}
${media.tablet`
position: absolute;
`}
&.active {
@keyframes mymove {
0% {
background-color: ${colors.beltza};
}
33% {
background-color: ${colors.gorria};
}
66% {
background-color: ${colors.beltza};
}
}
animation: mymove 4s infinite;
}
`;
const SFEgunaElementua = styled.li`
width: 100%;
color: ${colors.zuria};
${media.tablet`
position: relative;
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;