From 2eccd5eb475b3b9f6080ce8d70189b5da2b531fb Mon Sep 17 00:00:00 2001
From: Manuel Palenzuela Merino <manuel.palenzuela@datadoghq.com>
Date: Wed, 10 Jul 2024 12:04:51 +0200
Subject: Pages: Recent: Style

---
 TODO                 |  2 +-
 src/pages/Recent.tsx | 30 ++++++++++++++++++------------
 2 files changed, 19 insertions(+), 13 deletions(-)

diff --git a/TODO b/TODO
index 26f68ca..fc224b7 100644
--- a/TODO
+++ b/TODO
@@ -1,2 +1,2 @@
-Deploy somewhere
+we should probably use UUIDs for files instead of IDs
 we can save the time it takes to execute syscalls
diff --git a/src/pages/Recent.tsx b/src/pages/Recent.tsx
index 19c681f..76d9e2a 100644
--- a/src/pages/Recent.tsx
+++ b/src/pages/Recent.tsx
@@ -23,7 +23,6 @@ export default function Recent(props: any) {
     const { data, error } = await props.supabase
       .from('file')
       .select().range(paginationOffset, paginationOffset + numOfFilesToShow - 1)
-    //.limit(10).offset(paginationOffset)
     if (error) {
       console.error(error)
       return
@@ -44,17 +43,24 @@ export default function Recent(props: any) {
     <>
       <div className="flex h-screen">
         <SideBar currentPage="Recent" />
-        <main className="flex-1 overflow-y-auto">
-          <button onClick={() => setPaginationOffset(paginationOffset + numOfFilesToShow)}>
-            clickmeforpaginate
-          </button>
-          <div>
-            {files.map((file: any) => (
-              <div key={file.id}>
-                <p className="underline">file: {file.absolute_path}</p>
-              </div>
-            ))
-            }
+        <main className="flex-1 overflow-y-auto my-4">
+          <div className="flex flex-col items-center">
+            <div className="flex flex-col gap-2">
+              {files.map((file: any) => (
+                <div key={file.id} role="button" onClick={() => console.log("clocked file")}>
+                  <p className="underline">file: {file.absolute_path}</p>
+                </div>
+              ))
+              }
+            </div>
+          </div>
+          <div className="flex flex-row gap-2 mt-4">
+            <button className="ml-7 bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded" onClick={() => setPaginationOffset(paginationOffset + -numOfFilesToShow)}>
+              prev
+            </button>
+            <button className="mr-7 ml-auto bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded" onClick={() => setPaginationOffset(paginationOffset + numOfFilesToShow)}>
+              next
+            </button>
           </div>
         </main>
       </div>
-- 
cgit 1.4.1