29 lines
903 B
TypeScript
29 lines
903 B
TypeScript
import React from 'react';
|
|
import cn from 'classnames';
|
|
import MetaItem from '../MetaItem';
|
|
import MetaMoreButton from '../MetaMoreButton';
|
|
|
|
interface Props {
|
|
className?: string;
|
|
metaList: any[];
|
|
maxLength?: number;
|
|
onMetaClick?: (meta: { name: string, value: string }) => void;
|
|
}
|
|
|
|
export default function SessionMetaList(props: Props) {
|
|
const { className = '', metaList, maxLength = 14 } = props;
|
|
|
|
return (
|
|
<div className={cn('flex items-center flex-wrap gap-1', className)}>
|
|
{metaList.slice(0, maxLength).map(({ label, value }, index) => (
|
|
<div key={index} className='cursor-pointer' onClick={() => props.onMetaClick?.({ name: `_${label}`, value })}>
|
|
<MetaItem label={label} value={`${value}`} />
|
|
</div>
|
|
))}
|
|
|
|
{metaList.length > maxLength && (
|
|
<MetaMoreButton list={metaList} maxLength={maxLength} />
|
|
)}
|
|
</div>
|
|
);
|
|
}
|