Hasiera css modulesera pasatzen du (#12)

* refactor: extract component

* hasiera CSS modules-era pasatzen du

* refactor: Container css modulesera pasatzen du

* fix: maketazioa

front/src/components/Container.tsx

@@ -1,25 +0,0 @@
-import { rem } from 'polished';
-import styled from 'styled-components';
-import { media } from '../ui/theme/media';
-import { size } from '../ui/theme/size';
-
-export const Container = styled.div`
-  margin-left: auto;
-  margin-right: auto;
-  padding-left: ${rem(size.small)};
-  padding-right: ${rem(size.small)};
-
-  width: 100%;
-
-  ${media.tablet`
-    padding-left: 0;
-    padding-right: 0;
-    width: 744px;
-  `}
-
-  ${media.desktop`
-    padding-left: 0;
-    padding-right: 0;
-    width: 1014px;
-  `}
-`;

front/src/components/Container/Container.module.scss

@@ -0,0 +1,22 @@
+@import '../../styles/tools/mediaQueries.scss';
+
+.wrapper {
+  margin-left: auto;
+  margin-right: auto;
+  padding-left: var(--size-small);
+  padding-right: var(--size-small);
+
+  width: 100%;
+
+  @media #{$fromTablet} {
+    padding-left: 0;
+    padding-right: 0;
+    width: 744px;
+  }
+
+  @media #{$fromDesktop} {
+    padding-left: 0;
+    padding-right: 0;
+    width: 1014px;
+  }
+}

front/src/components/Container/Container.tsx

@@ -0,0 +1,7 @@
+import React, { PropsWithChildren } from 'react';
+
+import * as styles from './Container.module.scss';
+
+export const Container: React.FC<PropsWithChildren> = ({ children }) => (
+  <div className={styles.wrapper}>{children}</div>
+);

front/src/components/Container/index.ts

@@ -0,0 +1 @@
+export { Container } from './Container';

front/src/pages/index.tsx

@@ -1,26 +1,17 @@
-import { graphql, navigate, PageProps, useStaticQuery } from 'gatsby';
 import React from 'react';
-import { GlobalStyles } from '../ui/GlobalStyles';
 
-import { Gainburua } from '../components/Gainburua';
+import { graphql, PageProps, useStaticQuery } from 'gatsby';
-import styled from 'styled-components';
+
-import { colors, font, fontWeight, size } from '../ui/theme';
-import { Container } from '../components/Container';
-import { rem } from 'polished';
-import Gezia from '../assets/gezia.svg';
-import ReactMarkdown from 'react-markdown';
-import { Oina } from '../components/Oina';
 import { SEO } from '../components/SEO';
+import { GlobalStyles } from '../ui/GlobalStyles';
+import { Hasiera } from '../views/Hasiera/Hasiera';
+import { HasieraContent } from '../views/Hasiera/HasieraContent';
 
 interface DataProps {
-  strapiHasiera: {
+  strapiHasiera: HasieraContent;
-    deskribapena: string;
-    izenburua: string;
-    edukia: string;
-  };
 }
 
-const IndexPage: React.VFC<PageProps> = ({ location }) => {
+const IndexPage: React.FC<PageProps> = ({ location }) => {
   const { strapiHasiera } = useStaticQuery<DataProps>(graphql`
     {
       strapiHasiera {
@@ -41,74 +32,9 @@ const IndexPage: React.VFC<PageProps> = ({ location }) => {
 
       <GlobalStyles />
 
-      <Gainburua
+      <Hasiera content={strapiHasiera} />
-        atala="hasiera"
-        izenburua={strapiHasiera.izenburua}
-        deskribapena={strapiHasiera.deskribapena}
-        onClick={() => {
-          navigate('/#edukia');
-        }}
-      />
-
-      <ContentWrapper id="edukia">
-        <Container>
-          <Deskribapena>{strapiHasiera.edukia}</Deskribapena>
-
-          <IzanLabaWrapper>
-            <Botoia href="https://forms.gle/wV41CVkRX1JtHsAu9">
-              <GeziaLogo /> Labazkidetu.
-            </Botoia>
-          </IzanLabaWrapper>
-        </Container>
-      </ContentWrapper>
-
-      <Oina />
     </>
   );
 };
 
-const Deskribapena = styled(ReactMarkdown)`
-  margin-bottom: ${rem(size.large)};
-
-  p:not(-last-child) {
-    margin-bottom: ${rem(size.base)};
-  }
-`;
-
-const ContentWrapper = styled.div`
-  padding: ${size.huge}px 0;
-  font-weight: ${fontWeight.regular};
-  ${font.large()};
-`;
-
-const Botoia = styled.a`
-  border: 2px solid ${colors.beltza};
-  ${font.large()};
-  padding: ${rem(size.base)};
-  background: ${colors.zuria};
-  font-weight: ${fontWeight.bold};
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-
-  transition: color 0.4s ease;
-  &:hover {
-    color: ${colors.morea};
-  }
-
-  &:focus {
-    border: 2px solid ${colors.zuria};
-    outline: 3px solid ${colors.morea};
-  }
-`;
-
-const GeziaLogo = styled(Gezia)`
-  margin-right: ${rem(size.tiny)};
-`;
-
-const IzanLabaWrapper = styled.div`
-  display: flex;
-  justify-content: flex-end;
-`;
-
 export default IndexPage;

front/src/views/Hasiera/Hasiera.module.scss

@@ -0,0 +1,44 @@
+@import '../../styles/tools/mixins/font.scss';
+
+.contentWrapper {
+  padding: var(--size-huge) 0;
+  font-weight: 300;
+  @include largeFont;
+}
+
+.edukia {
+  margin-bottom: var(--size-large);
+
+  p:not(:last-child) {
+    margin-bottom: var(--size-base);
+  }
+}
+
+.izanLabaWrapper {
+  display: flex;
+  justify-content: flex-end;
+}
+
+.callToAction {
+  border: 2px solid var(--color-beltza);
+  @include largeFont;
+  padding: var(--size-base);
+  background: var(--color-zuria);
+  font-weight: 700;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+
+  transition: color 0.4s ease;
+  &:hover {
+    color: var(--color-morea);
+  }
+
+  &:focus {
+    outline: 3px solid var(--color-morea);
+  }
+}
+
+.gezia {
+  margin-right: var(--size-tiny);
+}

front/src/views/Hasiera/Hasiera.tsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import ReactMarkdown from 'react-markdown';
+
+import Gezia from '../../assets/gezia.svg';
+import { Container } from '../../components/Container';
+import { Gainburua } from '../../components/Gainburua';
+import { Oina } from '../../components/Oina';
+import * as styles from './Hasiera.module.scss';
+import { HasieraContent } from './HasieraContent';
+
+interface Props {
+  content: HasieraContent;
+}
+
+export const Hasiera: React.FC<Props> = ({ content }) => {
+  const { izenburua, deskribapena, edukia } = content;
+  return (
+    <>
+      <Gainburua
+        atala="hasiera"
+        izenburua={izenburua}
+        deskribapena={deskribapena}
+      />
+
+      <div className={styles.contentWrapper} id="edukia">
+        <Container>
+          <ReactMarkdown className={styles.edukia}>{edukia}</ReactMarkdown>
+
+          <div className={styles.izanLabaWrapper}>
+            <a
+              className={styles.callToAction}
+              href="https://forms.gle/wV41CVkRX1JtHsAu9"
+            >
+              <Gezia className={styles.gezia} /> Labazkidetu.
+            </a>
+          </div>
+        </Container>
+      </div>
+
+      <Oina />
+    </>
+  );
+};

front/src/views/Hasiera/HasieraContent.ts

@@ -0,0 +1,5 @@
+export interface HasieraContent {
+  deskribapena: string;
+  izenburua: string;
+  edukia: string;
+}

front/src/views/Hasiera/index.ts

@@ -0,0 +1 @@
+export { Hasiera } from './Hasiera';