wassname/Open-Assistant
1
0
Fork 0
mirror of https://github.com/wassname/Open-Assistant.git synced 2026-06-30 16:40:05 +08:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #52 from poipiii/main

Browse Source 
Implement user_ranking_scoreboard for web
This commit is contained in:
Keith Stevens
2022-12-27 18:10:58 +09:00
committed by GitHub
parent a8e7cee73c fba75a7942
commit 7a4849f084
2 changed files with 66 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
website/src/components/RankItem.tsx
+12
View File
@@ -0,0 +1,12 @@
const RankItem = ({ username, score }) => {
return (
<div className="flex flex-row justify-between p-6 border-2 border-slate-100 text-left font-semibold hover:bg-sky-50">
<div>1</div>
<div>@username</div>
<div>20.5</div>
<div>gold</div>
</div>
);
};
export default RankItem;
website/src/pages/leaderboard/score-leaderboard.tsx
+54
View File
@@ -0,0 +1,54 @@
import RankItem from "@/components/RankItem";
import { BarsArrowUpIcon, BarsArrowDownIcon } from "@heroicons/react/24/solid";
import Image from "next/image";
import { HiBarsArrowUp, HiBarsArrowDown } from "react-icons/hi2";
const LeaderBoard = () => {
const PlaceHolderProps = { username: "test_user", score: 10 };
return (
<div className=" p-6 h-full mx-auto bg-slate-100 text-gray-800">
<div className="flex flex-col">
<div className="rounded-lg shadow-lg h-full block bg-white">
<div className="p-8">
<h5 className="text-2xl font-bold">LeaderBoard</h5>
</div>
<div className="flex flex-row justify-between px-6 py-3 font-semibold text-md">
<div className="flex flex-row items-center justify-center space-x-2">
<div>
<p>Rank</p>
</div>
<div className="mt-2 text-slate-400 hover:text-sky-400 hover:cursor-pointer">
<HiBarsArrowDown className="w-6 h-6 text-inherit"></HiBarsArrowDown>
</div>
</div>
<div className="flex flex-row items-center justify-center space-x-2">
<div>
<p>User</p>
</div>
<div className="mt-2 text-slate-400 hover:text-sky-400 hover:cursor-pointer">
<HiBarsArrowDown className="w-6 h-6 text-inherit"></HiBarsArrowDown>
</div>
</div>
<div className="flex flex-row items-center justify-center space-x-2">
<div>
<p>Score</p>
</div>
<div className="mt-2 text-slate-400 hover:text-sky-400 hover:cursor-pointer">
<HiBarsArrowDown className="w-6 h-6 text-inherit"></HiBarsArrowDown>
</div>
</div>
<div className="flex flex-row items-center justify-center space-x-2">
<div>
<p>Medal</p>
</div>
</div>
</div>
{/* leaderboard items */}
<RankItem {...PlaceHolderProps}></RankItem>
</div>
</div>
</div>
);
};
export default LeaderBoard;