examples/web_ui/frontend/src/components/panel/PanelEmpty.tsx

import type { LucideIcon } from 'lucide-react';

import {
	Empty,
	EmptyDescription,
	EmptyHeader,
	EmptyMedia,
	EmptyTitle,
} from '@/components/ui/empty';
import { cn } from '@/lib/utils';

interface PanelEmptyProps {
	/** Icon communicating the kind of emptiness (no data vs no results). */
	icon: LucideIcon;
	/** Short heading, e.g. "No MCP servers" or "No results". */
	title: string;
	/** Optional secondary explanation line. */
	description?: string;
	className?: string;
}

/**

 * A reusable empty-state for dock panels. Fills the remaining vertical

 * space and centers an icon + title + optional description. Callers

 * distinguish a "no data yet" state from a "search found nothing"

 * state via the {@link icon} and {@link title} they pass.

 *

 * @param icon - The lucide icon to show.

 * @param title - The empty-state heading.

 * @param description - Optional explanatory text.

 * @param className - Extra classes for the wrapper.

 * @returns The centered empty-state element.

 */
export function PanelEmpty({ icon: Icon, title, description, className }: PanelEmptyProps) {
	return (
		<Empty className={cn('flex-1 border-0 p-4', className)}>

			<EmptyHeader>

				<EmptyMedia variant="icon">

					<Icon />

				</EmptyMedia>

				<EmptyTitle>{title}</EmptyTitle>

				{description ? <EmptyDescription>{description}</EmptyDescription> : null}

			</EmptyHeader>

		</Empty>
	);
}