diff --git a/src/pages/videos.tsx b/src/pages/videos.tsx index f1e51d9..14f96ec 100644 --- a/src/pages/videos.tsx +++ b/src/pages/videos.tsx @@ -5,8 +5,6 @@ import { api } from "~/utils/api"; import Link from "next/link"; const VideoList: NextPage = () => { - const hello = api.example.hello.useQuery({ text: "from tRPC" }); - return ( <> @@ -23,45 +21,42 @@ const VideoList: NextPage = () => { -
+
{[ - { title: "are pings bad?", id: "4e98f4a" }, + { + title: "Are pings bad?", + id: "4e98f4a", + timestamp: 1681211128621, + }, { title: "do you really need a backend? because there is a much better alternative to it.", id: "h4b98rt", + timestamp: 1681011128621, }, - { title: "how next works", id: "1h7r9e" }, - { title: "how next works", id: "h27r9e" }, - { title: "how next works", id: "h73r9e" }, - { title: "how next works", id: "h7r49e" }, - { title: "how next works", id: "h7r95e" }, - { title: "how next works", id: "h7r9e6" }, - { title: "how next works", id: "eh7r9e" }, - { title: "how next works", id: "hf7r9e" }, - { title: "how next works", id: "h7fr9e" }, - { title: "how next works", id: "h7rrs9e" }, - { title: "how next works", id: "h7rg9e" }, - { title: "how next works", id: "h7rr9e" }, - { title: "how next works", id: "h7rh9e" }, - { title: "how next works", id: "h7sar9e" }, - { title: "how next works", id: "h7er9e" }, - { title: "how next works", id: "h7wrr9e" }, - { title: "how next works", id: "h7r9qe" }, - { title: "how next works", id: "h7r9rqewe" }, - { title: "how next works", id: "h7r9ern" }, - { title: "how next works", id: "h7r9vyxe" }, - { title: "how next works", id: "h7r9asfe" }, - { title: "how next works", id: "h7rea9e" }, - { title: "how next works", id: "h7r9aefe" }, - { title: "how next works", id: "h7rht9e" }, - { title: "how next works", id: "h7r9e48" }, - { title: "how next works", id: "h7r9e848" }, - { title: "how next works", id: "h7r9468e" }, - { title: "how next works", id: "h7r93181e" }, - ].map(({ title, id }) => ( - + { + title: "how next works", + id: "1h7r9e", + timestamp: 1681211120621, + }, + { + title: "how next works", + id: "h27r9e", + timestamp: 1681210128621, + }, + { + title: "how next works", + id: "h73r9e", + timestamp: 1681211118621, + }, + { + title: "how next works", + id: "h7r49e", + timestamp: 1695211128621, + }, + ].map(({ title, id, timestamp }) => ( + ))}
@@ -73,9 +68,70 @@ const VideoList: NextPage = () => { interface VideoCardProps { title: string; id: string; + timestamp: number; } -const VideoCard = ({ title, id }: VideoCardProps) => { +const VideoCard = ({ title, id, timestamp }: VideoCardProps) => { + const getTime = (timestamp: number): string => { + const delta = Math.round( + (+new Date() - new Date(timestamp).getTime()) / 1000 + ); + + const minute = 60, + hour = minute * 60, + day = hour * 24; + + let timeString = ""; + + if (delta < 60) { + timeString = "Just now"; + } else if (delta < 2 * minute) { + timeString = "1 min"; + } else if (delta < hour) { + timeString = Math.floor(delta / minute).toString() + " mins"; + } else if (Math.floor(delta / hour) === 1) { + timeString = "1 hour ago"; + } else if (delta < day) { + timeString = Math.floor(delta / hour).toString() + " hours ago"; + } else if (delta < day * 2) { + timeString = "yesterday"; + } else if (delta < day * 7) { + timeString = Math.floor(delta / day).toString() + " days ago"; + } else { + const date = new Date(timestamp); + const months = [ + "Jan", + "Feb", + "Mar", + "Apr", + "May", + "Jun", + "Jul", + "Aug", + "Sep", + "Oct", + "Nov", + "Dec", + ]; + + timeString = + `${ + months[date.getMonth()] || "" + }} ${date.getDate()} ${date.getFullYear()} ` + + `at ${ + date.getHours().toString().length === 1 + ? "0" + date.getHours().toString() + : date.getHours() + }:${ + date.getMinutes().toString().length === 1 + ? "0" + date.getMinutes().toString() + : date.getMinutes() + }`; + } + + return timeString; + }; + return (
@@ -87,7 +143,7 @@ const VideoCard = ({ title, id }: VideoCardProps) => {
{title} - 12 days ago + {getTime(timestamp)}