vega-frontend-monorepo/apps/trading/components/header/header.tsx
2023-05-16 16:57:36 +00:00

85 lines
2.2 KiB
TypeScript

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-4">
{primaryContent}
</div>
<div className="text-xs whitespace-nowrap text-neutral-500 dark:text-neutral-400">
{secondaryContent}
</div>
</div>
);
};