63 lines
1.4 KiB
TypeScript
63 lines
1.4 KiB
TypeScript
'use client'
|
|
|
|
export interface SectionHeaderProps {
|
|
title: string
|
|
subtitle?: string
|
|
showSeeAll?: boolean
|
|
seeAllHref?: string
|
|
onSeeAllClick?: () => void
|
|
}
|
|
|
|
export function SectionHeader({
|
|
title,
|
|
subtitle,
|
|
showSeeAll = false,
|
|
seeAllHref,
|
|
onSeeAllClick
|
|
}: SectionHeaderProps) {
|
|
const handleSeeAllClick = (e: React.MouseEvent) => {
|
|
if (onSeeAllClick) {
|
|
e.preventDefault()
|
|
onSeeAllClick()
|
|
}
|
|
}
|
|
|
|
return (
|
|
<div className="flex items-end justify-between mb-6">
|
|
<div>
|
|
<h2 className="text-2xl font-bold text-white mb-1">
|
|
{title}
|
|
</h2>
|
|
{subtitle && (
|
|
<p className="text-sm text-zinc-400">
|
|
{subtitle}
|
|
</p>
|
|
)}
|
|
</div>
|
|
|
|
{showSeeAll && (
|
|
<a
|
|
href={seeAllHref || '#'}
|
|
onClick={handleSeeAllClick}
|
|
className="text-sm font-medium text-zinc-400 hover:text-white transition flex items-center gap-1 group"
|
|
>
|
|
See all
|
|
<svg
|
|
className="w-4 h-4 transition-transform group-hover:translate-x-1"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
viewBox="0 0 24 24"
|
|
>
|
|
<path
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
strokeWidth={2}
|
|
d="M9 5l7 7-7 7"
|
|
/>
|
|
</svg>
|
|
</a>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|