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 (
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();
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 (
- 3d ago
+ {date}