feat: coming soon

components/design/Button/Button.stories.tsx

@@ -0,0 +1,15 @@
+import { Meta, Story } from '@storybook/react'
+
+import { Button as Component, ButtonProps } from './Button'
+
+const Stories: Meta = {
+  title: 'Button',
+  component: Component
+}
+
+export default Stories
+
+export const Button: Story<ButtonProps> = (arguments_) => (
+  <Component {...arguments_} />
+)
+Button.args = { children: 'Get started' }

components/design/Button/Button.test.tsx

@@ -0,0 +1,10 @@
+import { render } from '@testing-library/react'
+
+import { Button } from './'
+
+describe('<Button />', () => {
+  it('should render', async () => {
+    const { getByText } = render(<Button>Submit</Button>)
+    expect(getByText('Submit')).toBeInTheDocument()
+  })
+})

components/design/Button/Button.tsx

@@ -0,0 +1,19 @@
+import classNames from 'classnames'
+
+export interface ButtonProps extends React.ComponentPropsWithoutRef<'button'> {}
+
+export const Button: React.FC<ButtonProps> = (props) => {
+  const { children, className, ...rest } = props
+
+  return (
+    <button
+      className={classNames(
+        'py-2 px-6 font-paragraph rounded-lg bg-transparent border border-green-800 dark:border-green-400 text-green-800 dark:text-green-400 hover:bg-green-800 hover:text-white dark:hover:bg-green-400 dark:hover:text-black fill-current stroke-current transform transition-colors duration-300 ease-in-out focus:outline-none focus:bg-green-800 focus:text-white dark:focus:bg-green-400 dark:focus:text-black',
+        className
+      )}
+      {...rest}
+    >
+      {children}
+    </button>
+  )
+}

components/design/Button/index.ts

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