98 lines
1.9 KiB
TypeScript
98 lines
1.9 KiB
TypeScript
import styled, { type AnyStyledComponent } from 'styled-components';
|
|
|
|
import { breakpoints } from '@/styles';
|
|
|
|
type ElementProps = {
|
|
checked: boolean;
|
|
onClick: (e: React.ChangeEvent) => void;
|
|
};
|
|
|
|
type StyleProps = {
|
|
className?: string;
|
|
};
|
|
|
|
export type CheckboxProps = ElementProps & StyleProps;
|
|
|
|
export const Checkbox: React.FC<CheckboxProps> = ({ checked, className, onClick }) => {
|
|
return (
|
|
<Styled.CheckboxWrapper className={className}>
|
|
<Styled.Checkbox
|
|
type="checkbox"
|
|
checked={checked}
|
|
onChange={onClick}
|
|
/>
|
|
<Styled.CustomCheckbox />
|
|
</Styled.CheckboxWrapper>
|
|
);
|
|
};
|
|
|
|
const Styled: Record<string, AnyStyledComponent> = {};
|
|
|
|
Styled.CustomCheckbox = styled.span`
|
|
width: 1.25em;
|
|
height: 1.25em;
|
|
|
|
position: absolute;
|
|
left: 0;
|
|
right: 0;
|
|
top: 0;
|
|
bottom: 0;
|
|
background-color: var(--checkbox-backgroundColor);
|
|
|
|
&::after {
|
|
position: absolute;
|
|
content: '';
|
|
top: 0.25em;
|
|
left: 0.4375em;
|
|
width: 0.3125em;
|
|
height: 0.5em;
|
|
border: solid var(--checkbox-checkColor);
|
|
border-width: 0 0.125em 0.125em 0;
|
|
border-radius: 0.0625em;
|
|
opacity: 0;
|
|
transform: rotate(0deg) scale(0);
|
|
transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out;
|
|
}
|
|
|
|
@media ${breakpoints.tablet} {
|
|
width: 1.5em;
|
|
height: 1.5em;
|
|
|
|
&::after {
|
|
top: 0.25em;
|
|
left: 0.4375em;
|
|
width: 0.4375em;
|
|
height: 0.625em;
|
|
}
|
|
}
|
|
`;
|
|
|
|
Styled.CheckboxWrapper = styled.div`
|
|
--checkbox-backgroundColor: var(--color-layer-1);
|
|
--checkbox-checkColor: var(--color-text-1);
|
|
|
|
display: flex;
|
|
border-radius: 0.25em;
|
|
overflow: hidden;
|
|
position: relative;
|
|
cursor: pointer;
|
|
|
|
> input:checked ~ ${Styled.CustomCheckbox}::after {
|
|
opacity: 1;
|
|
transform: rotate(40deg) scale(1);
|
|
}
|
|
`;
|
|
|
|
Styled.Checkbox = styled.input`
|
|
width: 1.25em;
|
|
height: 1.25em;
|
|
z-index: 1;
|
|
cursor: pointer;
|
|
opacity: 0;
|
|
|
|
@media ${breakpoints.tablet} {
|
|
width: 1.5em;
|
|
height: 1.5em;
|
|
}
|
|
`;
|