Kafetegirako atalaren lehen bertsioa sortzen du (#1)
* feat: backean kafetegia sortzen du * helbidea kentzen du * feat: kafetegirako desktop bista sortzen du * Nabigazioa sortzen du * chore: tsconfig fitxategia sortzen du * refactor: extract component * feat: kolorea ematen dio atal bakoitzari * chore: koloreak sortzen ditu * fix: nabigazioa konpontzen du * feat: mugikor menua sortzen du * fix: tipografia aldatzen du * feat: kafetegiko menua margotzen du * feat: produktu zerrenda erakusten du
This commit is contained in:
Aitor Urrutia
GitHub
@@ -1,15 +1,9 @@
|
||||
import { graphql, PageProps, useStaticQuery } from 'gatsby';
|
||||
import { rem } from 'polished';
|
||||
import React from 'react';
|
||||
import styled from 'styled-components';
|
||||
import { Container } from '../components/Container';
|
||||
import { GlobalStyles } from '../ui/GlobalStyles';
|
||||
import { font, media, size } from '../ui/theme';
|
||||
import LabaLogo from '../assets/logo.svg';
|
||||
import InstagramLogo from '../assets/instagram.svg';
|
||||
import TwitterLogo from '../assets/twitter.svg';
|
||||
|
||||
import { Helmet } from 'react-helmet';
|
||||
import { Gainburua } from '../components/Gainburua';
|
||||
|
||||
interface DataProps {
|
||||
strapiHasiera: {
|
||||
@@ -38,7 +32,10 @@ const IndexPage: React.VFC<PageProps> = () => {
|
||||
|
||||
return (
|
||||
<>
|
||||
<Helmet title="Laba gara | Laba" htmlAttributes={{ lang: 'eu' }}>
|
||||
<Helmet
|
||||
title={`${strapiHasiera.data.attributes.izenburua} | Laba`}
|
||||
htmlAttributes={{ lang: 'eu' }}
|
||||
>
|
||||
<meta
|
||||
name="description"
|
||||
content={strapiHasiera.data.attributes.deskribapena}
|
||||
@@ -47,150 +44,13 @@ const IndexPage: React.VFC<PageProps> = () => {
|
||||
|
||||
<GlobalStyles />
|
||||
|
||||
<Gainburua>
|
||||
<LogoWrapper>
|
||||
<Logo title="Laba gara" />
|
||||
</LogoWrapper>
|
||||
|
||||
<Kontaktua>
|
||||
<Helbidea>
|
||||
<p>Gazteluko plaza 2</p>
|
||||
<p>Iruñea</p>
|
||||
</Helbidea>
|
||||
|
||||
<SareSozialak>
|
||||
<SareSoziala>
|
||||
<a href="https://twitter.com/labasarea/">
|
||||
<Twitter tabIndex="0" role="link" title="Laba Twitterren" />
|
||||
</a>
|
||||
</SareSoziala>
|
||||
|
||||
<SareSoziala>
|
||||
<a href="https://www.instagram.com/labasarea/">
|
||||
<Instagram tabIndex="0" role="link" title="Laba Instagramen" />
|
||||
</a>
|
||||
</SareSoziala>
|
||||
</SareSozialak>
|
||||
</Kontaktua>
|
||||
</Gainburua>
|
||||
|
||||
<Container>
|
||||
<main>
|
||||
<Deskribapena>
|
||||
{strapiHasiera.data.attributes.deskribapena}
|
||||
</Deskribapena>
|
||||
|
||||
<IzenburuWrapper>
|
||||
<Marra />
|
||||
<Izenburua>{strapiHasiera.data.attributes.izenburua}</Izenburua>
|
||||
</IzenburuWrapper>
|
||||
</main>
|
||||
</Container>
|
||||
<Gainburua
|
||||
atala="hasiera"
|
||||
izenburua={strapiHasiera.data.attributes.izenburua}
|
||||
deskribapena={strapiHasiera.data.attributes.deskribapena}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
const LogoWrapper = styled.div`
|
||||
width: ${rem(size.large)};
|
||||
|
||||
${media.tablet`
|
||||
width: ${rem(size.huge)};
|
||||
`}
|
||||
`;
|
||||
|
||||
const Kontaktua = styled.div`
|
||||
display: flex;
|
||||
`;
|
||||
|
||||
const SareSoziala = styled.li`
|
||||
width: ${rem(size.base)};
|
||||
height: ${rem(size.base)};
|
||||
:not(:last-child) {
|
||||
margin-right: ${rem(size.small)};
|
||||
}
|
||||
`;
|
||||
|
||||
const Instagram = styled(InstagramLogo)`
|
||||
width: ${rem(size.base)};
|
||||
height: ${rem(size.base)};
|
||||
path {
|
||||
fill: white;
|
||||
}
|
||||
`;
|
||||
|
||||
const Twitter = styled(TwitterLogo)`
|
||||
width: ${rem(size.base)};
|
||||
height: ${rem(size.base)};
|
||||
path {
|
||||
fill: white;
|
||||
}
|
||||
`;
|
||||
|
||||
const Logo = styled(LabaLogo)`
|
||||
path {
|
||||
fill: white;
|
||||
}
|
||||
`;
|
||||
|
||||
const SareSozialak = styled.ul`
|
||||
display: flex;
|
||||
align-items: center;
|
||||
list-style-type: none;
|
||||
`;
|
||||
|
||||
const Helbidea = styled.address`
|
||||
border-right: 3px solid white;
|
||||
padding-right: ${rem(size.small)};
|
||||
margin-right: ${rem(size.small)};
|
||||
${font.tiny()};
|
||||
`;
|
||||
|
||||
const Gainburua = styled.header`
|
||||
padding: ${rem(size.tiny)};
|
||||
display: flex;
|
||||
align-items: start;
|
||||
justify-content: space-between;
|
||||
margin-bottom: ${rem(size.base)};
|
||||
|
||||
${media.tablet`
|
||||
padding: ${rem(size.large)};
|
||||
`};
|
||||
`;
|
||||
|
||||
const Deskribapena = styled.p`
|
||||
margin-bottom: ${rem(size.xlarge)};
|
||||
text-align: justify;
|
||||
|
||||
${font.base()};
|
||||
|
||||
${media.tablet`
|
||||
${font.large()};
|
||||
`};
|
||||
`;
|
||||
|
||||
const IzenburuWrapper = styled.div`
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
`;
|
||||
|
||||
const Marra = styled.div`
|
||||
/* altuera erabiliko den letraren berdina da */
|
||||
height: ${rem(41.83)};
|
||||
flex-grow: 1;
|
||||
box-shadow: inset 0px -3px 0px 0px white;
|
||||
margin-right: ${rem(size.tiny)};
|
||||
`;
|
||||
|
||||
const Izenburua = styled.h1`
|
||||
text-align: right;
|
||||
vertical-align: bottom;
|
||||
|
||||
&:after {
|
||||
content: '.';
|
||||
}
|
||||
|
||||
${font.gargantuan()};
|
||||
`;
|
||||
|
||||
export default IndexPage;
|
||||
|
||||
431
front/src/pages/kafetegia.tsx
Normal file
431
front/src/pages/kafetegia.tsx
Normal file
@@ -0,0 +1,431 @@
|
||||
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<PageProps> = () => {
|
||||
const {
|
||||
kafetegia: {
|
||||
data: {
|
||||
attributes: {
|
||||
izenburua,
|
||||
deskribapena,
|
||||
anizkoJogurta,
|
||||
edariBeroak,
|
||||
edariHotzak,
|
||||
infusioEkologikoak,
|
||||
pikatzekoak,
|
||||
gozoak,
|
||||
tostadak,
|
||||
},
|
||||
},
|
||||
},
|
||||
} = useStaticQuery<DataProps>(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 (
|
||||
<>
|
||||
<Helmet title={`${izenburua} | Laba`} htmlAttributes={{ lang: 'eu' }}>
|
||||
<meta name="description" content={deskribapena} />
|
||||
</Helmet>
|
||||
|
||||
<GlobalStyles />
|
||||
|
||||
<GainburuaWrapper>
|
||||
<Gainburua
|
||||
atala="kafetegia"
|
||||
izenburua={izenburua}
|
||||
deskribapena={deskribapena}
|
||||
/>
|
||||
</GainburuaWrapper>
|
||||
|
||||
<Container>
|
||||
<TaldeWrapper>
|
||||
<IzenburuWrapper>
|
||||
<Marra />
|
||||
<Izenburua>Edariak</Izenburua>
|
||||
</IzenburuWrapper>
|
||||
<ZerrendaWrapper>
|
||||
<ProduktuZerrenda
|
||||
izena="Edari beroak"
|
||||
produktuZerrenda={edariBeroak}
|
||||
/>
|
||||
</ZerrendaWrapper>
|
||||
<ZerrendaWrapper>
|
||||
<ProduktuZerrenda
|
||||
izena="Infusio ekologikoak"
|
||||
produktuZerrenda={infusioEkologikoak}
|
||||
/>
|
||||
</ZerrendaWrapper>
|
||||
<ZerrendaWrapper>
|
||||
<ProduktuZerrenda
|
||||
izena="Edari hotzak"
|
||||
produktuZerrenda={edariHotzak}
|
||||
/>
|
||||
</ZerrendaWrapper>
|
||||
</TaldeWrapper>
|
||||
|
||||
<TaldeWrapper>
|
||||
<IzenburuWrapper>
|
||||
<Marra />
|
||||
<Izenburua>Jakiak</Izenburua>
|
||||
</IzenburuWrapper>
|
||||
<ZerrendaWrapper>
|
||||
<ProduktuZerrenda
|
||||
izena="Pikatzekoak"
|
||||
produktuZerrenda={pikatzekoak}
|
||||
/>
|
||||
</ZerrendaWrapper>
|
||||
<ZerrendaWrapper>
|
||||
<ProduktuZerrenda izena="Tostadak" produktuZerrenda={tostadak} />
|
||||
</ZerrendaWrapper>
|
||||
<ZerrendaWrapper>
|
||||
<ProduktuZerrenda izena="Gozoak" produktuZerrenda={gozoak} />
|
||||
</ZerrendaWrapper>
|
||||
<ZerrendaWrapper>
|
||||
<ProduktuZerrenda
|
||||
izena="Anizko Jogurta"
|
||||
produktuZerrenda={[anizkoJogurta]}
|
||||
/>
|
||||
</ZerrendaWrapper>
|
||||
</TaldeWrapper>
|
||||
</Container>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
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 }) => (
|
||||
<ProduktuTaula>
|
||||
<ProduktuMota>{izena}</ProduktuMota>
|
||||
|
||||
{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}</Izena>
|
||||
<Prezioa>
|
||||
{new Intl.NumberFormat('eu-ES', {
|
||||
style: 'currency',
|
||||
currency: 'EUR',
|
||||
}).format(produktua.prezioa)}
|
||||
</Prezioa>
|
||||
</tr>
|
||||
))}
|
||||
</ProduktuTaula>
|
||||
);
|
||||
|
||||
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;
|
||||
Reference in New Issue
Block a user