8ec4c9ab63
Pass i18n.language to time display components to ensure locale updates when the user switches languages in UserMenu. Changes: - MemoView: Pass i18n.language to toLocaleString() and <relative-time> lang attribute - MonthNavigator: Wrap with observer to make component reactive to i18n.language changes 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
33 lines
1.4 KiB
TypeScript
33 lines
1.4 KiB
TypeScript
import dayjs from "dayjs";
|
|
import { ChevronLeftIcon, ChevronRightIcon } from "lucide-react";
|
|
import { observer } from "mobx-react-lite";
|
|
import i18n from "@/i18n";
|
|
import type { MonthNavigatorProps } from "@/types/statistics";
|
|
|
|
export const MonthNavigator = observer(({ visibleMonth, onMonthChange }: MonthNavigatorProps) => {
|
|
const currentMonth = dayjs(visibleMonth).toDate();
|
|
|
|
const handlePrevMonth = () => {
|
|
onMonthChange(dayjs(visibleMonth).subtract(1, "month").format("YYYY-MM"));
|
|
};
|
|
|
|
const handleNextMonth = () => {
|
|
onMonthChange(dayjs(visibleMonth).add(1, "month").format("YYYY-MM"));
|
|
};
|
|
|
|
return (
|
|
<div className="w-full mb-1 flex flex-row justify-between items-center gap-1">
|
|
<span className="relative text-sm text-muted-foreground">
|
|
{currentMonth.toLocaleString(i18n.language, { year: "numeric", month: "long" })}
|
|
</span>
|
|
<div className="flex justify-end items-center shrink-0 gap-1">
|
|
<button className="cursor-pointer hover:opacity-80 transition-opacity" onClick={handlePrevMonth} aria-label="Previous month">
|
|
<ChevronLeftIcon className="w-5 h-auto shrink-0 opacity-40" />
|
|
</button>
|
|
<button className="cursor-pointer hover:opacity-80 transition-opacity" onClick={handleNextMonth} aria-label="Next month">
|
|
<ChevronRightIcon className="w-5 h-auto shrink-0 opacity-40" />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
);
|
|
});
|