wassname/Open-Assistant
1
0
Fork 0
mirror of https://github.com/wassname/Open-Assistant.git synced 2026-07-01 16:50:12 +08:00
Code Issues Packages Projects Releases Wiki Activity

added skeleton for leaderboard

Browse Source
This commit is contained in:
poipiii
2022-12-21 22:46:52 +08:00
parent 55c79b98f1
commit 69bac33c28
3 changed files with 89 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
website/src/components/LeaderBoardItem.tsx
+18
View File
@@ -0,0 +1,18 @@
export function 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>
)
}
website/src/pages/index.tsx
+1
View File
@@ -51,6 +51,7 @@ export default function Home() {
<p>You are logged in</p>
<Link href="/grading/grade-output">~Rate a prompt and output now~</Link>
<Link href="/leaderboard/score-leaderboard">~view the score leaderboard~</Link>
</main>
<Footer />
</>
website/src/pages/leaderboard/score-leaderboard.tsx
+70
View File
@@ -0,0 +1,70 @@
import { RankItem } from "@/components/LeaderBoardItem";
import { BarsArrowUpIcon,BarsArrowDownIcon } from '@heroicons/react/24/solid'
import Image from "next/image";
const LeaderBoard = () => {
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">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="w-6 h-6 text-inherit">
<path strokeLinecap="round" strokeLinejoin="round" d="M3 4.5h14.25M3 9h9.75M3 13.5h9.75m4.5-4.5v12m0 0l-3.75-3.75M17.25 21L21 17.25" />
</svg>
</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">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="w-6 h-6 text-inherit">
<path strokeLinecap="round" strokeLinejoin="round" d="M3 4.5h14.25M3 9h9.75M3 13.5h9.75m4.5-4.5v12m0 0l-3.75-3.75M17.25 21L21 17.25" />
</svg>
</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">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="w-6 h-6 text-inherit">
<path strokeLinecap="round" strokeLinejoin="round" d="M3 4.5h14.25M3 9h9.75M3 13.5h9.75m4.5-4.5v12m0 0l-3.75-3.75M17.25 21L21 17.25" />
</svg>
</div>
</div>
<div className="flex flex-row items-center justify-center space-x-2">
<div>
<p>Medal</p>
</div>
</div>
</div>
{/* leaderboard items */}
<RankItem></RankItem>
</div>
</div>
</div>
);
}
export default LeaderBoard;