52 lines
1.2 KiB
TypeScript
52 lines
1.2 KiB
TypeScript
'use client';
|
|
|
|
import { useTranslations } from 'next-intl';
|
|
import { FORM_SELECT_CLASS } from '@/components/shared/formSelectStyles';
|
|
import type { TodayChartPeriod } from '@/components/today/chart-periods';
|
|
|
|
type TodayChartPeriodSelectProps = {
|
|
value: TodayChartPeriod;
|
|
options: readonly TodayChartPeriod[];
|
|
onChange: (period: TodayChartPeriod) => void;
|
|
disabled?: boolean;
|
|
id?: string;
|
|
};
|
|
|
|
export function TodayChartPeriodSelect({
|
|
value,
|
|
options,
|
|
onChange,
|
|
disabled = false,
|
|
id,
|
|
}: TodayChartPeriodSelectProps) {
|
|
const t = useTranslations('today');
|
|
|
|
const labelFor = (period: TodayChartPeriod) => {
|
|
switch (period) {
|
|
case 'month':
|
|
return t('periodMonth');
|
|
case 'year':
|
|
return t('periodYear');
|
|
default:
|
|
return t('periodWeek');
|
|
}
|
|
};
|
|
|
|
return (
|
|
<select
|
|
id={id}
|
|
value={value}
|
|
disabled={disabled}
|
|
aria-label={t('periodSelectAria')}
|
|
className={`${FORM_SELECT_CLASS} max-w-[7.5rem] shrink-0 py-0.5 text-xs`}
|
|
onChange={(event) => onChange(event.target.value as TodayChartPeriod)}
|
|
>
|
|
{options.map((period) => (
|
|
<option key={period} value={period}>
|
|
{labelFor(period)}
|
|
</option>
|
|
))}
|
|
</select>
|
|
);
|
|
}
|