Button with onhover and function paramter

Man kann eine Funktion als Parameter dem button übergeben, sodass er diese ausführt, sobald auf ihn geklickt wird

projekt/package.json

@@ -38,4 +38,5 @@
   "devDependencies": {
     "tailwindcss": "^3.3.2"
   }
+
 }

projekt/src/App.css

@@ -4,12 +4,6 @@
     border-width: 0;
 }
 
-.default-button
-{
-    background-color: #0d52ce;
-    color: #ffffff;
-}
-
 .font-small
 {
     font-size: 15px;
@@ -24,3 +18,13 @@
 {
     font-size: 30px;
 }
+
+.button
+{
+    background-color: #0d52ce;
+}
+
+.button:hover
+{
+    background-color: #585858;
+}

projekt/src/App.js

@@ -1,10 +1,14 @@
 import './App.css';
 import Button from "./components/Button";
+import {arrowLeft} from "./Icons";
+import {arrowRight} from "./Icons";
 
 function App() {
+
     return (
         <div className="App">
-            <Button/>
+            <Button icon={arrowLeft} iconWidth={50} iconHeight={50} width={200} height={100}/>
+            <Button text={"Hallo"} onClick={() => {console.log("test")}}></Button>
         </div>
     );
 }

projekt/src/Icons.js

@@ -0,0 +1,7 @@
+export const arrowLeft = `<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi bi-arrow-left" viewBox="0 0 16 16">
+  <path fill-rule="evenodd" d="M15 8a.5.5 0 0 0-.5-.5H2.707l3.147-3.146a.5.5 0 1 0-.708-.708l-4 4a.5.5 0 0 0 0 .708l4 4a.5.5 0 0 0 .708-.708L2.707 8.5H14.5A.5.5 0 0 0 15 8z"/>
+</svg>`
+
+export const arrowRight = `<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi bi-arrow-right" viewBox="0 0 16 16">
+  <path fill-rule="evenodd" d="M1 8a.5.5 0 0 1 .5-.5h11.793l-3.147-3.146a.5.5 0 0 1 .708-.708l4 4a.5.5 0 0 1 0 .708l-4 4a.5.5 0 0 1-.708-.708L13.293 8.5H1.5A.5.5 0 0 1 1 8z"/>
+</svg>`

projekt/src/components/Button.jsx

@@ -3,26 +3,37 @@ import "../App.css"
 export default function Button(p) {
 
     let text = p.text;
-    let paddingY = p.paddingY, paddingX = p.paddingX;
     let width = p.width, height = p.height;
-    let color = p.color;
+    let iconHTML = p.icon;
+    let iconWidth = p.iconWidth, iconHeight = p.iconHeight;
+    let onClick = p.onClick;
 
-    if (paddingY == null) paddingY = 10;
-    if (paddingX == null) paddingX = 20;
     if (height == null) height = 50;
     if (width == null) width = 100;
+    if (iconWidth == null) iconWidth = 50;
+    if (iconHeight == null) iconHeight = 50;
+    if (onClick == null) onClick = () => {};
 
+    if (iconHTML != null) {
+        let split = iconHTML.split("fill=");
+        split[1] = "fill=" + split[1];
+        split[0] += " width=" + iconWidth + " height=" + iconHeight + " ";
+        iconHTML = split[0] + split[1]
+    } else {
+        iconHTML = "";
+    }
 
     return (
-        <button className={"default-button round-border font font-middle"}
+        <>
-                style={{
+            <button className={"round-border button font font-middle"}
-                    paddingTop: paddingY,
+                    style={{
-                    paddingBottom: paddingY,
+                        width: width,
-                    paddingLeft: paddingX,
+                        height: height,
-                    paddingRight: paddingX,
+                    }}
-                    width: width,
+                    onClick={onClick}>
-                    height: height,
+                {text}
-                    color: color
+                <div dangerouslySetInnerHTML={{__html: iconHTML}}/>
-                }}>{text}</button>
+            </button>
+        </>
     );
 }