Spaces:
Running
Running
File size: 1,551 Bytes
23680f2 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 |
"use client";
import { ReactNode } from "react";
import { cn } from "@/lib/utils";
interface PanelHeaderProps {
icon?: ReactNode;
title: string;
subtitle?: string;
children?: ReactNode; // Toolbar actions slot
className?: string;
}
/**
* Rerun-style panel header with icon, title, and optional toolbar.
*
* Design tokens (from Rerun):
* - Title bar height: 24px
* - Icon size: 14px (3.5 tailwind units)
* - Icon-to-text gap: 4px (gap-1)
* - Font size: 12px with -0.15px tracking
* - Section header font: 11px uppercase
*/
export function PanelHeader({ icon, title, subtitle, children, className }: PanelHeaderProps) {
return (
<div className={cn(
// 24px height matches Rerun's title_bar_height()
"h-6 min-h-[24px] flex items-center justify-between px-3 border-b border-border bg-secondary select-none",
className
)}>
<div className="flex items-center gap-1 min-w-0">
{icon && (
// 14px icon (3.5 tailwind units) with 4px gap to text
<span className="flex-shrink-0 w-3.5 h-3.5 text-muted-foreground">{icon}</span>
)}
{/* 12px font, medium weight, tight tracking */}
<span className="text-[12px] leading-[16px] font-medium tracking-[-0.15px] text-foreground truncate">{title}</span>
{subtitle && (
<span className="text-[11px] leading-4 text-muted-foreground truncate">{subtitle}</span>
)}
</div>
{children && (
<div className="flex items-center gap-1">{children}</div>
)}
</div>
);
}
|