Kafetegia css modulesera pasatzen du (#13)
* 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
GitHub
46
front/src/views/Kafetegia/Kafetegia.module.scss
Normal file
46
front/src/views/Kafetegia/Kafetegia.module.scss
Normal file
@@ -0,0 +1,46 @@
|
||||
@import '../../styles/tools/mixins/font.scss';
|
||||
|
||||
.contentWrapper {
|
||||
padding: var(--size-huge) 0;
|
||||
}
|
||||
|
||||
.onEgin {
|
||||
text-align: center;
|
||||
@include gargantuanFont;
|
||||
}
|
||||
|
||||
.taldeWrapper {
|
||||
margin-bottom: var(--size-large);
|
||||
}
|
||||
|
||||
.izenburuWrapper {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
margin-bottom: var(--size-medium);
|
||||
}
|
||||
|
||||
.marra {
|
||||
/* altuera erabiliko den letraren berdina da */
|
||||
height: #{toRem(41.83)};
|
||||
flex-grow: 1;
|
||||
box-shadow: inset 0px -3px 0px 0px var(--color-beltza);
|
||||
margin-right: var(--size-tiny);
|
||||
}
|
||||
|
||||
.izenburua {
|
||||
text-align: right;
|
||||
vertical-align: bottom;
|
||||
|
||||
@include gargantuanFont;
|
||||
|
||||
&:after {
|
||||
content: '.';
|
||||
}
|
||||
}
|
||||
|
||||
.zerrendaWrapper {
|
||||
&:not(:last-child) {
|
||||
margin-bottom: var(--size-base);
|
||||
}
|
||||
}
|
||||
80
front/src/views/Kafetegia/Kafetegia.tsx
Normal file
80
front/src/views/Kafetegia/Kafetegia.tsx
Normal file
@@ -0,0 +1,80 @@
|
||||
import React from 'react';
|
||||
|
||||
import { AlergenoLegenda } from '../../components/AlergenoLegenda';
|
||||
import { Container } from '../../components/Container';
|
||||
import { Gainburua } from '../../components/Gainburua';
|
||||
import { Oina } from '../../components/Oina';
|
||||
import { produktuaFactory } from '../../domain/factories/produktuaFactory';
|
||||
import { KafetegiaData } from '../../viewQueries/KafetegiaData';
|
||||
import { ProduktuZerrenda } from './components/ProduktuZerrenda';
|
||||
import * as styles from './Kafetegia.module.scss';
|
||||
|
||||
export const Kafetegia: React.FC<{ content: KafetegiaData }> = ({
|
||||
content,
|
||||
}) => {
|
||||
const { izenburua, deskribapena, menua } = content;
|
||||
|
||||
// oraingoz menuak alergenorik ez duenez, ezkutatuko dugu
|
||||
// TODO modu dinamikoan aldatu balio hau
|
||||
const hasAlergenoak = false;
|
||||
|
||||
return (
|
||||
<>
|
||||
<Gainburua
|
||||
atala="kafetegia"
|
||||
izenburua={izenburua}
|
||||
deskribapena={deskribapena}
|
||||
/>
|
||||
|
||||
<div className={styles.contentWrapper} id="edukia">
|
||||
<Container>
|
||||
{menua.map(konponentea => {
|
||||
if (
|
||||
konponentea.konponentea ===
|
||||
'StrapiComponentKafetegiaProduktuTaldea'
|
||||
) {
|
||||
return (
|
||||
<div className={styles.zerrendaWrapper} key={konponentea.id}>
|
||||
<ProduktuZerrenda
|
||||
izena={konponentea.izenburua}
|
||||
produktuZerrenda={konponentea.produktuak.map(
|
||||
produktuaFactory,
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (
|
||||
konponentea.konponentea === 'StrapiComponentKafetegiaIzenburua'
|
||||
) {
|
||||
return (
|
||||
<div className={styles.izenburuWrapper} key={konponentea.id}>
|
||||
<div className={styles.marra} />
|
||||
<h1 className={styles.izenburua}>
|
||||
{konponentea.izenburuBalioa}
|
||||
</h1>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
})}
|
||||
|
||||
{hasAlergenoak && (
|
||||
<section className={styles.taldeWrapper}>
|
||||
<div className={styles.izenburuWrapper}>
|
||||
<div className={styles.marra} />
|
||||
<h1 className={styles.izenburua}>Alergenoak</h1>
|
||||
</div>
|
||||
|
||||
<AlergenoLegenda />
|
||||
</section>
|
||||
)}
|
||||
|
||||
<p className={styles.onEgin}>On egin!</p>
|
||||
</Container>
|
||||
</div>
|
||||
|
||||
<Oina />
|
||||
</>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,66 @@
|
||||
@import '../../../../styles/tools/mediaQueries.scss';
|
||||
@import '../../../../styles/tools/mixins/font.scss';
|
||||
|
||||
.produktuTaula {
|
||||
width: 100%;
|
||||
table-layout: fixed;
|
||||
overflow-wrap: break-word;
|
||||
border-collapse: separate;
|
||||
border-spacing: 0 var(--size-tiny);
|
||||
|
||||
@media #{$fromTablet} {
|
||||
border-spacing: 0 var(--size-tiny);
|
||||
}
|
||||
}
|
||||
|
||||
.ezaugarria {
|
||||
width: var(--size-base);
|
||||
height: var(--size-base);
|
||||
padding: 0 var(--size-xtiny);
|
||||
vertical-align: top;
|
||||
|
||||
@media #{$fromTablet} {
|
||||
width: var(--size-medium);
|
||||
height: var(--size-medium);
|
||||
}
|
||||
}
|
||||
|
||||
.izena {
|
||||
text-align: left;
|
||||
font-weight: 300;
|
||||
padding: 0 var(--size-xtiny);
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.prezioa {
|
||||
width: var(--size-huge);
|
||||
text-align: right;
|
||||
font-weight: 300;
|
||||
padding: 0 var(--size-xtiny);
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.mota {
|
||||
text-align: left;
|
||||
padding-left: 52px;
|
||||
margin-bottom: var(--size-mini);
|
||||
|
||||
@include largeFont;
|
||||
|
||||
&::after {
|
||||
content: '.';
|
||||
}
|
||||
|
||||
@media #{$fromTablet} {
|
||||
padding-left: 67px;
|
||||
}
|
||||
}
|
||||
|
||||
.alergenoa {
|
||||
color: var(--color-morea);
|
||||
font-weight: 700;
|
||||
|
||||
&:not(:last-child)::after {
|
||||
content: ', ';
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,47 @@
|
||||
import React from 'react';
|
||||
|
||||
import BeganoaLogo from '../../../../assets/beganoa.svg';
|
||||
import EkologikoaLogo from '../../../../assets/ekologikoa.svg';
|
||||
import { Produktua } from '../../../../domain/models/Produktua';
|
||||
import * as styles from './ProduktuZerrenda.module.scss';
|
||||
|
||||
interface Props {
|
||||
produktuZerrenda: Produktua[];
|
||||
izena?: React.ReactNode;
|
||||
}
|
||||
|
||||
export const ProduktuZerrenda: React.FC<Props> = ({
|
||||
produktuZerrenda,
|
||||
izena,
|
||||
}) => (
|
||||
<table className={styles.produktuTaula}>
|
||||
{izena && <caption className={styles.mota}>{izena}</caption>}
|
||||
|
||||
<tbody>
|
||||
{produktuZerrenda.map(produktua => (
|
||||
<tr key={produktua.id}>
|
||||
<td className={styles.ezaugarria}>
|
||||
{produktua.beganoa && <BeganoaLogo title="Produktu beganoa" />}
|
||||
</td>
|
||||
<td className={styles.ezaugarria}>
|
||||
{produktua.ekologikoa && (
|
||||
<EkologikoaLogo title="Produktu ekologikoa" />
|
||||
)}
|
||||
</td>
|
||||
<td className={styles.izena} scope="row">
|
||||
{produktua.izena}{' '}
|
||||
{produktua.alergenoak.map(alergenoa => (
|
||||
<span className={styles.alergenoa}>{alergenoa.zenbakia}</span>
|
||||
))}
|
||||
</td>
|
||||
<td className={styles.prezioa}>
|
||||
{new Intl.NumberFormat('eu-ES', {
|
||||
style: 'currency',
|
||||
currency: 'EUR',
|
||||
}).format(produktua.prezioa)}
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
);
|
||||
@@ -0,0 +1 @@
|
||||
export { ProduktuZerrenda } from './ProduktuZerrenda';
|
||||
1
front/src/views/Kafetegia/index.ts
Normal file
1
front/src/views/Kafetegia/index.ts
Normal file
@@ -0,0 +1 @@
|
||||
export { Kafetegia } from './Kafetegia';
|
||||
Reference in New Issue
Block a user