client,server folders

client/src/components/Button.tsx

@@ -0,0 +1,54 @@
+import {
+  backgroundColors,
+  textColors,
+  borders,
+  paddings,
+} from "../consts/buttonStyles";
+import { ButtonType } from "../types/button";
+
+interface ButtonProps {
+  buttonType?: ButtonType;
+  icon?: React.ReactNode;
+  text?: string;
+  className?: string;
+  onClick?: () => void;
+  disabled?: boolean;
+  isCircleRounded?: boolean;
+  type?: "button" | "submit" | "reset";
+}
+
+const Button = ({
+  className,
+  icon,
+  text,
+  buttonType = "primary",
+  disabled = false,
+  onClick,
+  type = "button",
+
+  isCircleRounded = false,
+}: ButtonProps) => {
+  const backgroundColor = backgroundColors[buttonType];
+  const textColor = textColors[buttonType];
+  const border = borders[buttonType];
+  const padding = paddings[buttonType];
+  const rounded = isCircleRounded ? "rounded-full" : "rounded-lg";
+
+  return (
+    <button
+      type={type}
+      disabled={disabled}
+      onClick={onClick}
+      className={`min-w-10 max-h-10 ${rounded}  ${
+        icon && !text ? "p-[10px]" : padding
+      }  transition-all duration-300 ease-in-out text-s pointer-events-auto flex gap-1 items-center align-middle h-fit ${backgroundColor} ${textColor} ${border}  ${
+        className ? className : ""
+      }`}
+    >
+      {icon && <div>{icon}</div>}
+      {text && <div>{text}</div>}
+    </button>
+  );
+};
+
+export default Button;