38 lines
916 B
TypeScript
38 lines
916 B
TypeScript
import type { Icon } from '@phosphor-icons/react';
|
|
import { cn } from '@/lib/utils';
|
|
|
|
interface SectionHeaderProps {
|
|
title: string;
|
|
icon?: Icon;
|
|
onIconClick?: () => void;
|
|
className?: string;
|
|
}
|
|
|
|
export function SectionHeader({
|
|
title,
|
|
icon: IconComponent,
|
|
onIconClick,
|
|
className,
|
|
}: SectionHeaderProps) {
|
|
return (
|
|
<div
|
|
className={cn(
|
|
'flex items-center justify-between w-full border-b px-base py-half bg-secondary border-l-half border-l-low',
|
|
className
|
|
)}
|
|
>
|
|
<span className="font-medium truncate text-normal">{title}</span>
|
|
{IconComponent && onIconClick && (
|
|
<button
|
|
type="button"
|
|
onClick={onIconClick}
|
|
onMouseDown={(e) => e.preventDefault()}
|
|
className="text-low hover:text-normal"
|
|
>
|
|
<IconComponent className="size-icon-xs" weight="bold" />
|
|
</button>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|