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