From 5d5c05f39ee2a8f839a810949aa64eb6b9848ddc Mon Sep 17 00:00:00 2001
From: Joe Banks <joe@jb3.dev>
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<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;
-- 
cgit v1.2.3