| import type { ReactNode } from "react"; | |
| import { cn } from "#/utils/utils"; | |
| type ConversationTabEmptyStateProps = { | |
| icon: ReactNode; | |
| children: ReactNode; | |
| action?: ReactNode; | |
| className?: string; | |
| }; | |
| /** | |
| * Shared empty state for right-drawer conversation tabs: small muted icon, | |
| * centered caption, optional action (use {@link BrandButton} variant="secondary"). | |
| */ | |
| export function ConversationTabEmptyState({ | |
| icon, | |
| children, | |
| action, | |
| className, | |
| }: ConversationTabEmptyStateProps) { | |
| return ( | |
| <div | |
| className={cn( | |
| "flex flex-col items-center justify-center w-full h-full p-10 gap-4 text-center", | |
| className, | |
| )} | |
| > | |
| <div | |
| className="shrink-0 text-[var(--oh-muted)] [&_svg]:size-10 [&_svg]:max-h-10 [&_svg]:max-w-10 [&_svg]:shrink-0" | |
| aria-hidden | |
| > | |
| {icon} | |
| </div> | |
| <p className="max-w-sm text-center text-sm font-normal leading-5 text-[var(--oh-muted)]"> | |
| {children} | |
| </p> | |
| {action ? <div className="flex justify-center pt-1">{action}</div> : null} | |
| </div> | |
| ); | |
| } | |