Jakob Wennberg
86 lines
2.1 KiB
TypeScript
86 lines
2.1 KiB
TypeScript
'use client'
|
|
|
|
import { ChevronLeft, ChevronRight } from 'lucide-react'
|
|
import { Button } from '@/components/ui/button'
|
|
import { CalendarViewMode } from '@/types'
|
|
import {
|
|
SWEDISH_MONTHS,
|
|
getWeekNumber,
|
|
formatDayViewHeader,
|
|
} from '@/lib/calendar/utils'
|
|
import { ViewModeSelector } from './ViewModeSelector'
|
|
|
|
interface CalendarHeaderProps {
|
|
year: number
|
|
month: number
|
|
currentDate?: Date
|
|
viewMode?: CalendarViewMode
|
|
onPrevious: () => void
|
|
onNext: () => void
|
|
onToday: () => void
|
|
onViewModeChange?: (mode: CalendarViewMode) => void
|
|
}
|
|
|
|
export function CalendarHeader({
|
|
year,
|
|
month,
|
|
currentDate,
|
|
viewMode = 'month',
|
|
onPrevious,
|
|
onNext,
|
|
onToday,
|
|
onViewModeChange,
|
|
}: CalendarHeaderProps) {
|
|
// Generate title based on view mode
|
|
const getTitle = () => {
|
|
switch (viewMode) {
|
|
case 'week':
|
|
if (currentDate) {
|
|
const weekNum = getWeekNumber(currentDate)
|
|
return `Vecka ${weekNum}, ${currentDate.getFullYear()}`
|
|
}
|
|
return `${SWEDISH_MONTHS[month]} ${year}`
|
|
|
|
case 'day':
|
|
if (currentDate) {
|
|
return formatDayViewHeader(currentDate)
|
|
}
|
|
return `${SWEDISH_MONTHS[month]} ${year}`
|
|
|
|
case 'month':
|
|
default:
|
|
return `${SWEDISH_MONTHS[month]} ${year}`
|
|
}
|
|
}
|
|
|
|
return (
|
|
<div className="flex items-center justify-between mb-4">
|
|
<div className="flex items-center gap-2">
|
|
<Button variant="outline" size="icon" onClick={onPrevious}>
|
|
<ChevronLeft className="h-4 w-4" />
|
|
</Button>
|
|
<Button variant="outline" size="icon" onClick={onNext}>
|
|
<ChevronRight className="h-4 w-4" />
|
|
</Button>
|
|
<Button variant="outline" size="sm" onClick={onToday}>
|
|
Idag
|
|
</Button>
|
|
</div>
|
|
|
|
<h2 className="text-xl font-semibold capitalize">
|
|
{getTitle()}
|
|
</h2>
|
|
|
|
{onViewModeChange && (
|
|
<ViewModeSelector
|
|
viewMode={viewMode}
|
|
onViewModeChange={onViewModeChange}
|
|
/>
|
|
)}
|
|
|
|
{/* Spacer when no view mode selector */}
|
|
{!onViewModeChange && <div />}
|
|
</div>
|
|
)
|
|
}
|