feat: use table for solutions representationHEADmaster

1 files changed, 20 insertions, 11 deletions

diff --git a/src/index.tsx b/src/index.tsx
index 1bdd41a..ce6a9d4 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React from 'react';
 import ReactDOM from 'react-dom';
 import './style.css';
 import './fonts/Bitter-Regular.woff';
@@ -8,18 +8,19 @@ import Timer from './components/Timer';
 
 interface Solution {
   result: string;
-  author: string;
+  timestamp: string;
+  author?: string;
 }
 
 const App: React.FC = () => {
-  const [author, setAuthor] = useState<string>('anonymous');
+  const [author, setAuthor] = useLocalStorage<string>('author', 'anonymous');
   const [solutions, setSolutions] = useLocalStorage<Solution[]>('solutions', []);
 
   const registerResult = (result: string) => {
-    setSolutions([{ author, result }, ...solutions]);
+    setSolutions([{ author, result, timestamp: new Date().toISOString() }, ...solutions]);
   }
 
-  const handleRemoveSolution = (index: number) => {
+  const removeSolution = (index: number) => {
     setSolutions(solutions.filter((_, i) => i !== index));
   }
 
@@ -29,14 +30,22 @@ const App: React.FC = () => {
       <Timer registerResult={registerResult} />
 
       <h2>Results</h2>
-      <ul>
+      <table>
+        <tr>
+          <th>Author</th>
+          <th>Result</th>
+          <th>Timestamp</th>
+          <th>Actions</th>
+        </tr>
         {solutions.map((solution, index) => (
-          <li>
-            {solution.result} by {solution.author} &nbsp;
-            <button onClick={() => handleRemoveSolution(index)}>remove</button>
-          </li>
+          <tr key={solution.timestamp}>
+            <td>{solution.author}</td>
+            <td>{solution.result}</td>
+            <td>{new Date(solution.timestamp).toLocaleString()}</td>
+            <td><button onClick={() => removeSolution(index)}>remove</button></td>
+          </tr>
         ))}
-      </ul>
+      </table>
     </>
   );
 };