dwd-projects/bs-p2
1
0
Fork 0
generated from dwd/boilarplate-remix-tailwind-antd
Code Issues Pull Requests 1 Packages Projects Releases Wiki Activity

s1

Browse Source
This commit is contained in:
Suvodip
2024-07-26 14:08:00 +05:30
parent 59c6326cf0
commit e155a1b997
11 changed files with 1254 additions and 331 deletions
Download Patch File Download Diff File Expand all files Collapse all files

238
app/routes/result.tsx Normal file
View File

@@ -0,0 +1,238 @@
let performersData = [
{
id: "1",
name: "Eiden",
score: "48/50",
points: "999",
rank: "1",
program: "Graduate Program",
avatar: "avatar1.png"
},
{
id: "2",
name: "Jackson",
score: "45/50",
points: "997",
rank: "2",
program: "Graduate Program",
avatar: "avatar2.png"
},
{
id: "3",
name: "Emma Aria",
score: "43/50",
points: "994",
rank: "3",
program: "Graduate Program",
avatar: "avatar3.png"
},
{
id: "4",
name: "John Doe",
score: "40/50",
points: "990",
rank: "4",
program: "Graduate Program",
avatar: "avatar4.png"
},
{
id: "5",
name: "Jane Cooper",
score: "37/50",
points: "987",
rank: "5",
program: "Graduate Program",
avatar: "avatar5.png"
},
{
id: "6",
name: "John Doe",
score: "35/50",
points: "982",
rank: "6",
program: "Graduate Program",
avatar: "avatar6.png"
},
{
id: "7",
name: "Alice",
score: "33/50",
points: "980",
rank: "7",
program: "Graduate Program",
avatar: "avatar1.png"
},
{
id: "8",
name: "Bob",
score: "32/50",
points: "978",
rank: "8",
program: "Graduate Program",
avatar: "avatar2.png"
},
{
id: "9",
name: "Charlie",
score: "30/50",
points: "975",
rank: "9",
program: "Graduate Program",
avatar: "avatar3.png"
},
{
id: "10",
name: "Diana",
score: "28/50",
points: "972",
rank: "10",
program: "Graduate Program",
avatar: "avatar4.png"
},
{
id: "11",
name: "Edward",
score: "27/50",
points: "970",
rank: "11",
program: "Graduate Program",
avatar: "avatar5.png"
},
{
id: "12",
name: "Fiona",
score: "26/50",
points: "968",
rank: "12",
program: "Graduate Program",
avatar: "avatar6.png"
},
{
id: "13",
name: "George",
score: "25/50",
points: "965",
rank: "13",
program: "Graduate Program",
avatar: "avatar1.png"
},
{
id: "14",
name: "Hannah",
score: "23/50",
points: "962",
rank: "14",
program: "Graduate Program",
avatar: "avatar2.png"
},
{
id: "15",
name: "Ian",
score: "22/50",
points: "960",
rank: "15",
program: "Graduate Program",
avatar: "avatar3.png"
},
{
id: "16",
name: "Julia",
score: "20/50",
points: "957",
rank: "16",
program: "Graduate Program",
avatar: "avatar4.png"
},
{
id: "17",
name: "Kyle",
score: "19/50",
points: "955",
rank: "17",
program: "Graduate Program",
avatar: "avatar5.png"
},
{
id: "18",
name: "Laura",
score: "18/50",
points: "953",
rank: "18",
program: "Graduate Program",
avatar: "avatar6.png"
},
{
id: "19",
name: "Michael",
score: "17/50",
points: "950",
rank: "19",
program: "Graduate Program",
avatar: "avatar1.png"
},
{
id: "20",
name: "Nancy",
score: "16/50",
points: "947",
rank: "20",
program: "Graduate Program",
avatar: "avatar2.png"
},
{
id: "21",
name: "Oliver",
score: "15/50",
points: "945",
rank: "21",
program: "Graduate Program",
avatar: "avatar3.png"
}
];
export default function Index(){
return(
<>
<section className="container-fluid bg-[#000] ">
<div className="flex flex-row justify-center gap-x-8 py-6">
<p className="text-[42px] w-[42px] h-[31px]">✨</p>
<div className="flex flex-col justify-center place-items-center">
<p className="text-[#FFF] text-[24px] font-[700]"> Take an AI Generative Quiz</p>
<p className="text-[#FFF] text-[16px] font-[400]">Convert any text into an interactive quiz session</p>
</div>
</div>
</section>
<button className="float-right absolute right-0 2xl:right-80 top-32 bg-[#9D9D9D] w-[45px] h-[45px] font-[700] text-[#FFF] text-[20px] rounded-full">&#10005;</button>
<section id="" className="container mx-auto max-w-[890px] shadow-xl rounded-xl py-8 mb-8 rounded-[10px] bg-[#FFF] mt-10">
<div className="flex flex-col justify-center place-items-center space-y-4 px-10">
<img src="../../assets/celebration-icon.png" alt="" />
<p className="text-[24px] font-[700]">You scored 9/10</p>
<p className="text-[20px] font-[500] text-[#525252]">Congratulations on your achievement. </p>
<button className="inline-flex place-items-center text-[20px] font-[600] text-[#FFF] bg-[#000] px-[40px] py-[15px] rounded-[10px]"><img src="../../assets/reload.svg" alt="" />&nbsp; Another Quiz</button>
</div>
<div className="mt-20">
<p className="text-[20px] font-[700] px-[10px] py-3 border-y-[1px] border-[#CFCFCF] ">Top Performers of this Quiz</p>
<div className="flex flex-col">
{performersData.map((result =>
<div key={result.id} className="flex flex-row justify-between place-items-center p-1.5 px-[10px] hover:bg-[#FDF2E7] duration-300">
<div className="flex flex-row space-x-[16px] place-items-center justify-center">
<p className="px-[10px] text-[14px] font-[700]"># {result.rank}</p>
<img className="w-[50px] h-[50px]" src={result.avatar} alt="" />
<div>
<p className="px-[10px] text-[16px] font-[700]">{result.name}</p>
<p className="px-[10px] text-[12px] font-[500] text-[#6E6E6E]">{result.program}</p>
</div>
</div>
<div className="flex flex-col place-items-center justify-center">
<img src="../../assets/batch-icon.svg" alt="" />
<p className="px-[10px] text-[14px] font-[700]">{result.score}</p>
</div>
</div>
))}
</div>
</div>
</section>
</>
)
}