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';