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
@@ -6,16 +6,20 @@ import { size } from '../ui/theme/size';
|
||||
export const Container = styled.div`
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
padding-left: ${rem(size.tiny)};
|
||||
padding-right: ${rem(size.tiny)};
|
||||
padding-left: ${rem(size.base)};
|
||||
padding-right: ${rem(size.base)};
|
||||
|
||||
width: 100%;
|
||||
|
||||
${media.tablet`
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
width: 744px;
|
||||
`}
|
||||
|
||||
${media.desktop`
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
width: 1014px;
|
||||
`}
|
||||
`;
|
||||
|
||||
45
front/src/components/Gainburua/DesktopNabigazioa.tsx
Normal file
45
front/src/components/Gainburua/DesktopNabigazioa.tsx
Normal file
@@ -0,0 +1,45 @@
|
||||
import React from 'react';
|
||||
import { Link } from 'gatsby';
|
||||
import styled from 'styled-components';
|
||||
import { rem } from 'polished';
|
||||
import { size } from '../../ui/theme';
|
||||
|
||||
export const DesktopNabigazioa: React.FC<{
|
||||
atala: 'hasiera' | 'kafetegia';
|
||||
}> = ({ atala }) => {
|
||||
return (
|
||||
<Nabigazioa>
|
||||
<EstekaZerrenda>
|
||||
<Esteka aktiboa={atala === 'hasiera'}>
|
||||
<Link to="/">Laba gara</Link>
|
||||
</Esteka>
|
||||
<Esteka aktiboa={atala === 'kafetegia'}>
|
||||
<Link to="/kafetegia">Dastatu Laba</Link>
|
||||
</Esteka>
|
||||
</EstekaZerrenda>
|
||||
</Nabigazioa>
|
||||
);
|
||||
};
|
||||
|
||||
export const Nabigazioa = styled.nav`
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
bottom: ${rem(size.tiny)};
|
||||
left: 0;
|
||||
`;
|
||||
|
||||
export const EstekaZerrenda = styled.ul`
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
list-style-type: none;
|
||||
`;
|
||||
|
||||
export const Esteka = styled.li<{ aktiboa?: boolean }>`
|
||||
padding: ${rem(size.small)};
|
||||
|
||||
${({ aktiboa }) =>
|
||||
aktiboa &&
|
||||
`
|
||||
border-bottom: 3px solid var(--color);
|
||||
`}
|
||||
`;
|
||||
168
front/src/components/Gainburua/Gainburua.tsx
Normal file
168
front/src/components/Gainburua/Gainburua.tsx
Normal file
@@ -0,0 +1,168 @@
|
||||
import React from 'react';
|
||||
import { Link } from 'gatsby';
|
||||
|
||||
import { rem } from 'polished';
|
||||
import styled from 'styled-components';
|
||||
import { Container } from '../../components/Container';
|
||||
import { breakpoints, font, media, size } from '../../ui/theme';
|
||||
import LabaLogo from '../../assets/logo.svg';
|
||||
|
||||
import { colors } from '../../ui/theme/colors';
|
||||
import { DesktopNabigazioa } from './DesktopNabigazioa';
|
||||
import { MugikorNabigazioa } from './MugikorNabigazioa';
|
||||
import MediaQuery from 'react-responsive';
|
||||
import { KontaktuDatuak } from './KontaktuDatuak';
|
||||
|
||||
interface Props {
|
||||
izenburua: string;
|
||||
deskribapena: string;
|
||||
atala: 'hasiera' | 'kafetegia';
|
||||
}
|
||||
|
||||
export const Gainburua: React.FC<Props> = ({
|
||||
izenburua,
|
||||
deskribapena,
|
||||
atala,
|
||||
}) => {
|
||||
return (
|
||||
<Wrapper atala={atala}>
|
||||
<MediaQuery maxWidth={breakpoints.tablet}>
|
||||
<Container>
|
||||
<MugikorWrapper>
|
||||
<MenuWrapper>
|
||||
<MugikorNabigazioa />
|
||||
</MenuWrapper>
|
||||
<MugikorLogoWrapper>
|
||||
<Link to="/">
|
||||
<LogoWrapper>
|
||||
<Logo title="Laba gara" />
|
||||
</LogoWrapper>
|
||||
</Link>
|
||||
</MugikorLogoWrapper>
|
||||
</MugikorWrapper>
|
||||
</Container>
|
||||
</MediaQuery>
|
||||
|
||||
<MediaQuery minWidth={breakpoints.tablet}>
|
||||
<GainburuWrapper>
|
||||
<Link to="/">
|
||||
<LogoWrapper>
|
||||
<Logo title="Laba gara" />
|
||||
</LogoWrapper>
|
||||
</Link>
|
||||
|
||||
<KontaktuDatuak />
|
||||
</GainburuWrapper>
|
||||
</MediaQuery>
|
||||
|
||||
<Container>
|
||||
<main>
|
||||
<Deskribapena>{deskribapena}</Deskribapena>
|
||||
|
||||
<IzenburuWrapper>
|
||||
<Marra />
|
||||
<Izenburua>{izenburua}</Izenburua>
|
||||
</IzenburuWrapper>
|
||||
</main>
|
||||
|
||||
<MediaQuery minWidth={breakpoints.tablet}>
|
||||
<DesktopNabigazioa atala={atala} />
|
||||
</MediaQuery>
|
||||
</Container>
|
||||
</Wrapper>
|
||||
);
|
||||
};
|
||||
|
||||
const MugikorWrapper = styled.div`
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
padding-top: ${rem(size.base)};
|
||||
|
||||
margin-bottom: ${rem(size.medium)};
|
||||
`;
|
||||
|
||||
const MenuWrapper = styled.div`
|
||||
grid-column: 3;
|
||||
grid-row: 1;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
`;
|
||||
|
||||
const MugikorLogoWrapper = styled.div`
|
||||
grid-row: 1;
|
||||
grid-column: 2;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
`;
|
||||
|
||||
const Wrapper = styled.div<{ atala: 'hasiera' | 'kafetegia' }>`
|
||||
--color: ${({ atala }) =>
|
||||
atala === 'hasiera' ? colors.zuria : colors.beltza};
|
||||
|
||||
background-color: ${({ atala }) =>
|
||||
atala === 'hasiera' ? colors.gorria : colors.horia};
|
||||
color: var(--color);
|
||||
|
||||
padding-bottom: ${rem(size.base)};
|
||||
|
||||
min-height: 100vh;
|
||||
padding-bottom: 0;
|
||||
`;
|
||||
|
||||
const LogoWrapper = styled.div`
|
||||
width: ${rem(size.huge)};
|
||||
`;
|
||||
|
||||
const Logo = styled(LabaLogo)`
|
||||
path {
|
||||
fill: var(--color);
|
||||
}
|
||||
`;
|
||||
|
||||
const GainburuWrapper = 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 var(--color);
|
||||
margin-right: ${rem(size.tiny)};
|
||||
`;
|
||||
|
||||
const Izenburua = styled.h1`
|
||||
text-align: right;
|
||||
vertical-align: bottom;
|
||||
|
||||
&:after {
|
||||
content: '.';
|
||||
}
|
||||
|
||||
${font.gargantuan()};
|
||||
`;
|
||||
79
front/src/components/Gainburua/KontaktuDatuak.tsx
Normal file
79
front/src/components/Gainburua/KontaktuDatuak.tsx
Normal file
@@ -0,0 +1,79 @@
|
||||
import { rem } from 'polished';
|
||||
import React from 'react';
|
||||
import styled from 'styled-components';
|
||||
import { font, size } from '../../ui/theme';
|
||||
import InstagramLogo from '../../assets/instagram.svg';
|
||||
import TwitterLogo from '../../assets/twitter.svg';
|
||||
|
||||
/**
|
||||
* ERREPIKATUA
|
||||
* KontaktuDatuak konponentea MugikorNabigazioan errepikatzen da, honek
|
||||
* logoaren fill-erako kokapenaren araberako CSS aldagaia erabiltzen duelako
|
||||
* TODO: Beste estrategia bat bilatu, abstrakzio bakarra izateko
|
||||
*/
|
||||
|
||||
export const KontaktuDatuak: React.FC = () => {
|
||||
return (
|
||||
<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>
|
||||
);
|
||||
};
|
||||
|
||||
export const Kontaktua = styled.div`
|
||||
display: flex;
|
||||
`;
|
||||
|
||||
export const SareSoziala = styled.li`
|
||||
width: ${rem(size.base)};
|
||||
height: ${rem(size.base)};
|
||||
:not(:last-child) {
|
||||
margin-right: ${rem(size.small)};
|
||||
}
|
||||
`;
|
||||
|
||||
export const Instagram = styled(InstagramLogo)`
|
||||
width: ${rem(size.base)};
|
||||
height: ${rem(size.base)};
|
||||
path {
|
||||
fill: var(--color);
|
||||
}
|
||||
`;
|
||||
|
||||
export const Twitter = styled(TwitterLogo)`
|
||||
width: ${rem(size.base)};
|
||||
height: ${rem(size.base)};
|
||||
path {
|
||||
fill: var(--color);
|
||||
}
|
||||
`;
|
||||
|
||||
export const SareSozialak = styled.ul`
|
||||
display: flex;
|
||||
align-items: center;
|
||||
list-style-type: none;
|
||||
`;
|
||||
|
||||
export const Helbidea = styled.address`
|
||||
border-right: 3px solid var(--color);
|
||||
padding-right: ${rem(size.small)};
|
||||
margin-right: ${rem(size.small)};
|
||||
${font.tiny()};
|
||||
`;
|
||||
184
front/src/components/Gainburua/MugikorNabigazioa.tsx
Normal file
184
front/src/components/Gainburua/MugikorNabigazioa.tsx
Normal file
@@ -0,0 +1,184 @@
|
||||
import { Link } from 'gatsby';
|
||||
import { rem } from 'polished';
|
||||
import React, { useState } from 'react';
|
||||
import styled from 'styled-components';
|
||||
import { font, size } from '../../ui/theme';
|
||||
import { colors } from '../../ui/theme/colors';
|
||||
import HamburgerIcon from './assets/hamburguer.svg';
|
||||
import Itxi from './assets/itxi.svg';
|
||||
import InstagramLogo from '../../assets/instagram.svg';
|
||||
import TwitterLogo from '../../assets/twitter.svg';
|
||||
|
||||
export const MugikorNabigazioa: React.FC = () => {
|
||||
const [isOpen, setIsOpen] = useState(false);
|
||||
|
||||
return (
|
||||
<>
|
||||
{isOpen && (
|
||||
<NabigazioaWrapper>
|
||||
<OpenClose onClick={() => setIsOpen(false)}>
|
||||
<Itxi />
|
||||
</OpenClose>
|
||||
|
||||
<nav>
|
||||
<ul>
|
||||
<Esteka>
|
||||
<Link to="/">Laba gara</Link>
|
||||
</Esteka>
|
||||
<Esteka>
|
||||
<Link to="/kafetegia">Dastatu Laba</Link>
|
||||
</Esteka>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<KontaktuaWrapper>
|
||||
<KontaktuDatuak />
|
||||
</KontaktuaWrapper>
|
||||
</NabigazioaWrapper>
|
||||
)}
|
||||
|
||||
<OpenClose
|
||||
onClick={() => {
|
||||
setIsOpen(true);
|
||||
}}
|
||||
>
|
||||
<Hamburger />
|
||||
</OpenClose>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
const KontaktuaWrapper = styled.div`
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: flex-end;
|
||||
flex-grow: 1;
|
||||
width: 100%;
|
||||
`;
|
||||
|
||||
const Esteka = styled.li`
|
||||
color: ${colors.zuria};
|
||||
${font.large()};
|
||||
text-align: right;
|
||||
|
||||
&:not(:last-child) {
|
||||
margin-bottom: ${rem(size.base)};
|
||||
}
|
||||
|
||||
&:after {
|
||||
content: '.';
|
||||
}
|
||||
`;
|
||||
|
||||
const Hamburger = styled(HamburgerIcon)`
|
||||
path {
|
||||
fill: var(--color);
|
||||
}
|
||||
`;
|
||||
|
||||
const OpenClose = styled.div`
|
||||
cursor: pointer;
|
||||
width: ${rem(size.medium)};
|
||||
margin-bottom: ${rem(size.base)};
|
||||
`;
|
||||
|
||||
const NabigazioaWrapper = styled.div`
|
||||
@keyframes sartu {
|
||||
from {
|
||||
right: -300px;
|
||||
}
|
||||
to {
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
animation-name: sartu;
|
||||
animation-duration: 0.25s;
|
||||
|
||||
/* Containerrak sartzen duen padding berdina */
|
||||
padding: ${rem(size.base)};
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-end;
|
||||
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
min-width: 300px;
|
||||
background-color: ${colors.beltza};
|
||||
color: ${colors.zuria};
|
||||
height: 100vh;
|
||||
`;
|
||||
|
||||
/**
|
||||
* ERREPIKATUA
|
||||
* KontaktuDatuak konponentea errepikatzen da, besteak logoaren fill-erako kokapenaren
|
||||
* araberako CSS aldagaia erabiltzen duelako eta hemen testu eta irudi guztiak zuriak izan
|
||||
* behar direlako
|
||||
* TODO: Beste estrategia bat bilatu, abstrakzio bakarra izateko
|
||||
*/
|
||||
const KontaktuDatuak: React.FC = () => {
|
||||
return (
|
||||
<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>
|
||||
);
|
||||
};
|
||||
|
||||
export const Kontaktua = styled.div`
|
||||
display: flex;
|
||||
`;
|
||||
|
||||
export const SareSoziala = styled.li`
|
||||
width: ${rem(size.base)};
|
||||
height: ${rem(size.base)};
|
||||
:not(:last-child) {
|
||||
margin-right: ${rem(size.small)};
|
||||
}
|
||||
`;
|
||||
|
||||
export const Instagram = styled(InstagramLogo)`
|
||||
width: ${rem(size.base)};
|
||||
height: ${rem(size.base)};
|
||||
path {
|
||||
fill: ${colors.zuria};
|
||||
}
|
||||
`;
|
||||
|
||||
export const Twitter = styled(TwitterLogo)`
|
||||
width: ${rem(size.base)};
|
||||
height: ${rem(size.base)};
|
||||
path {
|
||||
fill: ${colors.zuria};
|
||||
}
|
||||
`;
|
||||
|
||||
export const SareSozialak = styled.ul`
|
||||
display: flex;
|
||||
align-items: center;
|
||||
list-style-type: none;
|
||||
`;
|
||||
|
||||
export const Helbidea = styled.address`
|
||||
border-right: 3px solid ${colors.zuria};
|
||||
padding-right: ${rem(size.small)};
|
||||
margin-right: ${rem(size.small)};
|
||||
${font.tiny()};
|
||||
`;
|
||||
6
front/src/components/Gainburua/assets/hamburguer.svg
Normal file
6
front/src/components/Gainburua/assets/hamburguer.svg
Normal file
@@ -0,0 +1,6 @@
|
||||
<svg viewBox="0 0 60 43" fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M59.46 0H0V6H59.46V0Z" fill="#191919"/>
|
||||
<path d="M59.46 18.16H0V24.16H59.46V18.16Z" fill="#191919"/>
|
||||
<path d="M59.46 36.31H0V42.31H59.46V36.31Z" fill="#191919"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 267 B |
4
front/src/components/Gainburua/assets/itxi.svg
Normal file
4
front/src/components/Gainburua/assets/itxi.svg
Normal file
@@ -0,0 +1,4 @@
|
||||
<svg viewBox="0 0 47 47" fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M46.29 4.24L42.05 0L23.14 18.9L4.24 0L0 4.24L18.9 23.14L0 42.05L4.24 46.29L23.14 27.39L42.05 46.29L46.29 42.05L27.39 23.14L46.29 4.24Z" fill="white"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 248 B |
1
front/src/components/Gainburua/index.ts
Normal file
1
front/src/components/Gainburua/index.ts
Normal file
@@ -0,0 +1 @@
|
||||
export { Gainburua } from './Gainburua';
|
||||
Reference in New Issue
Block a user