openreplay/frontend/app/components/Client/CustomFields/ListItem.js
2022-08-24 15:22:20 +02:00

26 lines
844 B
JavaScript

import React from 'react';
import cn from 'classnames';
import { Button } from 'UI';
import styles from './listItem.module.css';
const ListItem = ({ field, onEdit, disabled }) => {
return (
<div
className={cn(
'border-t group hover:bg-active-blue flex items-center justify-between py-3 px-5 cursor-pointer',
field.index === 0 ? styles.preDefined : '',
{
[styles.disabled]: disabled,
}
)}
onClick={() => field.index != 0 && onEdit(field)}
>
<span>{field.key}</span>
<div className="invisible group-hover:visible" data-hidden={field.index === 0}>
<Button variant="text-primary" icon="pencil" />
</div>
</div>
);
};
export default ListItem;