Add checkbox component and improve styling of checkbox

2022-12-17 17:50:59 +09:00
parent 913e5d2193
commit 618442b58e
3 changed files with 74 additions and 10 deletions
@@ -0,0 +1,70 @@
+import { FunctionComponent } from "react";
+import color from "../../styles/color";
+import styled from "styled-components";
+
+export const Checkbox: FunctionComponent<{ checked: boolean }> = ({
+  checked,
+}) => {
+  return (
+    <ChainCheckBoxContainer>
+      <ChainCheckBoxHidden checked={checked} readOnly={true} />
+      <ChainCheckBoxStyled checked={checked}>
+        <Center>
+          <Icon width="18" height="14" viewBox="0 0 15 12">
+            <path
+              strokeLinecap="square"
+              strokeWidth="2"
+              d="M2.25 4.426l4.083 5.011 6.417-7.874"
+            />
+          </Icon>
+        </Center>
+      </ChainCheckBoxStyled>
+    </ChainCheckBoxContainer>
+  );
+};
+
+const Center = styled.div`
+  width: 100%;
+  height: 100%;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
+
+const Icon = styled.svg`
+  fill: none;
+  stroke: ${color.orange["50"]};
+`;
+
+const ChainCheckBoxContainer = styled.div`
+  position: relative;
+  display: inline-block;
+  vertical-align: middle;
+`;
+
+const ChainCheckBoxStyled = styled.div<{ checked: boolean }>`
+  display: inline-block;
+  width: 1.5rem;
+  height: 1.5rem;
+  border: ${(props) => (props.checked ? "none" : "2px solid #868686")};
+  background: ${(props) =>
+    props.checked ? color.orange["200"] : color.grey["400"]};
+
+  ${Icon} {
+    visibility: ${(props) => (props.checked ? "visible" : "hidden")};
+  }
+`;
+
+const ChainCheckBoxHidden = styled.input.attrs({ type: "checkbox" })`
+  border: 0;
+  clip: rect(0 0 0 0);
+  clip-path: inset(50%);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
+`;