53 lines
1.4 KiB
TypeScript
53 lines
1.4 KiB
TypeScript
'use client'
|
|
|
|
import { Header } from './header'
|
|
import { useSearchParams, useRouter } from 'next/navigation'
|
|
import { useLabels } from '@/context/LabelContext'
|
|
|
|
interface HeaderWrapperProps {
|
|
onColorFilterChange?: (color: string | null) => void
|
|
}
|
|
|
|
export function HeaderWrapper({ onColorFilterChange }: HeaderWrapperProps) {
|
|
const searchParams = useSearchParams()
|
|
const router = useRouter()
|
|
const { labels } = useLabels()
|
|
|
|
const selectedLabels = searchParams.get('labels')?.split(',').filter(Boolean) || []
|
|
const selectedColor = searchParams.get('color') || null
|
|
|
|
const handleLabelFilterChange = (labels: string[]) => {
|
|
const params = new URLSearchParams(searchParams.toString())
|
|
|
|
if (labels.length > 0) {
|
|
params.set('labels', labels.join(','))
|
|
} else {
|
|
params.delete('labels')
|
|
}
|
|
|
|
router.push(`/?${params.toString()}`)
|
|
}
|
|
|
|
const handleColorFilterChange = (color: string | null) => {
|
|
const params = new URLSearchParams(searchParams.toString())
|
|
|
|
if (color) {
|
|
params.set('color', color)
|
|
} else {
|
|
params.delete('color')
|
|
}
|
|
|
|
router.push(`/?${params.toString()}`)
|
|
onColorFilterChange?.(color)
|
|
}
|
|
|
|
return (
|
|
<Header
|
|
selectedLabels={selectedLabels}
|
|
selectedColor={selectedColor}
|
|
onLabelFilterChange={handleLabelFilterChange}
|
|
onColorFilterChange={handleColorFilterChange}
|
|
/>
|
|
)
|
|
}
|