feat: allNotes

src/App.jsx

@@ -4,6 +4,7 @@ import Menu from "./components/menu";
 import CreateNote from "./pages/create";
 import Save from "./pages/save-local";
 import Note from "./pages/note";
+import Notes from "./pages/notes";
 
 function App() {
   Storage.prototype.setObj = function (key, obj) {
@@ -24,10 +25,7 @@ function App() {
             path="/about"
             element={<div className="col-span-4">О сервисе</div>}
           />
-          <Route
-            path="/notes"
-            element={<div className="col-span-4">Заметки</div>}
-          />
+          <Route path="/notes" element={<Notes />} />
         </Routes>
       </div>
     </div>

src/components/utils.js

@@ -0,0 +1,16 @@
+function printDate(time) {
+  time = new Date(time);
+  function padStr(i) {
+    return i < 10 ? "0" + i : "" + i;
+  }
+
+  let dateStr = `${padStr(time.getHours())}:${padStr(
+    time.getMinutes()
+  )}:${padStr(time.getSeconds())} ${padStr(time.getDate())}.${padStr(
+    1 + time.getMonth()
+  )}.${padStr(time.getFullYear())}`;
+
+  return dateStr;
+}
+
+export default printDate;

src/pages/note.jsx

@@ -2,21 +2,9 @@ import ReactMarkdown from "react-markdown";
 import NotePlaceholder from "../components/notePlaceholder";
 import { useState, useEffect } from "react";
 import { useParams } from "react-router-dom";
-
-function printDate(time) {
-  time = new Date(time);
-  function padStr(i) {
-    return i < 10 ? "0" + i : "" + i;
-  }
-
-  let dateStr = `${padStr(time.getHours())}:${padStr(
-    time.getMinutes()
-  )}:${padStr(time.getSeconds())} ${padStr(time.getDate())}.${padStr(
-    1 + time.getMonth()
-  )}.${padStr(time.getFullYear())}`;
-
-  return dateStr;
-}
+import printDate from "../components/utils";
+import { ChevronDoubleLeftIcon } from "@heroicons/react/24/outline";
+import { Button, IconWithButton } from "../components/button";
 
 function Note() {
   let params = useParams();
@@ -30,17 +18,28 @@ function Note() {
     console.log(note);
 
     return (
-      <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">
-            {note.name}
-          </h2>
-          <div className="justify-self-center lg:justify-self-end">
-            {printDate(note.time)}
+      <div className="">
+        <Button className="mb-4" href="/notes">
+          <IconWithButton
+            icon={
+              <ChevronDoubleLeftIcon className="transform translate-z-0 h-7 w-7" />
+            }
+          >
+            Заметки
+          </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">
+              {note.name}
+            </h2>
+            <div className="justify-self-center lg:justify-self-end">
+              {printDate(note.time)}
+            </div>
+          </div>
+          <div className="w-full md">
+            <ReactMarkdown>{note.text}</ReactMarkdown>
           </div>
-        </div>
-        <div className="w-full md">
-          <ReactMarkdown>{note.text}</ReactMarkdown>
         </div>
       </div>
     );

src/pages/notes.jsx

@@ -0,0 +1,41 @@
+import { Button, IconWithButton } from "../components/button";
+import { ChevronDoubleRightIcon } from "@heroicons/react/24/outline";
+import printDate from "../components/utils";
+
+function Notes() {
+  return (
+    <div>
+      {Object.entries(localStorage.getObj("Notes"))
+        .sort((a, b) => {
+          return b[1].time - a[1].time;
+        })
+        .map((val) => {
+          console.log(val[1]);
+          return (
+            <div className="grid grid-cols-1 lg:grid-cols-2 border border-blue-300 rounded-lg m-2 p-2 justify-items-start">
+              <div className="font-medium leading-tight text-4xl mt-0 mb-2">
+                {val[1].name}
+              </div>
+              <div className="grid grid-cols-1 lg:grid-cols-2 justify-self-center lg:justify-self-end">
+                <div className="text-center">{printDate(val[1].time)}</div>
+                <div className="">
+                  <Button className="" href={`/notes/${val[0]}`}>
+                    <IconWithButton
+                      reverse={true}
+                      icon={
+                        <ChevronDoubleRightIcon className="transform translate-z-0 h-7 w-7" />
+                      }
+                    >
+                      Перейти
+                    </IconWithButton>
+                  </Button>
+                </div>
+              </div>
+            </div>
+          );
+        })}
+    </div>
+  );
+}
+
+export default Notes;