105 lines
4 KiB
JavaScript
105 lines
4 KiB
JavaScript
import { useState, useEffect } from "react";
|
|
import Card from "../reusableCard/index";
|
|
import { addNote, showNotes, hideNotes } from "../../assets/SvgIcons/SvgIcons";
|
|
|
|
const StickyNote = () => {
|
|
const [notes, setNotes] = useState([]);
|
|
const [showNote, setShowNote] = useState(true);
|
|
|
|
useEffect(() => {
|
|
const savedNotes = JSON?.parse(localStorage?.getItem("stickyNotes")) || [];
|
|
setNotes(savedNotes);
|
|
}, []);
|
|
|
|
const handleShowNote = () => {
|
|
setShowNote(!showNote);
|
|
};
|
|
|
|
const handleAddNote = () => {
|
|
setNotes([...notes, { id: Date.now(), content: "" }]); //Reference
|
|
};
|
|
|
|
const handleDeleteNote = (id) => {
|
|
setNotes(notes?.filter((note) => note?.id !== id));
|
|
};
|
|
|
|
const handleSaveNote = (id, content) => {
|
|
let notesData = notes?.map((note) =>
|
|
note?.id === id ? { ...note, content } : note
|
|
);
|
|
setNotes(notesData);
|
|
localStorage?.setItem("stickyNotes", JSON.stringify(notes));
|
|
};
|
|
|
|
return (
|
|
<>
|
|
<div className=" h-30 sm:h-20 w-full text-center text-4xl transition scale-110">
|
|
<p className="uppercase py-8 font-bold scale-110 cursor-pointer">Sticky Notes Application</p>
|
|
</div>
|
|
<hr className="h-0.5 mx-auto my-4 bg-gray-100 border-0 rounded md:my-5 dark:bg-gray-700" />
|
|
<div className="p-6 gap-10 flex justify-center">
|
|
<button onClick={handleAddNote} className="">
|
|
<div className="relative inline-flex items-center justify-center p-4 px-6 py-3 overflow-hidden font-medium text-white transition duration-300 ease-out border-2 border-black rounded-full shadow-md group">
|
|
<span className="absolute inset-0 flex items-center justify-center w-full h-full text-white duration-300 -translate-x-full bg-green-600 group-hover:translate-x-0 ease">
|
|
{addNote}
|
|
</span>
|
|
<span className="absolute flex items-center justify-center w-full h-full text-black bg-gradient-to-r from-green-600 to-amber-300 transition-all duration-300 transform group-hover:translate-x-full ease">
|
|
Add note
|
|
</span>
|
|
<span className="relative invisible">Add Note</span>
|
|
</div>
|
|
</button>
|
|
|
|
<button
|
|
onClick={() => {
|
|
handleShowNote();
|
|
}}
|
|
className=""
|
|
>
|
|
<div className="relative inline-flex items-center justify-center p-4 px-5 py-3 overflow-hidden border-2 border-black font-medium text-green-400 transition duration-300 ease-out rounded-full shadow-xl group hover:ring-green-950">
|
|
<span className="absolute inset-0 w-full h-full bg-gradient-to-br from-green-100- via-green-600 to-green-100"></span>
|
|
<span className="absolute bottom-0 right-0 block w-64 h-64 mb-32 mr-4 transition duration-500 origin-bottom-left transform rotate-45 translate-x-24 bg-green-600 rounded-full opacity-30 group-hover:rotate-90 ease"></span>
|
|
<span className="relative text-black">
|
|
{showNote ? (
|
|
<>
|
|
<span className="flex justify-between gap-3">
|
|
Hide Notes {hideNotes}
|
|
</span>
|
|
</>
|
|
) : (
|
|
<>
|
|
<span className="flex justify-between gap-3">
|
|
Show Notes {showNotes}
|
|
</span>
|
|
</>
|
|
)}
|
|
</span>
|
|
</div>
|
|
</button>
|
|
</div>
|
|
<div className="p-10 flex flex-wrap gap-10">
|
|
{notes?.length > 0 ? (
|
|
notes
|
|
?.filter((note) => note?.content || showNote)
|
|
?.map((note) => (
|
|
<Card
|
|
key={note?.id}
|
|
id={note?.id}
|
|
content={note?.content}
|
|
onDelete={() => handleDeleteNote(note?.id)}
|
|
onSave={handleSaveNote}
|
|
/>
|
|
))
|
|
) : (
|
|
<div className="w-full text-center justify-center text-xl text-gray-600">
|
|
No Notes are available. Click on <b>"Add Note button"</b>{" "}
|
|
above to add
|
|
</div>
|
|
)}
|
|
</div>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default StickyNote;
|