feat(02-01): create useMonthParam hook and MonthNavigator component
- useMonthParam reads/writes month URL search param with YYYY-MM fallback - navigateMonth handles year rollover via Date constructor - MonthNavigator renders prev/next arrows with Select dropdown - Dropdown lists available budget months with locale-aware formatting
This commit is contained in:
60
src/components/dashboard/MonthNavigator.tsx
Normal file
60
src/components/dashboard/MonthNavigator.tsx
Normal file
@@ -0,0 +1,60 @@
|
||||
import { ChevronLeft, ChevronRight } from "lucide-react"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from "@/components/ui/select"
|
||||
import { useMonthParam } from "@/hooks/useMonthParam"
|
||||
|
||||
interface MonthNavigatorProps {
|
||||
availableMonths: string[]
|
||||
t: (key: string) => string
|
||||
}
|
||||
|
||||
function formatMonthLabel(yyyyMm: string): string {
|
||||
const [year, mo] = yyyyMm.split("-").map(Number)
|
||||
const date = new Date(year, mo - 1, 1)
|
||||
return date.toLocaleDateString(undefined, { month: "long", year: "numeric" })
|
||||
}
|
||||
|
||||
export function MonthNavigator({ availableMonths, t: _t }: MonthNavigatorProps) {
|
||||
const { month, setMonth, navigateMonth } = useMonthParam()
|
||||
|
||||
return (
|
||||
<div className="flex items-center gap-1">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
onClick={() => navigateMonth(-1)}
|
||||
aria-label="Previous month"
|
||||
>
|
||||
<ChevronLeft />
|
||||
</Button>
|
||||
|
||||
<Select value={month} onValueChange={setMonth}>
|
||||
<SelectTrigger className="w-[180px]">
|
||||
<SelectValue>{formatMonthLabel(month)}</SelectValue>
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{availableMonths.map((m) => (
|
||||
<SelectItem key={m} value={m}>
|
||||
{formatMonthLabel(m)}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
onClick={() => navigateMonth(1)}
|
||||
aria-label="Next month"
|
||||
>
|
||||
<ChevronRight />
|
||||
</Button>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
26
src/hooks/useMonthParam.ts
Normal file
26
src/hooks/useMonthParam.ts
Normal file
@@ -0,0 +1,26 @@
|
||||
import { useSearchParams } from "react-router-dom"
|
||||
|
||||
export function useMonthParam() {
|
||||
const [searchParams, setSearchParams] = useSearchParams()
|
||||
|
||||
const monthParam = searchParams.get("month")
|
||||
const now = new Date()
|
||||
const currentMonth = `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, "0")}`
|
||||
const month = monthParam || currentMonth
|
||||
|
||||
const setMonth = (newMonth: string) => {
|
||||
setSearchParams((prev) => {
|
||||
prev.set("month", newMonth)
|
||||
return prev
|
||||
})
|
||||
}
|
||||
|
||||
const navigateMonth = (delta: number) => {
|
||||
const [year, mo] = month.split("-").map(Number)
|
||||
const d = new Date(year, mo - 1 + delta, 1)
|
||||
const next = `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, "0")}`
|
||||
setMonth(next)
|
||||
}
|
||||
|
||||
return { month, setMonth, navigateMonth }
|
||||
}
|
||||
Reference in New Issue
Block a user