zrozumiecReact.pl

import styled from "styled-components";
import { Button } from "./Button";

const StyledHeading = styled.h1`
    font-size: 36px;
    color: #333;
`;

const StyledRow = styled.div`
    margin-bottom: 12px;
`;

/*
Style dla pierwszego buttona: 
    background: transparent;
    border-radius: 8px;
    padding: 12px 8px;
    font-style: italic;
    cursor: pointer;
*/

/*
Style dla drugiego buttona: 
    background: #666;
    color: #eee;
    border: none;
    padding: 12px 8px;
    cursor: pointer;
*/


export default function App() {
    return <>
        <StyledHeading>Dwa buttony</StyledHeading>
        <StyledRow>
            <Button onClick={() => alert("click")}>Button okrągły</Button>
        </StyledRow>
        <StyledRow>
            <Button onClick={() => alert("click")}>Button zwykły</Button>
        </StyledRow>
    </>;
}