32 lines
1 KiB
TypeScript
32 lines
1 KiB
TypeScript
import React from 'react'
|
|
import { Popup } from 'UI'
|
|
import MetaItem from '../MetaItem'
|
|
|
|
interface Props {
|
|
list: any[],
|
|
maxLength: number,
|
|
}
|
|
export default function MetaMoreButton(props: Props) {
|
|
const { list, maxLength } = props
|
|
return (
|
|
<Popup
|
|
className="p-0"
|
|
theme="light"
|
|
content={
|
|
<div className="text-sm grid grid-col p-4 gap-3" style={{ maxHeight: '200px', overflowY: 'auto'}}>
|
|
{list.slice(maxLength).map(({ label, value }, index) => (
|
|
<MetaItem key={index} label={label} value={value} />
|
|
))}
|
|
</div>
|
|
}
|
|
on="click"
|
|
position="center center"
|
|
>
|
|
<div className=" flex items-center">
|
|
<span className="rounded bg-active-blue color-teal p-2 color-gray-dark cursor-pointer whitespace-nowrap">
|
|
+{list.length - maxLength} More
|
|
</span>
|
|
</div>
|
|
</Popup>
|
|
)
|
|
}
|