From 1ce867210bcf70f3964faf71e66938d8d8b5843c Mon Sep 17 00:00:00 2001
From: tomtitherington <tom.titherington@gmail.com>
Date: Sun, 5 Nov 2023 15:51:16 +0000
Subject: [PATCH] Move checkbox to new file and restyle from scratch

---
 .../IndeterminateCheckbox/index.tsx           | 55 +++++++++++++++++++
 frontend/src/components/index.ts              |  4 +-
 2 files changed, 58 insertions(+), 1 deletion(-)
 create mode 100644 frontend/src/components/IndeterminateCheckbox/index.tsx

diff --git a/frontend/src/components/IndeterminateCheckbox/index.tsx b/frontend/src/components/IndeterminateCheckbox/index.tsx
new file mode 100644
index 0000000..bdb40b6
--- /dev/null
+++ b/frontend/src/components/IndeterminateCheckbox/index.tsx
@@ -0,0 +1,55 @@
+import { HTMLProps, useEffect, useRef } from 'react';
+
+const IndeterminateCheckbox = ({
+  indeterminate,
+  className = '',
+  ...rest
+}: { indeterminate?: boolean } & HTMLProps<HTMLInputElement>) => {
+  const ref = useRef<HTMLInputElement>(null!);
+
+  useEffect(() => {
+    if (typeof indeterminate === 'boolean') {
+      ref.current.indeterminate = !rest.checked && indeterminate;
+    }
+  }, [ref, indeterminate]);
+
+  return (
+    <>
+      <input
+        ref={ref}
+        className={`
+      peer relative appearance-none shrink-0 w-4 h-4 rounded border border-oxford bg-white
+      checked:bg-crumpet-yellow-500 checked:border-0
+      indeterminate:text-gray-500
+      disabled:border-steel-400 disabled:bg-steel-400
+      ${className}
+    `}
+        type="checkbox"
+        {...rest}
+      />
+      {indeterminate ? (
+        <svg
+          className="absolute w-4 h-4 px-0.5 pointer-events-none hidden peer-indeterminate:block"
+          xmlns="http://www.w3.org/2000/svg"
+          fill="none"
+          viewBox="0 0 24 24">
+          <rect x="4" y="11" width="16" height="2" fill="#51493E" />
+        </svg>
+      ) : (
+        <svg
+          className="absolute w-4 h-4 p-0.5 pointer-events-none hidden peer-checked:block stroke-white outline-none"
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="4"
+          strokeLinecap="round"
+          strokeLinejoin="round">
+          <polyline points="20 6 9 17 4 12"></polyline>
+        </svg>
+      )}
+    </>
+  );
+};
+
+export default IndeterminateCheckbox;
diff --git a/frontend/src/components/index.ts b/frontend/src/components/index.ts
index fe08074..810e815 100644
--- a/frontend/src/components/index.ts
+++ b/frontend/src/components/index.ts
@@ -1,2 +1,4 @@
 import Example from './example';
-export { Example };
\ No newline at end of file
+export { Example };
+
+export { default as IndeterminateCheckbox } from './IndeterminateCheckbox';