diff --git a/src/components/Activities.tsx b/src/components/Activities.tsx index 9f4ce54..c07559c 100644 --- a/src/components/Activities.tsx +++ b/src/components/Activities.tsx @@ -1,6 +1,7 @@ import Image from "next/image"; import { useState, useEffect } from "react"; import { API_BASE_URL } from "@/data/shared"; +import { PlusCircleIcon, XCircleIcon, UserPlusIcon, TrophyIcon } from '@heroicons/react/24/outline'; interface Activity { id: string; @@ -85,18 +86,48 @@ export default function Activities() { switch (activity.type) { case "create": - return `${ownerUsername} Created a new ${activity.game} game${formattedAmount ? ` for ${formattedAmount}` : ""}`; + return <>{ownerUsername} created a {activity.game} game with a {formattedAmount} entry fee.>; case "close": - return `${ownerUsername} Closed ${activity.game} game${formattedAmount ? ` for ${formattedAmount}` : ""}`; + return <>{ownerUsername} cancelled their {activity.game} game.>; case "join": - return `${joinerUsername} Joined a ${activity.game} game`; + return <>{joinerUsername} joined {activity.game} with a {formattedAmount} entry fee.>; case "won": - return `${ownerUsername} won the ${activity.game} game${formattedAmount ? ` and won ${formattedAmount}` : ""}`; + return <>{ownerUsername} won {formattedAmount} in {activity.game}!>; default: return "Unknown activity"; } }; + const formatTimeAgo = (timestamp: string) => { + const date = new Date(timestamp + 'Z'); + const now = new Date(); + const diffInSeconds = Math.floor((now.getTime() - date.getTime()) / 1000); + const diffInMinutes = Math.floor(diffInSeconds / 60); + const diffInHours = Math.floor(diffInMinutes / 60); + const diffInDays = Math.floor(diffInHours / 24); + + if (diffInDays > 0) { + return date.toLocaleString(undefined, { + year: 'numeric', + month: 'short', + day: 'numeric', + hour: '2-digit', + minute: '2-digit', + hour12: true + }); + } + + if (diffInHours > 0) { + return `${diffInHours} hour${diffInHours === 1 ? '' : 's'} ago`; + } + + if (diffInMinutes > 0) { + return `${diffInMinutes} minute${diffInMinutes === 1 ? '' : 's'} ago`; + } + + return "less than 1 minute ago"; + }; + if (loading) { return (
{formatActivityMessage(activity)}
-- {new Date(activity.time + 'Z').toLocaleString(undefined, { - year: 'numeric', - month: 'short', - day: 'numeric', - hour: '2-digit', - minute: '2-digit', - hour12: true - })} -
-{formatActivityMessage(activity)}
++ {formatTimeAgo(activity.time)} +
+