feat(Divider): Divider 実装 (#71)

src/divider/Divider.stories.tsx

@@ -0,0 +1,27 @@
+import React from 'react'
+import { Meta } from '@storybook/react/types-6-0'
+
+import 'twin.macro'
+import { Divider } from './Divider'
+
+export default {
+  title: 'Atom/Divider',
+  component: Divider,
+  decorators: [
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    (Story: any) => (
+      <div tw="mt-10 flex flex-col h-screen w-screen gap-4">
+        <Story />
+      </div>
+    ),
+  ],
+  argTypes: {
+    backgroundColor: { control: 'color' },
+  },
+} as Meta
+
+export const basic = () => (
+  <div>
+    <Divider />
+  </div>
+)

src/divider/Divider.tsx

@@ -0,0 +1,25 @@
+import { VFC } from 'react'
+import MuiDivider, {
+  DividerProps as MuiDividerProps,
+} from '@material-ui/core/Divider'
+import tw, { css, TwStyle } from 'twin.macro'
+
+export type DividerProps = MuiDividerProps & {
+  twin?: TwStyle[]
+}
+
+export const Divider: VFC<DividerProps> = ({ twin }) => {
+  return (
+    <MuiDivider
+      light
+      css={[
+        css`
+          &.MuiDivider-root {
+            ${tw`border border-low`}
+            ${twin}
+          }
+        `,
+      ]}
+    />
+  )
+}

src/divider/index.tsx

@@ -0,0 +1 @@
+export * from './Divider'