From 08a898a82ad63bfc3a3cb67547b0d59e5897f2dc Mon Sep 17 00:00:00 2001
From: Ishaan Dey <ishaan1013@gmail.com>
Date: Sat, 25 May 2024 01:24:13 -0700
Subject: [PATCH] add date display

---
 frontend/app/(app)/code/[id]/page.tsx         |  2 ++
 .../dashboard/projectCard/index.tsx           | 23 +++++++++++++++++--
 2 files changed, 23 insertions(+), 2 deletions(-)

diff --git a/frontend/app/(app)/code/[id]/page.tsx b/frontend/app/(app)/code/[id]/page.tsx
index 41c0f6f..11365e4 100644
--- a/frontend/app/(app)/code/[id]/page.tsx
+++ b/frontend/app/(app)/code/[id]/page.tsx
@@ -60,6 +60,8 @@ export default async function CodePage({ params }: { params: { id: string } }) {
     return notFound();
   }
 
+  console.log("sandboxes: ", sandboxData);
+
   return (
     <div className="overflow-hidden overscroll-none w-screen flex flex-col h-screen bg-background">
       <Room id={sandboxId}>
diff --git a/frontend/components/dashboard/projectCard/index.tsx b/frontend/components/dashboard/projectCard/index.tsx
index 8a97829..a206499 100644
--- a/frontend/components/dashboard/projectCard/index.tsx
+++ b/frontend/components/dashboard/projectCard/index.tsx
@@ -2,7 +2,7 @@
 
 import { AnimatePresence, motion } from "framer-motion";
 import Image from "next/image";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import ProjectCardDropdown from "./dropdown";
 import { Clock, Globe, Lock } from "lucide-react";
 import { Sandbox } from "@/lib/types";
@@ -23,8 +23,27 @@ export default function ProjectCard({
   deletingId: string;
 }) {
   const [hovered, setHovered] = useState(false);
+  const [date, setDate] = useState<string>();
   const router = useRouter();
 
+  useEffect(() => {
+    const createdAt = new Date(sandbox.createdAt);
+    const now = new Date();
+    const diffInMinutes = Math.floor(
+      (now.getTime() - createdAt.getTime()) / 60000
+    );
+
+    if (diffInMinutes < 1) {
+      setDate("Now");
+    } else if (diffInMinutes < 60) {
+      setDate(`${diffInMinutes}m ago`);
+    } else if (diffInMinutes < 1440) {
+      setDate(`${Math.floor(diffInMinutes / 60)}h ago`);
+    } else {
+      setDate(`${Math.floor(diffInMinutes / 1440)}d ago`);
+    }
+  }, [sandbox]);
+
   return (
     <Card
       tabIndex={0}
@@ -78,7 +97,7 @@ export default function ProjectCard({
           )}
         </div>
         <div className="flex items-center">
-          <Clock className="w-3 h-3 mr-2" /> 3d ago
+          <Clock className="w-3 h-3 mr-2" /> {date}
         </div>
       </div>
     </Card>