a35ac68e39
* feat: back-en propietatea sortzen du * feat: bazkidetzarako testua sartzen du * feat: maketazioa konpontzen du * feat: gezia sartzen du * fix: consola zuzenketak egiten ditu * feat: margina konpontzen du * fix: html-a konpontzen du * feat: izena aldatzen du * feat: lege oharra sortzen du * feat: pribatutasun politika sortzen du
88 lines
2.0 KiB
TypeScript
88 lines
2.0 KiB
TypeScript
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
|
|
tabIndex={0}
|
|
aria-label="Laba Twitterren"
|
|
href="https://twitter.com/labasarea/"
|
|
>
|
|
<Twitter title="Laba Twitterren" />
|
|
</a>
|
|
</SareSoziala>
|
|
|
|
<SareSoziala>
|
|
<a
|
|
tabIndex={0}
|
|
aria-label="Laba Instagramen"
|
|
href="https://www.instagram.com/labasarea/"
|
|
>
|
|
<Instagram 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()};
|
|
`;
|