From 23144761d387bb98229699122393912cb4612e19 Mon Sep 17 00:00:00 2001
From: ritwik-69 <72665321+ritwik-69@users.noreply.github.com>
Date: Sat, 1 Jun 2024 18:03:04 +0530
Subject: [PATCH] client: Created the button component

This commit creates a button component which is reusable and customizable like mentioned in the issue
Note:Things like hover effect,focus etc. has still not been implemented as it was not mentioned in the issue

fixes:#20
---
 frontend/src/library/button.tsx | 43 +++++++++++++++++++++++++++++++--
 1 file changed, 41 insertions(+), 2 deletions(-)

diff --git a/frontend/src/library/button.tsx b/frontend/src/library/button.tsx
index d9f5396..e45f1c8 100644
--- a/frontend/src/library/button.tsx
+++ b/frontend/src/library/button.tsx
@@ -8,10 +8,49 @@
 type ButtonProps = {
     onClick: () => void;
     children: React.ReactNode;
+    size?:'small' |'medium' | 'large';
+    textColor?: string;
+    bgColor?: string;
+    borderColor?: string;
+    shape?:'rectangle' | 'rounded' | 'circle';
+
+};
+
+
+
+function Button({ children, onClick,size="medium",bgColor="bg-blue-500",textColor="text-white",borderColor="border-red-500",shape }: ButtonProps) {
+
+const getSizeClass = () => {
+    switch (size) {
+        case 'small':
+            return 'px-2 py-1 text-sm';
+        case 'large':
+            return 'px-4 py-2 text-lg';
+        case 'medium':
+            return 'px-3 py-2 text-base';
+        default:
+            return 'px-3 py-2 text-base';
+    }
+};
+
+const getShapeClass = () => {
+    switch (shape) {
+        case 'rounded':
+            return 'rounded-lg';
+        case 'rectangle':
+            return 'rounded-none';
+        case 'circle':
+            return 'rounded-full';
+        default:
+            return 'rounded-lg';
+    }
 };
 
-function Button({ onClick, children }: ButtonProps) {
-    return <button onClick={onClick}>{children}</button>;
+const shapeClass = getShapeClass();
+const sizeClass = getSizeClass();
+
+
+    return <button onClick={onClick} className={`${bgColor} ${textColor} border ${borderColor} ${sizeClass} ${shapeClass} `}>{children}</button>;
 }
 
 export default Button;