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
-
+{
-.round-border-10
+    border-radius: 10px;
-{
+    border-width: 0;
-    border-radius: 10px;
+}
-    border-width: 0;
+
-}
+.default-button
-
+{
-.default-button
+    background-color: #0d52ce;
-{
+    color: #ffffff;
-    background-color: #0d52ce;
+}
-    color: #ffffff;
+
-}
+.font-small
-
+{
-.font-middle
+    font-size: 15px;
-{
+}
-    font-size: 20px ;
+
+.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 './App.css';
+import Button from "./components/Button";
-import Button from "./components/Button";
+
-
+function App() {
-function App() {
+    return (
-    return (
+        <div className="App">
-        <div className="App">
+            <Button/>
-            <Button text={"Test"} PaddingX={20} PaddingY={10}/>
+        </div>
-        </div>
+    );
-    );
+}
-}
+
-
+export default App;
-export default App;

projekt/src/components/Button.jsx

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