From b4fd78188699d0001b2748ae4c735d943e1ff6e2 Mon Sep 17 00:00:00 2001
From: Konrad Szwarc <konrad.szwarc.dev@gmail.com>
Date: Fri, 26 Aug 2022 00:25:12 +0200
Subject: [PATCH] Create Button component

---
 src/components/button.stories.tsx | 16 ++++++++++++++++
 src/components/button.tsx         | 15 +++++++++++++++
 2 files changed, 31 insertions(+)
 create mode 100644 src/components/button.stories.tsx
 create mode 100644 src/components/button.tsx

diff --git a/src/components/button.stories.tsx b/src/components/button.stories.tsx
new file mode 100644
index 0000000..79b59cd
--- /dev/null
+++ b/src/components/button.stories.tsx
@@ -0,0 +1,16 @@
+import type { ComponentStory, ComponentMeta } from '@storybook/react';
+
+import { Button } from './button';
+
+export default {
+  title: 'Button',
+  component: Button,
+} as ComponentMeta<typeof Button>;
+
+const Template: ComponentStory<typeof Button> = (args) => <Button {...args} />;
+
+export const Default = Template.bind({});
+
+Default.args = {
+  children: 'Button text',
+};
diff --git a/src/components/button.tsx b/src/components/button.tsx
new file mode 100644
index 0000000..bfe6e6c
--- /dev/null
+++ b/src/components/button.tsx
@@ -0,0 +1,15 @@
+import clsx from 'clsx';
+import type { ComponentPropsWithoutRef } from 'react';
+
+interface ButtonProps extends ComponentPropsWithoutRef<'button'> {}
+
+export const Button = ({ className, ...props }: ButtonProps) => (
+  <button
+    type="button"
+    className={clsx(
+      'inline-flex items-center px-4 h-10 text-base font-medium rounded-md shadow-sm text-white bg-primary-600 hover:bg-primary-700 active:translate-y-px focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500',
+      className
+    )}
+    {...props}
+  />
+);