improve styling on watch page

app/watch/page.tsx

@@ -12,10 +12,13 @@ export default function GamePage() {
   }
 
   return (
-    <div className="container mx-auto min-h-screen flex flex-wrap justify-between pt-12 pb-24 gap-x-2 gap-y-8">
-      {results.map((result) => (
-        <Result key={result._id} result={result} />
-      ))}
+    <div className="container mx-auto pt-12 pb-24 space-y-8">
+      <h1 className="text-2xl font-bold">Recent Games</h1>
+      <div className="flex flex-wrap justify-betweengap-x-2 gap-12">
+        {results.map((result) => (
+          <Result key={result._id} result={result} />
+        ))}
+      </div>
     </div>
   );
 }

app/watch/result.tsx

@@ -3,13 +3,18 @@
 import { ResultStatus } from "../result-status";
 import { type ResultWithGame } from "@/convex/results";
 import { Visualizer } from "../visualizer";
+import { format } from "date-fns";
 
 export default function Result({ result }: { result: ResultWithGame }) {
   return (
-    <div className="flex flex-col gap-2 items-center">
+    <div className="flex gap-8 border rounded-xl p-4 bg-black">
       {result.game !== null && (
-        <div className="flex gap-2">
-          <ResultStatus result={result} />
+        <div className="flex flex-col gap-2">
+          <div className="flex gap-2">
+            <ResultStatus result={result} />
+            <p>at {format(new Date(result._creationTime), "h:mma")}</p>
+          </div>
+          <p>Level {result.level}</p>
           <p>{result.game.modelId}</p>
         </div>
       )}

package.json

@@ -27,6 +27,7 @@
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
     "convex": "^1.16.0",
+    "date-fns": "^4.1.0",
     "lucide-react": "^0.453.0",
     "next": "14.2.5",
     "next-themes": "^0.3.0",