forked from LaconicNetwork/icns-frontend
71 lines
1.6 KiB
TypeScript
71 lines
1.6 KiB
TypeScript
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;
|
|
`;
|