1 files changed, 46 insertions, 0 deletions
diff --git a/extension/react-app/src/components/CheckDiv.tsx b/extension/react-app/src/components/CheckDiv.tsx
new file mode 100644
index 00000000..e595d70b
--- /dev/null
+++ b/extension/react-app/src/components/CheckDiv.tsx
@@ -0,0 +1,46 @@
+import { useState } from "react";
+import styled from "styled-components";
+import { defaultBorderRadius, vscBackground, vscForeground } from ".";
+import { CheckIcon } from "@heroicons/react/24/outline";
+
+interface CheckDivProps {
+  title: string;
+  checked: boolean;
+  onClick: () => void;
+}
+
+const StyledDiv = styled.div<{ checked: boolean }>`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  padding: 0.5rem;
+  border-radius: ${defaultBorderRadius};
+  cursor: pointer;
+  border: 1px solid ${vscForeground};
+
+  color: ${vscForeground};
+  background-color: ${vscBackground};
+
+  &:hover {
+    background-color: ${vscForeground};
+    color: ${vscBackground};
+  }
+  width: fit-content;
+
+  margin: 0.5rem;
+  height: 1.4em;
+`;
+
+function CheckDiv(props: CheckDivProps) {
+  const { title, checked, onClick } = props;
+
+  return (
+    <StyledDiv onClick={onClick} checked={checked}>
+      {checked && <CheckIcon width="1.4em" height="1.4em" />}
+      {title}
+    </StyledDiv>
+  );
+}
+
+export default CheckDiv;