import { Tooltip } from '@vegaprotocol/ui-toolkit'; import type { ReactElement, ReactNode } from 'react'; import { Children } from 'react'; import { cloneElement } from 'react'; interface TradeMarketHeaderProps { title: ReactNode; children: Array<ReactElement | null>; } export const Header = ({ title, children }: TradeMarketHeaderProps) => { return ( <header className="w-screen xl:px-4 pt-2 border-b border-default"> <div className="xl:flex xl:gap-4 items-end"> <div className="px-4 xl:px-0 pb-2 xl:pb-3">{title}</div> <div data-testid="header-summary" className="flex flex-nowrap items-end xl:flex-1 w-full overflow-x-auto text-xs" > {Children.map(children, (child, index) => { if (!child) return null; return cloneElement(child, { id: `header-stat-${index}`, }); })} </div> </div> </header> ); }; export const HeaderStat = ({ children, heading, id, description, testId, }: { children: ReactNode; heading: string; id?: string; description?: string | ReactNode; testId?: string; }) => { const itemClass = 'min-w-min w-[120px] whitespace-nowrap pb-3 px-4 border-l border-default first:border-none text-neutral-500 dark:text-neutral-400'; const itemHeading = 'text-black dark:text-white'; return ( <div data-testid={testId} className={itemClass}> <div data-testid="item-header" id={id}> {heading} </div> <Tooltip description={description}> <div data-testid="item-value" aria-labelledby={id} className={itemHeading} > {children} </div> </Tooltip> </div> ); }; export const HeaderTitle = ({ primaryContent, secondaryContent, }: { primaryContent: ReactNode; secondaryContent: ReactNode; }) => { return ( <div className="text-left" data-testid="header-title"> <div className="text-sm md:text-md lg:text-lg whitespace-nowrap !leading-[1]"> {primaryContent} </div> <div className="text-xs whitespace-nowrap text-vega-light-300 dark:text-vega-dark-300"> {secondaryContent} </div> </div> ); };