53 lines
1.2 KiB
TypeScript
53 lines
1.2 KiB
TypeScript
|
import styled from 'styled-components';
|
||
|
|
|
||
|
|
interface DaysSectionProps {
|
||
|
|
value: number;
|
||
|
|
onChange: (value: number) => void;
|
||
|
|
}
|
||
|
|
|
||
|
|
const options = [1, 3, 7];
|
||
|
|
|
||
|
|
export function DaysSection({ value, onChange }: DaysSectionProps) {
|
||
|
|
return (
|
||
|
|
<DaysOptions>
|
||
|
|
{options.map(option => (
|
||
|
|
<DayButton
|
||
|
|
key={option}
|
||
|
|
type="button"
|
||
|
|
$active={value === option}
|
||
|
|
onClick={() => onChange(option)}
|
||
|
|
>
|
||
|
|
{option}
|
||
|
|
</DayButton>
|
||
|
|
))}
|
||
|
|
</DaysOptions>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
const DaysOptions = styled.div`
|
||
|
|
display: flex;
|
||
|
|
gap: 12px;
|
||
|
|
`;
|
||
|
|
|
||
|
|
const DayButton = styled.button<{ $active: boolean }>`
|
||
|
|
flex: 1;
|
||
|
|
max-width: 140px;
|
||
|
|
height: 52px;
|
||
|
|
border: 2px solid ${({ $active }) => ($active ? '#5EA12D' : '#e1e1e1')};
|
||
|
|
border-radius: 8px;
|
||
|
|
background: ${({ $active }) => ($active ? '#E6F696' : '#ffffff')};
|
||
|
|
font-size: 16px;
|
||
|
|
line-height: 19px;
|
||
|
|
font-weight: 350;
|
||
|
|
color: ${({ theme }) => theme.colors.darkGreen};
|
||
|
|
cursor: pointer;
|
||
|
|
transition: 0.2s;
|
||
|
|
|
||
|
|
&:hover {
|
||
|
|
border-color: ${({ theme }) => theme.colors.green};
|
||
|
|
}
|
||
|
|
|
||
|
|
&:focus {
|
||
|
|
outline: none;
|
||
|
|
}
|
||
|
|
`;
|