PanelHeader

The bar across the top of a side panel, 48 pixels tall to line up with a toolbar beside it: the panel's name, its own controls, and a close button last.

import { PanelHeader } from '@basmilius/react-ui';

import { Filter, RefreshCw } from 'lucide-react';
import { ButtonGroup, CloseButton, IconButton, PanelHeader, Separator } from '@basmilius/react-ui';

export default function PanelHeaderDemo() {
    return (
        <div className="w-80 rounded-lg border border-border bg-surface">
            <PanelHeader title="Changes">
                <span className="grow" />
                <ButtonGroup>
                    <IconButton icon={Filter} label="Filter" size="sm" />
                    <IconButton icon={RefreshCw} label="Refresh" size="sm" />
                </ButtonGroup>
                <Separator />
                <CloseButton label="Close changes" size="sm" onClick={() => {}} />
            </PanelHeader>
            <p className="p-3 text-xs text-text-muted">Nothing changed since the last commit.</p>
        </div>
    );
}

title draws the name as a SectionLabel. Leave it out when you lay out the name yourself. Put a growing spacer between the name and the controls to push them to the end.

PanelHeader renders a <header> and takes its props, title?: ReactNode, className, ref and render. PanelHeaderProps is an exported type.