Added a custom link to the button

This commit is contained in:
cami 2021-06-21 02:11:44 +02:00
parent 2ed8bcb3fa
commit 828da9a355
2 changed files with 10 additions and 3 deletions

View file

@ -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}

View file

@ -13,20 +13,23 @@ 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>
<Button <Button
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>
<Button <Button
className="btns" className="btns"
buttonStyle="btn--primary" buttonStyle="btn--primary"
buttonSize="btn--large" buttonSize="btn--large"
newTo="manual"
> >
Anleitung Anleitung
</Button> </Button>