From 55bd3406f2ff8edd78dbd53fcbf4c735c21cc3fb Mon Sep 17 00:00:00 2001
From: Sofya Grishkova <144588966+niigheye@users.noreply.github.com>
Date: Wed, 4 Sep 2024 17:34:58 +0200
Subject: [PATCH] feat (elements): add new component

add new component 'button' in two (filled/bordered) styles from figma
---
 src/components/Button/button.props.ts    |  5 +++++
 src/components/Button/button.stories.tsx | 22 ++++++++++++++++++++++
 src/components/Button/button.tsx         | 21 +++++++++++++++++++++
 src/stories/button.css                   |  1 +
 4 files changed, 49 insertions(+)
 create mode 100644 src/components/Button/button.props.ts
 create mode 100644 src/components/Button/button.stories.tsx
 create mode 100644 src/components/Button/button.tsx

diff --git a/src/components/Button/button.props.ts b/src/components/Button/button.props.ts
new file mode 100644
index 0000000..db7f66e
--- /dev/null
+++ b/src/components/Button/button.props.ts
@@ -0,0 +1,5 @@
+export interface ButtonProps {
+    label:string;
+    disabled?:boolean;
+    color?: 'filled' | 'bordered';
+}
\ No newline at end of file
diff --git a/src/components/Button/button.stories.tsx b/src/components/Button/button.stories.tsx
new file mode 100644
index 0000000..21545c4
--- /dev/null
+++ b/src/components/Button/button.stories.tsx
@@ -0,0 +1,22 @@
+import React from 'react';
+import { Meta, StoryFn } from '@storybook/react';
+import Button from './button';
+
+export default {
+    title: 'Components/Button',
+    component: Button,
+} as Meta<typeof Button>;
+
+const Template: StoryFn<typeof Button> = (args) => <Button {...args} />;
+
+export const Primary = Template.bind({});
+Primary.args = {
+    label: 'Удалить',
+    color: 'filled',
+};
+
+export const Secondary = Template.bind({});
+Secondary.args = {
+    label: 'Мои Боты',
+    color: 'bordered',
+};
diff --git a/src/components/Button/button.tsx b/src/components/Button/button.tsx
new file mode 100644
index 0000000..64cde2e
--- /dev/null
+++ b/src/components/Button/button.tsx
@@ -0,0 +1,21 @@
+import React from 'react';
+import { ButtonProps } from './button.props';
+import '../Text/index'
+const Button: React.FC<ButtonProps> = ({ label, disabled = false, color = 'primary' }) => {
+    const baseStyles = 'px-4 py-2 font-headline-small rounded';
+    const filledStyles = 'bg-color-red text-white w-full max-w-lg h-14 p-4 rounded-2xl gap-4';
+    const borderedStyles = 'font-title-large text-white border-color-grey rounded-2xl w-44 h-16 p-4 gap-16 border-2';
+
+    const buttonStyles = color === 'filled' ? filledStyles : borderedStyles;
+
+    return (
+        <button
+            className={`${baseStyles} ${buttonStyles} ${disabled}`}
+            disabled={disabled}
+        >
+            {label}
+        </button>
+    );
+};
+
+export default Button;
\ No newline at end of file
diff --git a/src/stories/button.css b/src/stories/button.css
index dc91dc7..bf73765 100644
--- a/src/stories/button.css
+++ b/src/stories/button.css
@@ -28,3 +28,4 @@
   font-size: 16px;
   padding: 12px 24px;
 }
+