40 lines
1.4 KiB
TypeScript
40 lines
1.4 KiB
TypeScript
import clsx from 'clsx';
|
|
|
|
export type DescriptionsItemProps = {
|
|
title: React.ReactNode;
|
|
content: React.ReactNode;
|
|
span?: number | 'filled';
|
|
isFirstRow?: boolean;
|
|
titleWidth?: number;
|
|
titleClassName?: string;
|
|
contentClassName?: string;
|
|
};
|
|
|
|
export const DescriptionsItem = (props: DescriptionsItemProps) => {
|
|
const { title, content, span, isFirstRow = false, titleWidth, titleClassName, contentClassName } = props;
|
|
|
|
const gridColumnStyle =
|
|
span === 'filled' ? { gridColumn: '1 / -1' } : span && span > 0 ? { gridColumn: `span ${span}` } : {};
|
|
|
|
return (
|
|
<div className="flex" style={gridColumnStyle}>
|
|
<div
|
|
className={`flex w-25 min-h-10 items-center px-4 bg-primary-tertiary01 text-primary-secondary text-sm font-semibold border-b border-white ${titleClassName || ''}`}
|
|
style={{ width: titleWidth }}
|
|
>
|
|
{title}
|
|
</div>
|
|
<div
|
|
className={clsx(
|
|
'relative flex flex-1 items-center pl-4 pr-3 py-2 text-sm font-medium text-dabeeo-black-22 overflow-x-auto after:content-[\'\'] after:absolute after:left-0 after:right-0 after:bottom-0 after:h-px after:bg-primary-tertiary01',
|
|
contentClassName,
|
|
isFirstRow &&
|
|
'before:content-[\'\'] before:absolute before:left-0 before:right-0 before:top-0 before:h-px before:bg-primary-tertiary01'
|
|
)}
|
|
>
|
|
{content}
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|