diff --git a/front/gatsby-config.js b/front/gatsby-config.js index 977e2e3..edb8a91 100644 --- a/front/gatsby-config.js +++ b/front/gatsby-config.js @@ -97,7 +97,7 @@ module.exports = { { resolve: `gatsby-plugin-google-fonts`, options: { - fonts: [`almarai\:600`, `almarai\:300`], + fonts: [`almarai\:800`, `almarai\:300`], display: 'swap', }, }, diff --git a/front/src/components/Gainburua/Gainburua.tsx b/front/src/components/Gainburua/Gainburua.tsx index 978f7e2..82a2234 100644 --- a/front/src/components/Gainburua/Gainburua.tsx +++ b/front/src/components/Gainburua/Gainburua.tsx @@ -133,7 +133,7 @@ const GainburuWrapper = styled.header` const Deskribapena = styled.p` margin-bottom: ${rem(size.xlarge)}; - text-align: justify; + hyphens: auto; ${font.base()}; diff --git a/front/src/components/Gainburua/MugikorNabigazioa.tsx b/front/src/components/Gainburua/MugikorNabigazioa.tsx index 198b950..b2bdfba 100644 --- a/front/src/components/Gainburua/MugikorNabigazioa.tsx +++ b/front/src/components/Gainburua/MugikorNabigazioa.tsx @@ -101,7 +101,7 @@ const NabigazioaWrapper = styled.div` flex-direction: column; align-items: flex-end; - position: absolute; + position: fixed; top: 0; right: 0; min-width: 300px; diff --git a/front/src/domain/dtos/ProduktuaDTO.ts b/front/src/domain/dtos/ProduktuaDTO.ts new file mode 100644 index 0000000..3e27a0f --- /dev/null +++ b/front/src/domain/dtos/ProduktuaDTO.ts @@ -0,0 +1,12 @@ +import { AlergenoIdentifikadorea } from '../models/AlergenoIdentifikadorea'; + +export interface ProduktuaDTO { + id: string; + izena: string; + prezioa: number; + ekologikoa: boolean; + beganoa: boolean; + alergenoak: { + [alergenoa in AlergenoIdentifikadorea]: boolean; + }; +} diff --git a/front/src/domain/factories/produktuaFactory.ts b/front/src/domain/factories/produktuaFactory.ts new file mode 100644 index 0000000..dbf8eef --- /dev/null +++ b/front/src/domain/factories/produktuaFactory.ts @@ -0,0 +1,29 @@ +import { ProduktuaDTO } from '../dtos/ProduktuaDTO'; +import { mapAlergenoIdentifikadoreaToIzena } from '../mappers/mapAlergenoIdentifikadoreaToIzena'; +import { mapAlergenoIdentifikadoreaToZenbakia } from '../mappers/mapAlergenoIdentifikadoreaToZenbakia'; +import { Alergenoa } from '../models/Alergenoa'; +import { AlergenoIdentifikadorea } from '../models/AlergenoIdentifikadorea'; +import { Produktua } from '../models/Produktua'; + +export function produktuaFactory(dto: ProduktuaDTO): Produktua { + return { + ...dto, + alergenoak: mapAlergenoDTOToAlergenoZerrenda(dto.alergenoak), + }; +} + +function mapAlergenoDTOToAlergenoZerrenda(dto: { + [alergenoa in AlergenoIdentifikadorea]: boolean; +}): Alergenoa[] { + const alergenoIdentifikadoreak: AlergenoIdentifikadorea[] = Object.keys( + dto, + ) as AlergenoIdentifikadorea[]; + + return alergenoIdentifikadoreak + .filter(identifikadorea => dto[identifikadorea]) + .map(identifikadorea => ({ + id: identifikadorea, + izena: mapAlergenoIdentifikadoreaToIzena(identifikadorea), + zenbakia: mapAlergenoIdentifikadoreaToZenbakia(identifikadorea), + })); +} diff --git a/front/src/domain/mappers/mapAlergenoIdentifikadoreaToIzena.ts b/front/src/domain/mappers/mapAlergenoIdentifikadoreaToIzena.ts new file mode 100644 index 0000000..2c5b212 --- /dev/null +++ b/front/src/domain/mappers/mapAlergenoIdentifikadoreaToIzena.ts @@ -0,0 +1,24 @@ +import { AlergenoIdentifikadorea } from '../models/AlergenoIdentifikadorea'; + +export function mapAlergenoIdentifikadoreaToIzena( + identifikadorea: AlergenoIdentifikadorea, +): string { + const dictionary: { [key in AlergenoIdentifikadorea]: string } = { + apioa: 'Apioa', + arraina: 'Arraina', + arrautzak: 'Arrautzak', + esnekiak: 'Esnekiak', + fruituLehorrak: 'Fruitu Lehorrak', + glutena: 'Glutena', + kakahueteak: 'Kakahueteak', + krustazeoak: 'Krustazeoak', + lupinuak: 'Lupinuak', + moluskuak: 'Moluskuak', + sesamoa: 'Sesamoa', + soja: 'Soja', + ziapea: 'Ziapea', + sulfitoak: 'Sulfitoak', + }; + + return dictionary[identifikadorea]; +} diff --git a/front/src/domain/mappers/mapAlergenoIdentifikadoreaToZenbakia.ts b/front/src/domain/mappers/mapAlergenoIdentifikadoreaToZenbakia.ts new file mode 100644 index 0000000..0b313e5 --- /dev/null +++ b/front/src/domain/mappers/mapAlergenoIdentifikadoreaToZenbakia.ts @@ -0,0 +1,24 @@ +import { AlergenoIdentifikadorea } from '../models/AlergenoIdentifikadorea'; + +export function mapAlergenoIdentifikadoreaToZenbakia( + identifikadorea: AlergenoIdentifikadorea, +): string { + const dictionary: { [key in AlergenoIdentifikadorea]: string } = { + esnekiak: '1', + arrautzak: '2', + glutena: '3', + moluskuak: '4', + krustazeoak: '5', + arraina: '6', + lupinuak: '7', + fruituLehorrak: '8', + kakahueteak: '9', + sesamoa: '10', + soja: '11', + sulfitoak: '12', + apioa: '13', + ziapea: '14', + }; + + return dictionary[identifikadorea]; +} diff --git a/front/src/domain/models/AlergenoIdentifikadorea.ts b/front/src/domain/models/AlergenoIdentifikadorea.ts new file mode 100644 index 0000000..5694880 --- /dev/null +++ b/front/src/domain/models/AlergenoIdentifikadorea.ts @@ -0,0 +1,15 @@ +export type AlergenoIdentifikadorea = + | 'apioa' + | 'arraina' + | 'arrautzak' + | 'esnekiak' + | 'fruituLehorrak' + | 'glutena' + | 'kakahueteak' + | 'krustazeoak' + | 'lupinuak' + | 'moluskuak' + | 'sesamoa' + | 'soja' + | 'sulfitoak' + | 'ziapea'; diff --git a/front/src/domain/models/Alergenoa.ts b/front/src/domain/models/Alergenoa.ts new file mode 100644 index 0000000..f2d6067 --- /dev/null +++ b/front/src/domain/models/Alergenoa.ts @@ -0,0 +1,7 @@ +import { AlergenoIdentifikadorea } from './AlergenoIdentifikadorea'; + +export interface Alergenoa { + id: AlergenoIdentifikadorea; + izena: string; + zenbakia: string; +} diff --git a/front/src/domain/models/Produktua.ts b/front/src/domain/models/Produktua.ts new file mode 100644 index 0000000..7993421 --- /dev/null +++ b/front/src/domain/models/Produktua.ts @@ -0,0 +1,10 @@ +import { Alergenoa } from './Alergenoa'; + +export interface Produktua { + id: string; + izena: string; + prezioa: number; + ekologikoa: boolean; + beganoa: boolean; + alergenoak: Alergenoa[]; +} diff --git a/front/src/pages/kafetegia.tsx b/front/src/pages/kafetegia.tsx deleted file mode 100644 index 4d855f6..0000000 --- a/front/src/pages/kafetegia.tsx +++ /dev/null @@ -1,431 +0,0 @@ -import { graphql, PageProps, useStaticQuery } from 'gatsby'; -import React from 'react'; -import { GlobalStyles } from '../ui/GlobalStyles'; - -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 BeganoaLogo from '../assets/beganoa.svg'; -import EkologikoaLogo from '../assets/ekologikoa.svg'; -import { rem } from 'polished'; - -type Alergenoa = - | 'apioa' - | 'arraina' - | 'arrautzak' - | 'esnekiak' - | 'fruituLehorrak' - | 'glutena' - | 'kakahueteak' - | 'krustazeoak' - | 'lupinuak' - | 'moluskuak' - | 'sesamoa' - | 'soja' - | 'sulfitoak' - | 'ziapea'; - -interface Produktua { - id: string; - izena: string; - prezioa: number; - ekologikoa: boolean; - beganoa: boolean; - alergenoak: { - [alergenoa in Alergenoa]: boolean; - }; -} -interface DataProps { - kafetegia: { - data: { - attributes: { - deskribapena: string; - izenburua: string; - edariBeroak: Produktua[]; - infusioEkologikoak: Produktua[]; - edariHotzak: Produktua[]; - pikatzekoak: Produktua[]; - gozoak: Produktua[]; - anizkoJogurta: Produktua; - tostadak: Produktua[]; - }; - }; - }; -} - -const Kafetegia: React.VFC = () => { - const { - kafetegia: { - data: { - attributes: { - izenburua, - deskribapena, - anizkoJogurta, - edariBeroak, - edariHotzak, - infusioEkologikoak, - pikatzekoak, - gozoak, - tostadak, - }, - }, - }, - } = useStaticQuery(graphql` - { - kafetegia { - data { - attributes { - izenburua - deskribapena - anizkoJogurta { - alergenoak { - apioa - arraina - arrautzak - esnekiak - fruituLehorrak - glutena - kakahueteak - krustazeoak - lupinuak - moluskuak - sesamoa - soja - sulfitoak - ziapea - } - beganoa - ekologikoa - izena - prezioa - id__normalized - } - edariBeroak { - id - ekologikoa - beganoa - izena - prezioa - alergenoak { - apioa - arraina - arrautzak - esnekiak - fruituLehorrak - glutena - kakahueteak - krustazeoak - lupinuak - moluskuak - sesamoa - soja - sulfitoak - ziapea - } - } - edariHotzak { - id - ekologikoa - beganoa - izena - prezioa - alergenoak { - apioa - arraina - arrautzak - esnekiak - fruituLehorrak - glutena - kakahueteak - krustazeoak - lupinuak - moluskuak - sesamoa - soja - sulfitoak - ziapea - } - } - infusioEkologikoak { - id - ekologikoa - beganoa - izena - prezioa - alergenoak { - apioa - arraina - arrautzak - esnekiak - fruituLehorrak - glutena - kakahueteak - krustazeoak - lupinuak - moluskuak - sesamoa - soja - sulfitoak - ziapea - } - } - pikatzekoak { - id - ekologikoa - beganoa - izena - prezioa - alergenoak { - apioa - arraina - arrautzak - esnekiak - fruituLehorrak - glutena - kakahueteak - krustazeoak - lupinuak - moluskuak - sesamoa - soja - sulfitoak - ziapea - } - } - gozoak { - id - ekologikoa - beganoa - izena - prezioa - alergenoak { - apioa - arraina - arrautzak - esnekiak - fruituLehorrak - glutena - kakahueteak - krustazeoak - lupinuak - moluskuak - sesamoa - soja - sulfitoak - ziapea - } - } - tostadak { - id - ekologikoa - beganoa - izena - prezioa - alergenoak { - apioa - arraina - arrautzak - esnekiak - fruituLehorrak - glutena - kakahueteak - krustazeoak - lupinuak - moluskuak - sesamoa - soja - sulfitoak - ziapea - } - } - } - } - } - } - `); - - return ( - <> - - - - - - - - - - - - - - - Edariak - - - - - - - - - - - - - - - - Jakiak - - - - - - - - - - - - - - - - - ); -}; - -const GainburuaWrapper = styled.div` - margin-bottom: ${rem(size.huge)}; -`; - -const TaldeWrapper = styled.section` - &:not(:last-child) { - margin-bottom: ${size.large}px; - } -`; - -const ZerrendaWrapper = styled.div` - &:not(:last-child) { - margin-bottom: ${size.base}px; - } -`; - -const ProduktuZerrenda: React.FC<{ - produktuZerrenda: Produktua[]; - izena: React.ReactNode; -}> = ({ produktuZerrenda, izena }) => ( - - {izena} - - {produktuZerrenda.map(produktua => ( - - - {produktua.beganoa && } - - - {produktua.ekologikoa && ( - - )} - - {produktua.izena} - - {new Intl.NumberFormat('eu-ES', { - style: 'currency', - currency: 'EUR', - }).format(produktua.prezioa)} - - - ))} - -); - -const ProduktuTaula = styled.table` - width: 100%; - table-layout: fixed; - overflow-wrap: break-word; -`; - -const Ezaugarria = styled.td` - width: ${size.medium}px; - height: ${size.medium}px; - padding: 0 ${size.xtiny}px; - vertical-align: top; -`; - -const Izena = styled.td` - text-align: left; - font-weight: ${fontWeight.regular}; - padding: 0 ${size.xtiny}px; - vertical-align: top; -`; - -const Prezioa = styled.td` - min-width: ${size.medium}px; - text-align: right; - font-weight: ${fontWeight.regular}; - padding: 0 ${size.xtiny}px; - vertical-align: top; -`; - -const ProduktuMota = styled.caption` - ${font.large()}; - text-align: left; - padding-left: 67px; - margin-bottom: ${rem(size.mini)}; - - &::after { - content: '.'; - } -`; - -const IzenburuWrapper = styled.div` - display: flex; - justify-content: flex-end; - align-items: center; - margin-bottom: ${rem(size.medium)}; -`; - -const Marra = styled.div` - /* altuera erabiliko den letraren berdina da */ - height: ${rem(41.83)}; - flex-grow: 1; - box-shadow: inset 0px -3px 0px 0px ${colors.beltza}; - margin-right: ${rem(size.tiny)}; -`; - -const Izenburua = styled.h1` - text-align: right; - vertical-align: bottom; - - &:after { - content: '.'; - } - - ${font.gargantuan()}; -`; - -export default Kafetegia; diff --git a/front/src/pages/kafetegia/KafetegiaData.ts b/front/src/pages/kafetegia/KafetegiaData.ts new file mode 100644 index 0000000..8ad5975 --- /dev/null +++ b/front/src/pages/kafetegia/KafetegiaData.ts @@ -0,0 +1,13 @@ +import { Produktua } from '../../domain/models/Produktua'; + +export interface KafetegiaData { + deskribapena: string; + izenburua: string; + edariBeroak: Produktua[]; + infusioEkologikoak: Produktua[]; + edariHotzak: Produktua[]; + pikatzekoak: Produktua[]; + gozoak: Produktua[]; + anizkoJogurta: Produktua; + tostadak: Produktua[]; +} diff --git a/front/src/pages/kafetegia/components/AlergenoLegenda/AlergenoLegenda.tsx b/front/src/pages/kafetegia/components/AlergenoLegenda/AlergenoLegenda.tsx new file mode 100644 index 0000000..c3433f7 --- /dev/null +++ b/front/src/pages/kafetegia/components/AlergenoLegenda/AlergenoLegenda.tsx @@ -0,0 +1,126 @@ +import React from 'react'; + +import { AlergenoIdentifikadorea } from '../../../../domain/models/AlergenoIdentifikadorea'; +import Esnekiak from './assets/alergenoak/esnekiak.svg'; +import Arrautzak from './assets/alergenoak/arrautzak.svg'; +import Glutena from './assets/alergenoak/glutena.svg'; +import Moluskuak from './assets/alergenoak/moluskuak.svg'; +import Krustazeoak from './assets/alergenoak/krustazeoak.svg'; +import Arraina from './assets/alergenoak/arraina.svg'; +import Lupinuak from './assets/alergenoak/lupinuak.svg'; +import FruituLehorrak from './assets/alergenoak/fruituLehorrak.svg'; +import Kakahueteak from './assets/alergenoak/kakahueteak.svg'; +import Sesamoa from './assets/alergenoak/sesamoa.svg'; +import Soja from './assets/alergenoak/soja.svg'; +import Sulfitoak from './assets/alergenoak/sulfitoak.svg'; +import Apioa from './assets/alergenoak/apioa.svg'; +import Ziapea from './assets/alergenoak/ziapea.svg'; +import styled from 'styled-components'; +import { rem } from 'polished'; +import { + breakpoints, + colors, + fontWeight, + media, + size, +} from '../../../../ui/theme'; +import { mapAlergenoIdentifikadoreaToIzena } from '../../../../domain/mappers/mapAlergenoIdentifikadoreaToIzena'; +import { mapAlergenoIdentifikadoreaToZenbakia } from '../../../../domain/mappers/mapAlergenoIdentifikadoreaToZenbakia'; +import { useMediaQuery } from 'react-responsive'; + +const alergenoakOrdenaturik: AlergenoIdentifikadorea[] = [ + 'esnekiak', + 'arrautzak', + 'glutena', + 'moluskuak', + 'krustazeoak', + 'arraina', + 'lupinuak', + 'fruituLehorrak', + 'kakahueteak', + 'sesamoa', + 'soja', + 'sulfitoak', + 'apioa', + 'ziapea', +]; + +export const AlergenoLegenda: React.VFC = () => { + return ( + + {alergenoakOrdenaturik.map(alergenoa => ( + + + + + + {mapAlergenoIdentifikadoreaToIzena(alergenoa)} + {mapAlergenoIdentifikadoreaToZenbakia(alergenoa)} + + ))} + + ); +}; + +const Izena = styled.div` + margin-bottom: ${rem(size.tiny)}; + font-weight: ${fontWeight.bold}; + text-align: center; +`; + +const Zenbakia = styled.div` + font-weight: ${fontWeight.bold}; + text-align: center; + color: ${colors.morea}; +`; + +const AlergenoWrapper = styled.div` + display: flex; + flex-direction: column; + justify-content: center; +`; + +const Wrapper = styled.div` + width: 100%; + display: grid; + grid-column-gap: ${rem(size.tiny)}; + grid-row-gap: ${rem(size.base)}; + + grid-template-columns: repeat(3, 1fr); + ${media.tablet` + grid-template-columns: repeat(5, 1fr); + `}; +`; + +const LogoWrapper = styled.div` + margin-bottom: ${rem(size.mini)}; + display: flex; + align-items: flex-end; + justify-content: center; +`; + +const AlergenoLogoa: React.VFC<{ alergenoId: AlergenoIdentifikadorea }> = ({ + alergenoId, +}) => { + const isAboveDesktop = useMediaQuery({ minWidth: breakpoints.desktop }); + const height = rem(isAboveDesktop ? size.huge : size.medium); + + const alergenoIdToLogo: { [id in AlergenoIdentifikadorea]: React.ReactNode } = + { + esnekiak: , + arrautzak: , + glutena: , + moluskuak: , + krustazeoak: , + arraina: , + lupinuak: , + fruituLehorrak: , + kakahueteak: , + sesamoa: , + soja: , + sulfitoak: , + apioa: , + ziapea: , + }; + return <>{alergenoIdToLogo[alergenoId]}; +}; diff --git a/front/src/pages/kafetegia/components/AlergenoLegenda/assets/alergenoak/apioa.svg b/front/src/pages/kafetegia/components/AlergenoLegenda/assets/alergenoak/apioa.svg new file mode 100644 index 0000000..bc8c4c9 --- /dev/null +++ b/front/src/pages/kafetegia/components/AlergenoLegenda/assets/alergenoak/apioa.svg @@ -0,0 +1,72 @@ + + + + + + image/svg+xml + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/front/src/pages/kafetegia/components/AlergenoLegenda/assets/alergenoak/arraina.svg b/front/src/pages/kafetegia/components/AlergenoLegenda/assets/alergenoak/arraina.svg new file mode 100644 index 0000000..92b6086 --- /dev/null +++ b/front/src/pages/kafetegia/components/AlergenoLegenda/assets/alergenoak/arraina.svg @@ -0,0 +1,30 @@ + + + + + + image/svg+xml + + + + + + + + + + + + + + + + + + diff --git a/front/src/pages/kafetegia/components/AlergenoLegenda/assets/alergenoak/arrautzak.svg b/front/src/pages/kafetegia/components/AlergenoLegenda/assets/alergenoak/arrautzak.svg new file mode 100644 index 0000000..b846579 --- /dev/null +++ b/front/src/pages/kafetegia/components/AlergenoLegenda/assets/alergenoak/arrautzak.svg @@ -0,0 +1,27 @@ + + + + + + image/svg+xml + + + + + + + + + + + + + + + diff --git a/front/src/pages/kafetegia/components/AlergenoLegenda/assets/alergenoak/esnekiak.svg b/front/src/pages/kafetegia/components/AlergenoLegenda/assets/alergenoak/esnekiak.svg new file mode 100644 index 0000000..26a6ac8 --- /dev/null +++ b/front/src/pages/kafetegia/components/AlergenoLegenda/assets/alergenoak/esnekiak.svg @@ -0,0 +1,50 @@ + + + + + + image/svg+xml + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/front/src/pages/kafetegia/components/AlergenoLegenda/assets/alergenoak/fruituLehorrak.svg b/front/src/pages/kafetegia/components/AlergenoLegenda/assets/alergenoak/fruituLehorrak.svg new file mode 100644 index 0000000..d41e270 --- /dev/null +++ b/front/src/pages/kafetegia/components/AlergenoLegenda/assets/alergenoak/fruituLehorrak.svg @@ -0,0 +1,28 @@ + + + + + + image/svg+xml + + + + + + + + + + + + + + + + diff --git a/front/src/pages/kafetegia/components/AlergenoLegenda/assets/alergenoak/glutena.svg b/front/src/pages/kafetegia/components/AlergenoLegenda/assets/alergenoak/glutena.svg new file mode 100644 index 0000000..72fbefd --- /dev/null +++ b/front/src/pages/kafetegia/components/AlergenoLegenda/assets/alergenoak/glutena.svg @@ -0,0 +1,67 @@ + + + + + + image/svg+xml + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/front/src/pages/kafetegia/components/AlergenoLegenda/assets/alergenoak/kakahueteak.svg b/front/src/pages/kafetegia/components/AlergenoLegenda/assets/alergenoak/kakahueteak.svg new file mode 100644 index 0000000..74db323 --- /dev/null +++ b/front/src/pages/kafetegia/components/AlergenoLegenda/assets/alergenoak/kakahueteak.svg @@ -0,0 +1,57 @@ + + + + + + image/svg+xml + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/front/src/pages/kafetegia/components/AlergenoLegenda/assets/alergenoak/krustazeoak.svg b/front/src/pages/kafetegia/components/AlergenoLegenda/assets/alergenoak/krustazeoak.svg new file mode 100644 index 0000000..a8f73c1 --- /dev/null +++ b/front/src/pages/kafetegia/components/AlergenoLegenda/assets/alergenoak/krustazeoak.svg @@ -0,0 +1,25 @@ + + + + + + image/svg+xml + + + + + + + + + + + + + diff --git a/front/src/pages/kafetegia/components/AlergenoLegenda/assets/alergenoak/lupinuak.svg b/front/src/pages/kafetegia/components/AlergenoLegenda/assets/alergenoak/lupinuak.svg new file mode 100644 index 0000000..69629ce --- /dev/null +++ b/front/src/pages/kafetegia/components/AlergenoLegenda/assets/alergenoak/lupinuak.svg @@ -0,0 +1,29 @@ + + + + + + image/svg+xml + + + + + + + + + + + + + + + + + diff --git a/front/src/pages/kafetegia/components/AlergenoLegenda/assets/alergenoak/moluskuak.svg b/front/src/pages/kafetegia/components/AlergenoLegenda/assets/alergenoak/moluskuak.svg new file mode 100644 index 0000000..ed8fc00 --- /dev/null +++ b/front/src/pages/kafetegia/components/AlergenoLegenda/assets/alergenoak/moluskuak.svg @@ -0,0 +1,32 @@ + + + + + + image/svg+xml + + + + + + + + + + + + + + + + + + + + diff --git a/front/src/pages/kafetegia/components/AlergenoLegenda/assets/alergenoak/sesamoa.svg b/front/src/pages/kafetegia/components/AlergenoLegenda/assets/alergenoak/sesamoa.svg new file mode 100644 index 0000000..e43703f --- /dev/null +++ b/front/src/pages/kafetegia/components/AlergenoLegenda/assets/alergenoak/sesamoa.svg @@ -0,0 +1,27 @@ + + + + + + image/svg+xml + + + + + + + + + + + + + + + diff --git a/front/src/pages/kafetegia/components/AlergenoLegenda/assets/alergenoak/soja.svg b/front/src/pages/kafetegia/components/AlergenoLegenda/assets/alergenoak/soja.svg new file mode 100644 index 0000000..057a353 --- /dev/null +++ b/front/src/pages/kafetegia/components/AlergenoLegenda/assets/alergenoak/soja.svg @@ -0,0 +1,36 @@ + + + + + + image/svg+xml + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/front/src/pages/kafetegia/components/AlergenoLegenda/assets/alergenoak/sulfitoak.svg b/front/src/pages/kafetegia/components/AlergenoLegenda/assets/alergenoak/sulfitoak.svg new file mode 100644 index 0000000..7e95fbd --- /dev/null +++ b/front/src/pages/kafetegia/components/AlergenoLegenda/assets/alergenoak/sulfitoak.svg @@ -0,0 +1,31 @@ + + + + + + image/svg+xml + + + + + + + + + + + + + + + + + + + diff --git a/front/src/pages/kafetegia/components/AlergenoLegenda/assets/alergenoak/ziapea.svg b/front/src/pages/kafetegia/components/AlergenoLegenda/assets/alergenoak/ziapea.svg new file mode 100644 index 0000000..8e24dfa --- /dev/null +++ b/front/src/pages/kafetegia/components/AlergenoLegenda/assets/alergenoak/ziapea.svg @@ -0,0 +1,27 @@ + + + + + + image/svg+xml + + + + + + + + + + + + + + + diff --git a/front/src/pages/kafetegia/components/AlergenoLegenda/index.ts b/front/src/pages/kafetegia/components/AlergenoLegenda/index.ts new file mode 100644 index 0000000..2aa0079 --- /dev/null +++ b/front/src/pages/kafetegia/components/AlergenoLegenda/index.ts @@ -0,0 +1 @@ +export { AlergenoLegenda } from './AlergenoLegenda'; diff --git a/front/src/pages/kafetegia/index.tsx b/front/src/pages/kafetegia/index.tsx new file mode 100644 index 0000000..3b37b36 --- /dev/null +++ b/front/src/pages/kafetegia/index.tsx @@ -0,0 +1,235 @@ +import { PageProps } from 'gatsby'; +import React from 'react'; +import { GlobalStyles } from '../../ui/GlobalStyles'; + +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 BeganoaLogo from '../../assets/beganoa.svg'; +import EkologikoaLogo from '../../assets/ekologikoa.svg'; +import { rem } from 'polished'; +import { Produktua } from '../../domain/models/Produktua'; +import { useKafetegiaData } from './useKafetegiaData'; +import { AlergenoLegenda } from './components/AlergenoLegenda'; + +const Kafetegia: React.VFC = () => { + const { + izenburua, + deskribapena, + anizkoJogurta, + edariBeroak, + edariHotzak, + infusioEkologikoak, + pikatzekoak, + gozoak, + tostadak, + } = useKafetegiaData(); + + return ( + <> + + + + + + + + + + + + + + Edariak + + + + + + + + + + + + + + + + Jakiak + + + + + + + + + + + + + + + + + + + Alergenoak + + + + + + + + ); +}; + +const ContentWrapper = styled.div` + padding: ${size.huge}px 0; +`; + +const TaldeWrapper = styled.section` + &:not(:last-child) { + margin-bottom: ${size.large}px; + } +`; + +const ZerrendaWrapper = styled.div` + &:not(:last-child) { + margin-bottom: ${size.base}px; + } +`; + +const ProduktuZerrenda: React.FC<{ + produktuZerrenda: Produktua[]; + izena: React.ReactNode; +}> = ({ produktuZerrenda, izena }) => ( + + {izena} + + {produktuZerrenda.map(produktua => ( + + + {produktua.beganoa && } + + + {produktua.ekologikoa && ( + + )} + + + {produktua.izena}{' '} + {produktua.alergenoak.map(alergenoa => ( + {alergenoa.zenbakia} + ))} + + + {new Intl.NumberFormat('eu-ES', { + style: 'currency', + currency: 'EUR', + }).format(produktua.prezioa)} + + + ))} + +); + +const Alergenoa = styled.span` + color: ${colors.morea}; + font-weight: ${fontWeight.bold}; + + &:not(:last-child)::after { + content: ', '; + } +`; + +const ProduktuTaula = styled.table` + width: 100%; + table-layout: fixed; + overflow-wrap: break-word; +`; + +const Ezaugarria = styled.td` + width: ${size.medium}px; + height: ${size.medium}px; + padding: 0 ${size.xtiny}px; + vertical-align: top; +`; + +const Izena = styled.td` + text-align: left; + font-weight: ${fontWeight.regular}; + padding: 0 ${size.xtiny}px; + vertical-align: top; +`; + +const Prezioa = styled.td` + width: ${size.huge}px; + text-align: right; + font-weight: ${fontWeight.regular}; + padding: 0 ${size.xtiny}px; + vertical-align: top; +`; + +const ProduktuMota = styled.caption` + ${font.large()}; + text-align: left; + padding-left: 67px; + margin-bottom: ${rem(size.mini)}; + + &::after { + content: '.'; + } +`; + +const IzenburuWrapper = styled.div` + display: flex; + justify-content: flex-end; + align-items: center; + margin-bottom: ${rem(size.medium)}; +`; + +const Marra = styled.div` + /* altuera erabiliko den letraren berdina da */ + height: ${rem(41.83)}; + flex-grow: 1; + box-shadow: inset 0px -3px 0px 0px ${colors.beltza}; + margin-right: ${rem(size.tiny)}; +`; + +const Izenburua = styled.h1` + text-align: right; + vertical-align: bottom; + + &:after { + content: '.'; + } + + ${font.gargantuan()}; +`; + +export default Kafetegia; diff --git a/front/src/pages/kafetegia/useKafetegiaData.ts b/front/src/pages/kafetegia/useKafetegiaData.ts new file mode 100644 index 0000000..18c8668 --- /dev/null +++ b/front/src/pages/kafetegia/useKafetegiaData.ts @@ -0,0 +1,226 @@ +import { graphql, useStaticQuery } from 'gatsby'; +import { ProduktuaDTO } from '../../domain/dtos/ProduktuaDTO'; +import { produktuaFactory } from '../../domain/factories/produktuaFactory'; +import { KafetegiaData } from './KafetegiaData'; + +interface DataProps { + kafetegia: { + data: { + attributes: { + deskribapena: string; + izenburua: string; + edariBeroak: ProduktuaDTO[]; + infusioEkologikoak: ProduktuaDTO[]; + edariHotzak: ProduktuaDTO[]; + pikatzekoak: ProduktuaDTO[]; + gozoak: ProduktuaDTO[]; + anizkoJogurta: ProduktuaDTO; + tostadak: ProduktuaDTO[]; + }; + }; + }; +} + +export function useKafetegiaData(): KafetegiaData { + const { + kafetegia: { + data: { + attributes: { + izenburua, + deskribapena, + anizkoJogurta, + edariBeroak, + edariHotzak, + infusioEkologikoak, + pikatzekoak, + gozoak, + tostadak, + }, + }, + }, + } = useStaticQuery(graphql` + { + kafetegia { + data { + attributes { + izenburua + deskribapena + anizkoJogurta { + alergenoak { + apioa + arraina + arrautzak + esnekiak + fruituLehorrak + glutena + kakahueteak + krustazeoak + lupinuak + moluskuak + sesamoa + soja + sulfitoak + ziapea + } + beganoa + ekologikoa + izena + prezioa + id__normalized + } + edariBeroak { + id + ekologikoa + beganoa + izena + prezioa + alergenoak { + apioa + arraina + arrautzak + esnekiak + fruituLehorrak + glutena + kakahueteak + krustazeoak + lupinuak + moluskuak + sesamoa + soja + sulfitoak + ziapea + } + } + edariHotzak { + id + ekologikoa + beganoa + izena + prezioa + alergenoak { + apioa + arraina + arrautzak + esnekiak + fruituLehorrak + glutena + kakahueteak + krustazeoak + lupinuak + moluskuak + sesamoa + soja + sulfitoak + ziapea + } + } + infusioEkologikoak { + id + ekologikoa + beganoa + izena + prezioa + alergenoak { + apioa + arraina + arrautzak + esnekiak + fruituLehorrak + glutena + kakahueteak + krustazeoak + lupinuak + moluskuak + sesamoa + soja + sulfitoak + ziapea + } + } + pikatzekoak { + id + ekologikoa + beganoa + izena + prezioa + alergenoak { + apioa + arraina + arrautzak + esnekiak + fruituLehorrak + glutena + kakahueteak + krustazeoak + lupinuak + moluskuak + sesamoa + soja + sulfitoak + ziapea + } + } + gozoak { + id + ekologikoa + beganoa + izena + prezioa + alergenoak { + apioa + arraina + arrautzak + esnekiak + fruituLehorrak + glutena + kakahueteak + krustazeoak + lupinuak + moluskuak + sesamoa + soja + sulfitoak + ziapea + } + } + tostadak { + id + ekologikoa + beganoa + izena + prezioa + alergenoak { + apioa + arraina + arrautzak + esnekiak + fruituLehorrak + glutena + kakahueteak + krustazeoak + lupinuak + moluskuak + sesamoa + soja + sulfitoak + ziapea + } + } + } + } + } + } + `); + + return { + izenburua, + deskribapena, + anizkoJogurta: produktuaFactory(anizkoJogurta), + edariBeroak: edariBeroak.map(produktuaFactory), + edariHotzak: edariHotzak.map(produktuaFactory), + infusioEkologikoak: infusioEkologikoak.map(produktuaFactory), + pikatzekoak: pikatzekoak.map(produktuaFactory), + gozoak: gozoak.map(produktuaFactory), + tostadak: tostadak.map(produktuaFactory), + }; +} diff --git a/front/src/ui/theme/fontWeight.ts b/front/src/ui/theme/fontWeight.ts index 753603c..fcf8836 100644 --- a/front/src/ui/theme/fontWeight.ts +++ b/front/src/ui/theme/fontWeight.ts @@ -1,4 +1,4 @@ export const fontWeight = { regular: 300, - bold: 600, + bold: 800, };