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

Kafetegia css modulesera pasatzen du (#13)

Browse Source 
* feat: styled components hasieratik kentzen du

* refactor: extract component

* refactor: move to new file

* feat: kafetegia css modulesera pasatzen du

* feat: produktu zerrenda css modulesera pasatzen du
This commit is contained in:
Aitor Urrutia
2023-12-25 20:49:33 +01:00
committed by GitHub
parent 9aa9b67228
commit 7cce0ccdd1
11 changed files with 266 additions and 224 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
front/src/pages/index.tsx
View File

@@ -3,7 +3,6 @@ import React from 'react';
import { graphql, PageProps, useStaticQuery } from 'gatsby';
import { SEO } from '../components/SEO';
import { GlobalStyles } from '../ui/GlobalStyles';
import { Hasiera } from '../views/Hasiera/Hasiera';
import { HasieraContent } from '../views/Hasiera/HasieraContent';
@@ -30,8 +29,6 @@ const IndexPage: React.FC<PageProps> = ({ location }) => {
location={location}
/>
<GlobalStyles />
<Hasiera content={strapiHasiera} />
</>
);

229
front/src/pages/kafetegia.tsx
View File

@@ -1,236 +1,25 @@
import React from 'react';
import { PageProps } from 'gatsby';
import { rem } from 'polished';
import styled from 'styled-components';
import BeganoaLogo from '../assets/beganoa.svg';
import EkologikoaLogo from '../assets/ekologikoa.svg';
import { AlergenoLegenda } from '../components/AlergenoLegenda';
import { Container } from '../components/Container';
import { Gainburua } from '../components/Gainburua';
import { Oina } from '../components/Oina';
import { SEO } from '../components/SEO';
import { produktuaFactory } from '../domain/factories/produktuaFactory';
import { Produktua } from '../domain/models/Produktua';
import { GlobalStyles } from '../ui/GlobalStyles';
import { colors, font, fontWeight, media, size } from '../ui/theme';
import { useKafetegiaData } from '../viewQueries/useKafetegiaData';
import { Kafetegia } from '../views/Kafetegia';
const Kafetegia: React.FC<PageProps> = ({ location }) => {
const { izenburua, deskribapena, menua } = useKafetegiaData();
// oraingoz menuak alergenorik ez duenez, ezkutatuko dugu
// TODO modu dinamikoan aldatu balio hau
const hasAlergenoak = false;
const KafetegiaPage: React.FC<PageProps> = ({ location }) => {
const content = useKafetegiaData();
return (
<>
<SEO title={izenburua} description={deskribapena} location={location} />
<GlobalStyles />
<Gainburua
atala="kafetegia"
izenburua={izenburua}
deskribapena={deskribapena}
<SEO
title={content.izenburua}
description={content.deskribapena}
location={location}
/>
<ContentWrapper id="edukia">
<Container>
{menua.map(konponentea => {
if (
konponentea.konponentea ===
'StrapiComponentKafetegiaProduktuTaldea'
) {
return (
<ZerrendaWrapper key={konponentea.id}>
<ProduktuZerrenda
izena={konponentea.izenburua}
produktuZerrenda={konponentea.produktuak.map(
produktuaFactory,
)}
/>
</ZerrendaWrapper>
);
}
if (
konponentea.konponentea === 'StrapiComponentKafetegiaIzenburua'
) {
return (
<IzenburuWrapper key={konponentea.id}>
<Marra />
<Izenburua>{konponentea.izenburuBalioa}</Izenburua>
</IzenburuWrapper>
);
}
})}
{hasAlergenoak && (
<TaldeWrapper>
<IzenburuWrapper>
<Marra />
<Izenburua>Alergenoak</Izenburua>
</IzenburuWrapper>
<AlergenoLegenda />
</TaldeWrapper>
)}
<OnEgin>
<p>On egin!</p>
</OnEgin>
</Container>
</ContentWrapper>
<Oina />
<Kafetegia content={content} />
</>
);
};
const OnEgin = styled.div`
text-align: center;
${font.gargantuan()};
`;
const ContentWrapper = styled.div`
padding: ${size.huge}px 0;
`;
const TaldeWrapper = styled.section`
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 }) => (
<ProduktuTaula>
{izena && <ProduktuMota>{izena}</ProduktuMota>}
<tbody>
{produktuZerrenda.map(produktua => (
<tr key={produktua.id}>
<Ezaugarria>
{produktua.beganoa && <BeganoaLogo title="Produktu beganoa" />}
</Ezaugarria>
<Ezaugarria>
{produktua.ekologikoa && (
<EkologikoaLogo title="Produktu ekologikoa" />
)}
</Ezaugarria>
<Izena scope="row">
{produktua.izena}{' '}
{produktua.alergenoak.map(alergenoa => (
<Alergenoa>{alergenoa.zenbakia}</Alergenoa>
))}
</Izena>
<Prezioa>
{new Intl.NumberFormat('eu-ES', {
style: 'currency',
currency: 'EUR',
}).format(produktua.prezioa)}
</Prezioa>
</tr>
))}
</tbody>
</ProduktuTaula>
);
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;
border-collapse: separate;
border-spacing: 0 ${size.tiny}px;
${media.tablet`
border-spacing: 0 ${size.xtiny}px;
`}
`;
const Ezaugarria = styled.td`
width: ${size.base}px;
height: ${size.base}px;
padding: 0 ${size.xtiny}px;
vertical-align: top;
${media.tablet`
width: ${size.medium}px;
height: ${size.medium}px;
`}
`;
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: 52px;
margin-bottom: ${rem(size.mini)};
&::after {
content: '.';
}
${media.tablet`
padding-left: 67px;
`}
`;
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;
export default KafetegiaPage;