feat: Layout (#21)

src/components/Layouts/BaseLayout.tsx

@@ -0,0 +1,21 @@
+import styled from "styled-components";
+
+const GridLayout = styled.div`
+  display: grid;
+  grid-template-columns: repeat(6, 1fr);
+  grid-gap: 16px;
+  ${({ theme }) => theme.scales.mediaQueries.sm} {
+    grid-template-columns: repeat(8, 1fr);
+    grid-gap: 24px;
+  }
+  ${({ theme }) => theme.scales.mediaQueries.md} {
+    grid-template-columns: repeat(12, 1fr);
+    grid-gap: 24px;
+  }
+  ${({ theme }) => theme.scales.mediaQueries.lg} {
+    grid-template-columns: repeat(12, 1fr);
+    grid-gap: 32px;
+  }
+`;
+
+export default GridLayout;

src/components/Layouts/CardsLayout.tsx

@@ -0,0 +1,13 @@
+import styled from "styled-components";
+import BaseLayout from "./BaseLayout";
+
+const GridLayout = styled(BaseLayout)`
+  & > div {
+    grid-column: span 6;
+    ${({ theme }) => theme.scales.mediaQueries.sm} {
+      grid-column: span 4;
+    }
+  }
+`;
+
+export default GridLayout;

src/components/Layouts/index.stories.tsx

@@ -0,0 +1,34 @@
+import React from "react";
+import styled from "styled-components";
+import { BaseLayout, CardsLayout } from ".";
+
+export default {
+  title: "Layouts",
+  argTypes: {},
+};
+
+const Stub = styled.div`
+  width: 100%;
+  background: #1fc7d4;
+  height: 300px;
+`;
+
+export const Base: React.FC = () => {
+  return (
+    <BaseLayout>
+      {[...Array(24)].map((value) => (
+        <Stub key={value} />
+      ))}
+    </BaseLayout>
+  );
+};
+
+export const Cards: React.FC = () => {
+  return (
+    <CardsLayout>
+      {[...Array(10)].map((value) => (
+        <Stub key={value} />
+      ))}
+    </CardsLayout>
+  );
+};

src/components/Layouts/index.tsx

@@ -0,0 +1,2 @@
+export { default as BaseLayout } from "./BaseLayout";
+export { default as CardsLayout } from "./CardsLayout";

src/index.ts

@@ -1,10 +1,10 @@
-// eslint-disable-next-line import/prefer-default-export
 export { default as Button } from "./components/Button";
 export { default as ButtonMenu } from "./components/ButtonMenu";
 export { default as ButtonMenuItem } from "./components/ButtonMenu/ButtonMenuItem";
 export { default as Card } from "./components/Card";
 export { default as Checkbox } from "./components/Checkbox";
 export { default as Heading } from "./components/Heading";
+export * from "./components/Layouts";
 export { default as Text } from "./components/Text";
 export { default as Link } from "./components/Link";
 export { default as ResetCSS } from "./ResetCSS";