src/components/PrecheckBox.tsx


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

/** @jsx jsx */
import { jsx } from "@emotion/react";
import styled from "@emotion/styled";

interface PrecheckProps {
    severity: "secondary" | "warning" | "danger"
    message: string
}

const BACKGROUNDS = {
    secondary: "#7e7c7cff",
    warning: "#a09b53ff",
    danger: "#b4747aff"
};

interface PrecheckBoxProps {
    severity: PrecheckProps["severity"]
}


const HeaderBox = styled.div<PrecheckBoxProps>`
    margin-bottom: 2rem;
    padding: 1rem 4rem;
    border-radius: 8px;
    text-align: center;
    font-size: 1.5rem;
    font-weight: bolder;

    background-color: ${props => BACKGROUNDS[props.severity]};

    @media (max-width: 500px) {
        padding: 1rem 1.5rem;
    }
`;

function PrecheckBox(props: PrecheckProps): JSX.Element {
    return <HeaderBox severity={props.severity}>
        {props.message}
    </HeaderBox>;
}

export default PrecheckBox;