72 lines
1.7 KiB
TypeScript
72 lines
1.7 KiB
TypeScript
import clsx from 'clsx';
|
|
|
|
import { AutomationTestingProps } from '@/types';
|
|
|
|
import { CopyButton } from '@@/buttons/CopyButton';
|
|
|
|
type FileNameHeaderProps = {
|
|
fileName: string;
|
|
copyText: string;
|
|
className?: string;
|
|
style?: React.CSSProperties;
|
|
} & AutomationTestingProps;
|
|
|
|
/**
|
|
* FileNameHeaderRow: Outer container for file name headers (single or multiple columns).
|
|
* Use this to wrap one or more <FileNameHeader> components (and optional dividers).
|
|
*/
|
|
export function FileNameHeaderRow({
|
|
children,
|
|
className,
|
|
style,
|
|
}: {
|
|
children: React.ReactNode;
|
|
className?: string;
|
|
style?: React.CSSProperties;
|
|
}) {
|
|
return (
|
|
<div
|
|
className={clsx(
|
|
'flex w-full text-sm text-muted border-0 border-b border-solid border-b-gray-5 th-dark:border-b-gray-7 th-highcontrast:border-b-gray-2 bg-gray-2 th-dark:bg-gray-10 th-highcontrast:bg-black [scrollbar-gutter:stable] overflow-auto',
|
|
className
|
|
)}
|
|
style={style}
|
|
>
|
|
{children}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
/**
|
|
* FileNameHeader: Renders a file name with a copy button, styled for use above a code editor or diff viewer.
|
|
* Should be used inside FileNameHeaderRow.
|
|
*/
|
|
export function FileNameHeader({
|
|
fileName,
|
|
copyText,
|
|
className = '',
|
|
style,
|
|
'data-cy': dataCy,
|
|
}: FileNameHeaderProps) {
|
|
return (
|
|
<div
|
|
className={clsx(
|
|
'w-full overflow-auto flex justify-between items-center gap-x-2 px-4 py-1 text-sm text-muted',
|
|
className
|
|
)}
|
|
style={style}
|
|
>
|
|
{fileName}
|
|
<CopyButton
|
|
data-cy={dataCy}
|
|
copyText={copyText}
|
|
color="link"
|
|
className="!pr-0 !text-sm !font-medium hover:no-underline focus:no-underline"
|
|
indicatorPosition="left"
|
|
>
|
|
Copy
|
|
</CopyButton>
|
|
</div>
|
|
);
|
|
}
|