Variable Buttons

Padding, width, height, text are optional, if not set there are default values (no css)

projekt/src/App.css

@@ -1,18 +1,26 @@
-
-
-.round-border-10
-{
-    border-radius: 10px;
-    border-width: 0;
-}
-
-.default-button
-{
-    background-color: #0d52ce;
-    color: #ffffff;
-}
-
-.font-middle
-{
-    font-size: 20px ;
+.round-border
+{
+    border-radius: 10px;
+    border-width: 0;
+}
+
+.default-button
+{
+    background-color: #0d52ce;
+    color: #ffffff;
+}
+
+.font-small
+{
+    font-size: 15px;
+}
+
+.font-middle
+{
+    font-size: 20px ;
+}
+
+.font-big
+{
+    font-size: 30px;
 }

projekt/src/App.js

@@ -1,13 +1,12 @@
-import logo from './logo.svg';
-import './App.css';
-import Button from "./components/Button";
-
-function App() {
-    return (
-        <div className="App">
-            <Button text={"Test"} PaddingX={20} PaddingY={10}/>
-        </div>
-    );
-}
-
-export default App;
+import './App.css';
+import Button from "./components/Button";
+
+function App() {
+    return (
+        <div className="App">
+            <Button/>
+        </div>
+    );
+}
+
+export default App;

projekt/src/components/Button.jsx

@@ -1,15 +1,28 @@
-import "../App.css"
-
-export default function Button(p) {
-
-
-    return (
-        <button className={"default-button round-border-10 font font-middle"}
-                style={{
-                    paddingTop: p.PaddingY,
-                    paddingBottom: p.PaddingY,
-                    paddingLeft: p.PaddingX,
-                    paddingRight: p.PaddingX
-                }}>{p.text}</button>
-    );
+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;
+
+    if (paddingY == null) paddingY = 10;
+    if (paddingX == null) paddingX = 20;
+    if (height == null) height = 50;
+    if (width == null) width = 100;
+
+
+    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>
+    );
 }