I am facing an issue while trying to display the note description over the trash icon in a React app. I have tried various methods but can't seem to achieve the desired effect. Can anyone guide me on how to get this layout?
Here is what I intend to achieve:
And here is what I currently have:
This is my code snippet in React:
import React from 'react';
import { FiTrash2, FiCalendar, FiBookmark } from 'react-icons/fi';
import { NoteType } from '../../utils/types';
import { formatDate } from '../../utils/functions';
import './styles.css';
interface NoteItem {
note: NoteType;
onEdit(): void;
onDelete(): void;
}
const NoteItem: React.FC<NoteItem> = ({ note, onEdit, onDelete }) => {
return (
<div className="NoteItem" style={{ borderColor: note.color }}>
<div className="info" onClick={ onEdit }>
<p>{ note.description }</p>
<div className="rows">
<div className="row">
<FiBookmark size={ 18 } className="icon" color={ note.color } />
<p>{ note.status }</p>
</div>
<div className="row">
<FiCalendar size={ 18 } className="icon" color={ note.color } />
<p>{ formatDate(note.created_at) }</p>
</div>
</div>
</div>
<div className="buttons">
<button title="Deletar" onClick={ onDelete }>
<FiTrash2 size={ 18 } className="remove" />
</button>
</div>
</div>
);
}
export default NoteItem;
If anyone has any suggestions or solutions, please feel free to share them. Your help will be greatly appreciated!