bs-p2/app/routes/result.tsx

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>
        </>
    )
}