feat: delete local notes

src/components/button.jsx

@@ -3,18 +3,6 @@ import { Link } from "react-router-dom";
 function Button(props) {
   return (
     <Link to={props.href} className={props.className}>
-      <div
-        className={`transition-transform w-48 ease-[cubic-bezier(.69,.58,.32,1.69)] hover:scale-105  p-2 pl-6 text-lg bg-zinc-100 hover:bg-zinc-300 dark:bg-zinc-600 dark:hover:bg-zinc-800 rounded-2xl ${props.className}`}
-      >
-        {props.children}
-      </div>
-    </Link>
-  );
-}
-
-function ButtonWithAction(props) {
-  return (
-    <Link to="#">
       <div
         onClick={props.onClick}
         className={`transition-transform w-48 ease-[cubic-bezier(.69,.58,.32,1.69)] hover:scale-105  p-2 pl-6 text-lg bg-zinc-100 hover:bg-zinc-300 dark:bg-zinc-600 dark:hover:bg-zinc-800 rounded-2xl ${props.className}`}
@@ -42,4 +30,4 @@ function IconWithButton(props) {
   );
 }
 
-export { Button, IconWithButton, ButtonWithAction };
+export { Button, IconWithButton };

src/pages/note.jsx

@@ -1,7 +1,7 @@
 import ReactMarkdown from "react-markdown";
 import { useParams } from "react-router-dom";
 import printDate from "../components/utils";
-import { ChevronDoubleLeftIcon } from "@heroicons/react/24/outline";
+import { ChevronDoubleLeftIcon, TrashIcon } from "@heroicons/react/24/outline";
 import { Button, IconWithButton } from "../components/button";
 
 function Note() {
@@ -21,6 +21,7 @@ function Note() {
             Заметки
           </IconWithButton>
         </Button>
+
         <div className="border border-blue-300 rounded-lg p-4">
           <div className="grid grid-cols-1 lg:grid-cols-2">
             <h2 className="font-medium text-center lg:text-left leading-tight text-4xl mt-0 mb-2">
@@ -34,10 +35,44 @@ function Note() {
             <ReactMarkdown>{note.text}</ReactMarkdown>
           </div>
         </div>
+        <div className="grid grid-cols-1">
+          <div className="justify-self-center lg:justify-self-end">
+            <Button
+              className="mt-4"
+              href="/notes"
+              onClick={() => {
+                let notesObj = localStorage.getObj("Notes");
+
+                delete notesObj[params.id];
+
+                localStorage.setObj("Notes", notesObj);
+              }}
+            >
+              <IconWithButton
+                icon={<TrashIcon className="transform translate-z-0 h-7 w-7" />}
+              >
+                Удалить
+              </IconWithButton>
+            </Button>
+          </div>
+        </div>
       </div>
     );
   } else {
-    return <div />;
+    return (
+      <div>
+        <Button className="mb-4" href="/notes">
+          <IconWithButton
+            icon={
+              <ChevronDoubleLeftIcon className="transform translate-z-0 h-7 w-7" />
+            }
+          >
+            Заметки
+          </IconWithButton>
+        </Button>
+        <div>Заметки не существует.</div>
+      </div>
+    );
   }
 }