Add new PrecheckBox component

1 files changed, 42 insertions, 0 deletions

diff --git a/src/components/PrecheckBox.tsx b/src/components/PrecheckBox.tsx
new file mode 100644
index 0000000..75a48eb
--- /dev/null
+++ b/src/components/PrecheckBox.tsx
@@ -0,0 +1,42 @@
+/** @jsx jsx */
+import { css, 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;