39 lines
835 B
TypeScript
39 lines
835 B
TypeScript
import { ActionIcon, Box, Group, Text } from '@mantine/core';
|
|
import { useState } from 'react';
|
|
import { FiEdit } from 'react-icons/fi';
|
|
|
|
function BookmarkSettingsItem({ bookmark }: any) {
|
|
const [hover, setHover] = useState(false);
|
|
return (
|
|
<Box
|
|
style={{
|
|
cursor: 'pointer',
|
|
borderRadius: '4px',
|
|
color: 'var(--color-text-acc)',
|
|
backgroundColor: 'var(--color-search-background)',
|
|
padding: '8px',
|
|
}}
|
|
onMouseEnter={() => setHover(true)}
|
|
onMouseLeave={() => setHover(false)}
|
|
>
|
|
<Group>
|
|
<Text>{bookmark.name}</Text>
|
|
{hover && (
|
|
<ActionIcon
|
|
variant='subtle'
|
|
style={{
|
|
position: 'absolute',
|
|
right: 24,
|
|
color: 'var(--color-text-acc)',
|
|
}}
|
|
>
|
|
<FiEdit />
|
|
</ActionIcon>
|
|
)}
|
|
</Group>
|
|
</Box>
|
|
);
|
|
}
|
|
|
|
export default BookmarkSettingsItem;
|