SpeedCodeHQ/leaderboard
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Added a newsto the landing page

Browse Source
This commit is contained in:
selimaj-dev
2025-08-07 13:52:10 -05:00
parent aee75f8d26
commit be9b9d6ba3
2 changed files with 95 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/page.tsx
+65 -2
View File
@@ -1,18 +1,81 @@
import SpeedrunTable, { Speedrun } from "@/components/Table";
import { timeAgo } from "@/lib/utils";
interface NewsPreview {
title: string;
description: string;
author: string;
date: number;
}
function NewsPost({ post }: { post: NewsPreview }) {
return (
<div className="border-t-[1px] pt-2 pb-3 border-neutral-500">
<h2 className="text-xl">{post.title}</h2>
<p className="line-clamp-3 ml-1 text-[#bbb]">{post.description}</p>
<div className="mt-3 flex">
<div className="rounded-full bg-white size-6"></div>
<div className="ml-2 flex justify-between w-full">
<p>{post.author}</p>
<p className="text-shadow-2xs text-neutral-400">
{timeAgo(post.date)}
</p>
</div>
</div>
</div>
);
}
export default function Home() {
const users: Speedrun[] = [
{ rank: 1, name: 'Kleo', time: 63, problem: 'Two Sum', date: 1651600541000 },
{
rank: 1,
name: "Kleo",
time: 63,
problem: "Two Sum",
date: 1651600541000,
},
];
return (
<>
<div className="w-full h-14 bg-neutral-900"></div>
<div className="mt-5 mx-[35rem]">
<div className="mt-5 mx-10 xl:mx-[35rem] flex gap-5">
<div className="w-full">
<SpeedrunTable data={users} />
</div>
<div className="w-[35rem]">
<div className="w-full bg-[#121212] h-full rounded-lg p-5">
<h1 className="font-bold">LATEST NEWS</h1>
<div className="flex flex-col w-full pt-3">
<NewsPost
post={{
title: "Testing",
description: "Idk",
author: "kleo",
date: 1751600541000,
}}
/>
<NewsPost
post={{
title: "Testing",
description: "Idk",
author: "kleo",
date: 1751600541000,
}}
/>
<NewsPost
post={{
title: "Testing",
description: "Idk",
author: "kleo",
date: 1751600541000,
}}
/>
</div>
</div>
</div>
</div>
</>
);
src/components/Table.tsx
+30 -11
View File
@@ -1,6 +1,6 @@
import { format, timeAgo } from '@/lib/utils';
import { formatDate } from 'date-fns';
import React from 'react';
import { format, timeAgo } from "@/lib/utils";
import { formatDate } from "date-fns";
import React from "react";
export interface Speedrun {
rank: number;
@@ -20,11 +20,21 @@ const SpeedrunTable: React.FC<TableProps> = ({ data }) => {
<table className="min-w-full text-sm text-[#e0e0e0]">
<thead>
<tr className="border-b border-[#2a2a2a]">
<th className="px-6 py-3 text-left font-medium tracking-wide text-[#aaaaaa] uppercase w-14">#</th>
<th className="px-6 py-3 text-left font-medium tracking-wide text-[#aaaaaa] uppercase w-52">Player</th>
<th className="px-6 py-3 text-left font-medium tracking-wide text-[#aaaaaa] uppercase w-52">Time</th>
<th className="px-6 py-3 text-left font-medium tracking-wide text-[#aaaaaa] uppercase w-52">Date</th>
<th className="px-6 py-3 text-left font-medium tracking-wide text-[#aaaaaa] uppercase">Problem</th>
<th className="px-6 py-3 text-left font-medium tracking-wide text-[#aaaaaa] uppercase w-14">
#
</th>
<th className="px-6 py-3 text-left font-medium tracking-wide text-[#aaaaaa] uppercase w-52">
Player
</th>
<th className="px-6 py-3 text-left font-medium tracking-wide text-[#aaaaaa] uppercase w-52">
Time
</th>
<th className="px-6 py-3 text-left font-medium tracking-wide text-[#aaaaaa] uppercase w-52">
Date
</th>
<th className="px-6 py-3 text-left font-medium tracking-wide text-[#aaaaaa] uppercase">
Problem
</th>
</tr>
</thead>
<tbody>
@@ -34,9 +44,18 @@ const SpeedrunTable: React.FC<TableProps> = ({ data }) => {
className="hover:bg-[#1f1f1f] transition-colors border-b border-[#1e1e1e]"
>
<td className="px-6 py-4 whitespace-nowrap">{user.rank}</td>
<td className="px-6 py-4 whitespace-nowrap">{user.name}</td>
<td className="px-6 py-4 whitespace-nowrap">{format(user.time)}</td>
<td className="px-6 py-4 whitespace-nowrap" title={new Date(user.date).toLocaleString()}>{timeAgo(user.date)}</td>
<td className="px-6 py-4 whitespace-nowrap font-bold">
{user.name}
</td>
<td className="px-6 py-4 whitespace-nowrap">
{format(user.time)}
</td>
<td
className="px-6 py-4 whitespace-nowrap"
title={new Date(user.date).toLocaleString()}
>
{timeAgo(user.date)}
</td>
<td className="px-6 py-4 whitespace-nowrap">{user.problem}</td>
</tr>
))}