add button component

frontend/src/components/basics/Button.tsx

@@ -0,0 +1,41 @@
+import SvgIcon, { Icon } from "./SvgIcon"
+
+type ButtonProps = {
+    onClicked: () => void,
+    icon?: Icon,
+    text?: string,
+    buttonType : ButtonType
+}
+
+export const ButtonType = {
+  DarkButton: {
+    textColor: "text-white",
+    backgroundColor: "bg-gray-600  hover:bg-gray-800"
+  },
+  PrimaryButton: {
+    textColor: "text-gray-600",
+    backgroundColor: "bg-blue-300 hover:bg-blue-400"
+  },
+  DefaultButton: {
+    textColor: "text-gray-600",
+    backgroundColor: "bg-gray-300 hover:bg-gray-400"
+  }
+} as const;
+
+export type ButtonType = typeof ButtonType[keyof typeof ButtonType];
+
+export default function Button ({onClicked, icon, text, buttonType = ButtonType.DefaultButton} : ButtonProps){
+    return(
+        <button
+            type="button"
+            className={`px-4 py-2 shadow-md rounded-lg whitespace-nowrap ${buttonType.backgroundColor} ${buttonType.textColor}`}
+            onClick={onClicked}
+        >
+            <div className="flex items-center gap-2">
+                {/* Render icon only if defined */}
+                {icon && <SvgIcon icon={icon} color={buttonType.textColor} />}
+                {text}
+            </div>
+        </button>
+    )
+}