Added a custom link to the button #14
2 changed files with 10 additions and 3 deletions
|
@ -2,6 +2,8 @@ import React from "react";
|
||||||
import "./Button.css";
|
import "./Button.css";
|
||||||
import { Link } from "react-router-dom";
|
import { Link } from "react-router-dom";
|
||||||
|
|
||||||
|
const newTo = (props) => '#';
|
||||||
|
|
||||||
const STYLES = ["btn--primary", "btn--outline"];
|
const STYLES = ["btn--primary", "btn--outline"];
|
||||||
|
|
||||||
const SIZES = ["btn--medium", "btn--large"];
|
const SIZES = ["btn--medium", "btn--large"];
|
||||||
|
@ -11,6 +13,7 @@ export const Button = ({
|
||||||
onClick,
|
onClick,
|
||||||
buttonStyle,
|
buttonStyle,
|
||||||
buttonSize,
|
buttonSize,
|
||||||
|
newTo,
|
||||||
}) => {
|
}) => {
|
||||||
const checkButtonStyle = STYLES.includes(buttonStyle)
|
const checkButtonStyle = STYLES.includes(buttonStyle)
|
||||||
? buttonStyle
|
? buttonStyle
|
||||||
|
@ -18,8 +21,9 @@ export const Button = ({
|
||||||
|
|
||||||
const checkButtonSize = SIZES.includes(buttonSize) ? buttonSize : SIZES[0];
|
const checkButtonSize = SIZES.includes(buttonSize) ? buttonSize : SIZES[0];
|
||||||
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Link to="sign-up" className="btn-mobile">
|
<Link to={newTo || '/'} className="btn-mobile">
|
||||||
<button
|
<button
|
||||||
className={`btn ${checkButtonStyle} ${checkButtonSize}`}
|
className={`btn ${checkButtonStyle} ${checkButtonSize}`}
|
||||||
onClick={onClick}
|
onClick={onClick}
|
||||||
|
|
|
@ -13,6 +13,7 @@ function HeroSection() {
|
||||||
className="btns"
|
className="btns"
|
||||||
buttonStyle="btn--primary"
|
buttonStyle="btn--primary"
|
||||||
buttonSize="btn--large"
|
buttonSize="btn--large"
|
||||||
|
newTo="login"
|
||||||
>
|
>
|
||||||
Einloggen (wenn du schon einmal mitgemacht hast)
|
Einloggen (wenn du schon einmal mitgemacht hast)
|
||||||
</Button>
|
</Button>
|
||||||
|
@ -20,6 +21,7 @@ function HeroSection() {
|
||||||
className="btns"
|
className="btns"
|
||||||
buttonStyle="btn--primary"
|
buttonStyle="btn--primary"
|
||||||
buttonSize="btn--large"
|
buttonSize="btn--large"
|
||||||
|
newTo="register"
|
||||||
>
|
>
|
||||||
Registrieren (falls du das erste Mal hier bist)
|
Registrieren (falls du das erste Mal hier bist)
|
||||||
</Button>
|
</Button>
|
||||||
|
@ -27,6 +29,7 @@ function HeroSection() {
|
||||||
className="btns"
|
className="btns"
|
||||||
buttonStyle="btn--primary"
|
buttonStyle="btn--primary"
|
||||||
buttonSize="btn--large"
|
buttonSize="btn--large"
|
||||||
|
newTo="manual"
|
||||||
>
|
>
|
||||||
Anleitung
|
Anleitung
|
||||||
</Button>
|
</Button>
|
||||||
|
|
Loading…
Reference in a new issue