From 5d5c05f39ee2a8f839a810949aa64eb6b9848ddc Mon Sep 17 00:00:00 2001 From: Joe Banks Date: Fri, 8 Aug 2025 23:26:34 +0100 Subject: Add new PrecheckBox component --- src/components/PrecheckBox.tsx | 42 ++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 42 insertions(+) create mode 100644 src/components/PrecheckBox.tsx 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` + 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 + {props.message} + ; +} + +export default PrecheckBox; -- cgit v1.2.3