Skip to content

Commit

Permalink
Refactor LeaderboardPage, improve date formatting, and optimize code
Browse files Browse the repository at this point in the history
  • Loading branch information
@barel-mishal
barel-mishal committed May 15, 2024
1 parent 9977edf commit ca9f3e8
Showing 1 changed file with 104 additions and 85 deletions.
189 changes: 104 additions & 85 deletions components/Leaderboard/Leaderboard.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,15 +5,20 @@ import Image from 'next/image';
const LeaderboardPage: React.FC<{ leaderboard: Analitycs }> = async props => {
const since = new Date(props.leaderboard.since);
const until = new Date(props.leaderboard.until);
const options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' };
const options = {
weekday: 'long',
year: 'numeric',
month: 'long',
day: 'numeric',
};
const bigScreenFormatter = new Intl.DateTimeFormat('en-US', {
weekday: 'long',
year: 'numeric',
month: 'long',
day: 'numeric',
});

const smallScreenFormatter = new Intl.DateTimeFormat('en-US', {
const smallScreenFormatter = new Intl.DateTimeFormat('en-US', {
month: 'short',
day: 'numeric',
year: 'numeric',
Expand All @@ -23,15 +28,15 @@ const smallScreenFormatter = new Intl.DateTimeFormat('en-US', {
until: bigScreenFormatter.format(until),
smallSince: smallScreenFormatter.format(since),
smallUntil: smallScreenFormatter.format(until),
}
};
const firstPlace = props.leaderboard.members[0];
const secondPlace = props.leaderboard.members[1];
const thirdPlace = props.leaderboard.members[2];

return (
<div dir='ltr' className="font-inter">
<div dir="ltr" className="font-inter">
<div className="grid gap-5 p-2 sm:grid-cols-2 lg:grid-cols-3 max-w-5xl mx-auto ">
<div className='col-span-full'>
<div className="col-span-full">
<h1>Leaderboard</h1>
<p>
{datesText.since} - {datesText.until}
Expand All @@ -52,88 +57,102 @@ const smallScreenFormatter = new Intl.DateTimeFormat('en-US', {

export default LeaderboardPage;

export const DisplayPerson = ({data, place}) => {
interface PersonPlace {data: Analitycs["members"][number], place: number}

export const DisplayPerson: React.FC<PersonPlace> = ({ data, place }) => {
return (
<div className="flex gap-2 ring ring-slate-500 rounded-md p-4 " key={data.node_id}>
<Image
src={data.avatar_url}
className="rounded-full w-[50px] h-[50px] "
alt={data.name}
width={50}
height={50}
/>
<div className="flex flex-col w-full ">
<a
className='flex justify-between '
href={`https://github.com/${data.name}`}
target="_blank"
rel="noopener noreferrer"
>
<span className='underline first-letter:capitalize' >{data.name}</span><div className='flex gap-2 text-slate-500'><div>{data.score}</div><Code2 />{place}#</div>
</a>
<div className="flex gap-2">
<div className="flex gap-2 ">
<div className="text-green-300">
<span>{data.stats.additions}</span>
<span>++</span>
</div>
<div className="text-red-300">
<span>{data.stats.deletions}</span>
<span>--</span>
</div>
</div>
<div className="text-slate-300 flex gap-2 ">
<span>Coomit</span>
<span>{data.stats.commits}</span>
</div>
</div>
</div>
<div
className="flex gap-2 ring ring-slate-500 rounded-md p-4 "
key={data.node_id}
>
<Image
src={data.avatar_url}
className="rounded-full w-[50px] h-[50px] "
alt={data.name}
width={50}
height={50}
/>
<div className="flex flex-col w-full ">
<a
className="flex justify-between "
href={`https://github.com/${data.name}`}
target="_blank"
rel="noopener noreferrer"
>
<span className="underline first-letter:capitalize">{data.name}</span>
<div className="flex gap-2 text-slate-500">
<div>{data.score}</div>
<Code2 />
{place}#
</div>
</a>
<div className="flex gap-2">
<div className="flex gap-2 ">
<div className="text-green-300">
<span>{data.stats.additions}</span>
<span>++</span>
</div>
)
}
<div className="text-red-300">
<span>{data.stats.deletions}</span>
<span>--</span>
</div>
</div>
<div className="text-slate-300 flex gap-2 ">
<span>Coomit</span>
<span>{data.stats.commits}</span>
</div>
</div>
</div>
</div>
);
};

export const FirstPlacePerson = ({data, place}) => {
export const FirstPlacePerson: React.FC<PersonPlace> = ({ data, place }) => {
return (
<div className="flex gap-2 ring ring-slate-500 rounded-md p-4 col-span-full " key={data.node_id}>
<Image
src={data.avatar_url}
className="rounded-full w-[100px] h-[100px] "
alt={data.name}
width={100}
height={100}
/>
<div className="flex flex-col w-full ">
<a
className='flex justify-between '
href={`https://github.com/${data.name}`}
target="_blank"
rel="noopener noreferrer"
>
<span className='underline first-letter:capitalize text-2xl tracking-wider' >
{data.name}
</span>
<div className='flex gap-2 text-slate-500'>
<div>{data.score}</div>
<Code2 />{place}#
</div>
</a>
<div className="flex gap-2">
<div className="flex gap-2 ">
<div className="text-green-300">
<span>{data.stats.additions}</span>
<span>++</span>
</div>
<div className="text-red-300">
<span>{data.stats.deletions}</span>
<span>--</span>
</div>
</div>
<div className="text-slate-300 flex gap-2 ">
<span>Coomit</span>
<span>{data.stats.commits}</span>
</div>
</div>
</div>
<div
className="flex gap-2 ring ring-slate-500 rounded-md p-4 col-span-full "
key={data.node_id}
>
<Image
src={data.avatar_url}
className="rounded-full w-[100px] h-[100px] "
alt={data.name}
width={100}
height={100}
/>
<div className="flex flex-col w-full ">
<a
className="flex justify-between "
href={`https://github.com/${data.name}`}
target="_blank"
rel="noopener noreferrer"
>
<span className="underline first-letter:capitalize text-2xl tracking-wider">
{data.name}
</span>
<div className="flex gap-2 text-slate-500">
<div>{data.score}</div>
<Code2 />
{place}#
</div>
</a>
<div className="flex gap-2">
<div className="flex gap-2 ">
<div className="text-green-300">
<span>{data.stats.additions}</span>
<span>++</span>
</div>
)
}
<div className="text-red-300">
<span>{data.stats.deletions}</span>
<span>--</span>
</div>
</div>
<div className="text-slate-300 flex gap-2 ">
<span>Coomit</span>
<span>{data.stats.commits}</span>
</div>
</div>
</div>
</div>
);
};

0 comments on commit ca9f3e8

Please sign in to comment.