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

@@ -1,41 +1,42 @@
-{
-  "name": "projekt",
-  "version": "0.1.0",
-  "private": true,
-  "dependencies": {
-    "@testing-library/jest-dom": "^5.16.5",
-    "@testing-library/react": "^13.4.0",
-    "@testing-library/user-event": "^13.5.0",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "react-scripts": "5.0.1",
-    "web-vitals": "^2.1.4"
-  },
-  "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test",
-    "eject": "react-scripts eject"
-  },
-  "eslintConfig": {
-    "extends": [
-      "react-app",
-      "react-app/jest"
-    ]
-  },
-  "browserslist": {
-    "production": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
-    ],
-    "development": [
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version"
-    ]
-  },
-  "devDependencies": {
-    "tailwindcss": "^3.3.2"
-  }
-}
+{
+  "name": "projekt",
+  "version": "0.1.0",
+  "private": true,
+  "dependencies": {
+    "@testing-library/jest-dom": "^5.16.5",
+    "@testing-library/react": "^13.4.0",
+    "@testing-library/user-event": "^13.5.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-scripts": "5.0.1",
+    "web-vitals": "^2.1.4"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test",
+    "eject": "react-scripts eject"
+  },
+  "eslintConfig": {
+    "extends": [
+      "react-app",
+      "react-app/jest"
+    ]
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  },
+  "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;
@@ -23,4 +17,14 @@
 .font-big
 {
     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={{
-                    paddingTop: paddingY,
-                    paddingBottom: paddingY,
-                    paddingLeft: paddingX,
-                    paddingRight: paddingX,
-                    width: width,
-                    height: height,
-                    color: color
-                }}>{text}</button>
+        <>
+            <button className={"round-border button font font-middle"}
+                    style={{
+                        width: width,
+                        height: height,
+                    }}
+                    onClick={onClick}>
+                {text}
+                <div dangerouslySetInnerHTML={{__html: iconHTML}}/>
+            </button>
+        </>
     );
-}
+}