import { GraphLabel, Typography } from '@neo4j-ndl/react';
import { GraphPropertiesTableProps } from '../../types';
const GraphPropertiesTable = ({ propertiesWithTypes }: GraphPropertiesTableProps): JSX.Element => {
return (
<div className='flex w-full flex-col break-all px-4 text-sm' data-testid='viz-details-pane-properties-table'>
<div className='mb-1 flex! flex-row pl-2'>
<Typography variant='body-medium' className='basis-1/3'>
Key
</Typography>
<Typography variant='body-medium'>Value</Typography>
</div>
{propertiesWithTypes
.filter(({ value }) => value !== undefined && value !== null && value !== '' && !Array.isArray(value))
.map(({ key, value }, _) => {
return (
<div key={key} className='border-palette-neutral-border-weak flex! border-t py-1 pl-2 first:border-none'>
<div className='shrink basis-1/3 overflow-hidden whitespace-nowrap'>
<GraphLabel
type='propertyKey'
className='pointer-events-none max-w-full! text-ellipsis'
htmlAttributes={{
tabIndex: -1,
}}
>
{key}
</GraphLabel>
</div>
<div className={`ml-2 flex-1 whitespace-pre-wrap`}>{value}</div>
</div>
);
})}
</div>
);
};
export default GraphPropertiesTable;
