openreplay/frontend/app/components/shared/SessionItem/MetaMoreButton/MetaMoreButton.tsx
Delirium 968a3eefde
ui: migrating old components -> ant (#3060)
* ui: migrating old components -> ant

* ui: moving input, tooltip, toggler, checkbox... -> Toggler\s*(.)? from 'UI

* ui: more components moved

* ui: move popover to ant
2025-02-24 16:11:44 +01:00

31 lines
815 B
TypeScript

import React from 'react';
import { Popover } from 'UI';
import { Button } from 'antd'
import MetaItem from '../MetaItem';
interface Props {
list: any[];
maxLength: number;
}
export default function MetaMoreButton(props: Props) {
const { list, maxLength } = props;
return (
<Popover
render={() => (
<div
className="text-sm grid grid-col p-4 gap-3 bg-white"
style={{ maxHeight: '200px', overflowY: 'auto' }}
>
{list.slice(maxLength).map(({ label, value }, index) => (
<MetaItem key={index} label={label} value={value} />
))}
</div>
)}
placement="bottom"
>
<div className="flex items-center">
<Button variant="text">+{list.length - maxLength} More</Button>
</div>
</Popover>
);
}