practice-react-styling/src/components/Button/Button.styled.js at a2da509ee857d67d5e7830da5cfbcb5eb58ef6ce · devmentor-pl/practice-react-styling · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
import styled, { css } from 'styled-components';

const defaultVariants = {
    primary: {
        background: '#007bff',
        color: '#fff',
    },
    secondary: {
        background: '#6c757d',
        color: '#fff',
    },
};

const defaultSize = {
    sm: {
        padding: '4px 10px',
        fontSize: '12px',
    },
    md: {
        padding: '8px 16px',
        fontSize: '14px',
    },
    lg: {
        padding: '12px 20px',
        fontSize: '16px',
    }
}

const getVariant = ({ theme, variant }) =>
    theme?.buttons?.[variant] || defaultVariants[variant] || defaultVariants.primary;

const getSize = ({ size }) =>
    defaultSize[size] || defaultSize.md;

const StyledButton = styled.button`
display: inline-block;
text-align: center;
border: none;
border-radius: 4px;
cursor: pointer;
background-color:${({ theme, variant }) =>
        getVariant({ theme, variant }).background};
    color:${({ theme, variant }) =>
        getVariant({ theme, variant }).color};
    ${({ size }) => {
        const s = getSize({ size });
        return css`
    padding: ${s.padding};
    font-size: ${s.fontSize};
    transition: 0.2s ease;

    &:hover {
  opacity: 0.9;
}
    `;
    }}

    ${({ active }) =>
        active &&
        css`
            box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.3);
        `}

    ${({ disabled }) =>
        disabled &&
        css`
            opacity: 0.6;
            cursor: not-allowed;
        `}
`;

export { StyledButton };