Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 | 37x | import { Button } from "@/ahuora-design-system/ui/button";
import { toast } from "sonner";
import { X, Pencil } from "lucide-react";
import { NoteRead, useCoreNoteDestroyMutation } from "@/api/apiStore.gen";
type NoteProps = {
data: NoteRead;
showEditor: React.Dispatch<React.SetStateAction<boolean>>;
setNoteTitle: React.Dispatch<React.SetStateAction<string>>;
setNoteContent: React.Dispatch<React.SetStateAction<string>>;
setEditingNoteId: React.Dispatch<React.SetStateAction<number | null>>;
};
// Component to display individual saved note
const Note = ({
data,
showEditor,
setNoteTitle,
setNoteContent,
setEditingNoteId,
}: NoteProps) => {
const [deleteNote] = useCoreNoteDestroyMutation();
const displayDate = new Date(data.savedDate || "").toLocaleDateString(
"en-GB"
);
const deleteNoteHandler = () => {
const promise = deleteNote({ id: data.id });
toast.promise(promise, {
success: "Note deleted",
error: "Failed to delete note",
});
};
const editNoteHandler = () => {
showEditor(true);
setNoteTitle(data.title);
setNoteContent(data.content);
setEditingNoteId(data.id);
};
return (
<div className="relative bg-muted p-4 my-4 rounded-lg w-full">
{/* Saved date */}
<div className="flex justify-between w-full">
<p className="text-gray-500 text-xs text-left p">{displayDate}</p>
<div className="flex justify-end">
{/* Edit button */}
<Button
className="absolute h-4 pr-6"
variant="ghost"
onClick={editNoteHandler}
>
<Pencil />
</Button>
{/* Delete button */}
<Button
size="icon"
className="absolute h-4 w-4"
variant="ghost"
onClick={deleteNoteHandler}
>
<X />
</Button>
</div>
</div>
<div className="flex justify-between mb-3">
{/* Note title */}
<h1>{data.title}</h1>
</div>
{/* Note content */}
<div
className="prose prose-invert text-balance w-full break-all"
dangerouslySetInnerHTML={{ __html: data.content }}
/>
</div>
);
};
export default Note;
|