bs-p2/app/components/QuizzesScore.tsx

import React from 'react';
import { Flex, Progress } from 'antd';

let quizData = [
    {
      quizId: 1,
      quizType: "AI Quiz",
      quizName: "Assessment on Special Education - 1",
      percentage: "60"
    },
    {
      quizId: 2,
      quizType: "AI Quiz",
      quizName: "Assessment on Special Education - 2",
      percentage: "75"
    },
    {
      quizId: 3,
      quizType: "AI Quiz",
      quizName: "Assessment on Special Education - 3",
      percentage: "80"
    },
    {
      quizId: 4,
      quizType: "AI Quiz",
      quizName: "Assessment on Special Education - 4",
      percentage: "65"
    },
    {
      quizId: 5,
      quizType: "AI Quiz",
      quizName: "Assessment on Special Education - 5",
      percentage: "70"
    },
    {
      quizId: 6,
      quizType: "AI Quiz",
      quizName: "Assessment on Special Education - 6",
      percentage: "85"
    },
    {
      quizId: 7,
      quizType: "AI Quiz",
      quizName: "Assessment on Special Education - 7",
      percentage: "90"
    },
    {
      quizId: 8,
      quizType: "AI Quiz",
      quizName: "Assessment on Special Education - 8",
      percentage: "95"
    },
    {
      quizId: 9,
      quizType: "AI Quiz",
      quizName: "Assessment on Special Education - 9",
      percentage: "88"
    },
    {
      quizId: 10,
      quizType: "AI Quiz",
      quizName: "Assessment on Special Education - 10",
      percentage: "92"
    },
    {
      quizId: 11,
      quizType: "AI Quiz",
      quizName: "Assessment on Special Education - 11",
      percentage: "77"
    },
    {
      quizId: 12,
      quizType: "AI Quiz",
      quizName: "Assessment on Special Education - 12",
      percentage: "82"
    },
    {
      quizId: 13,
      quizType: "AI Quiz",
      quizName: "Assessment on Special Education - 13",
      percentage: "68"
    },
    {
      quizId: 14,
      quizType: "AI Quiz",
      quizName: "Assessment on Special Education - 14",
      percentage: "73"
    },
    {
      quizId: 15,
      quizType: "AI Quiz",
      quizName: "Assessment on Special Education - 15",
      percentage: "79"
    },
    {
      quizId: 16,
      quizType: "AI Quiz",
      quizName: "Assessment on Special Education - 16",
      percentage: "87"
    },
    {
      quizId: 17,
      quizType: "AI Quiz",
      quizName: "Assessment on Special Education - 17",
      percentage: "93"
    },
    {
      quizId: 18,
      quizType: "AI Quiz",
      quizName: "Assessment on Special Education - 18",
      percentage: "67"
    },
    {
      quizId: 19,
      quizType: "AI Quiz",
      quizName: "Assessment on Special Education - 19",
      percentage: "89"
    },
    {
      quizId: 20,
      quizType: "AI Quiz",
      quizName: "Assessment on Special Education - 20",
      percentage: "91"
    }
  ]

export default function Index(){
    return(
        <section>
            <div className="border-[1px] border-[#CFCFCF] rounded-t-[10px]" style={{background: 'linear-gradient(138.22deg, #4377C6 0%, #092E76 180.99%)'}}>
                <h2 className="text-[20px] font-[700] text-[#FFF] p-4">Quizzes score</h2>
                <div className="flex flex-col">
                    {quizData.slice(15).map((data => (
                        <a key={data.quizId} href='#' className='flex flex-row justify-between place-items-center bg-[#FCFCFC] border-b-[1px] border-b-[#CFCFCF] p-4'>
                            <div className='flex flex-col'>
                                <p className='text-[14px] font-[600] text-[#EF7A0C]'>{data.quizType}</p>
                                <p className='text-[16px] font-[700]'>{data.quizName}</p>
                            </div>
                            <div className='flex flex-row'>
                                <Progress type="dashboard" percent={Number(data.percentage)} gapDegree={0} size={40} strokeColor="#EF7A0C" format={(percent) => (<span style={{ fontWeight: 700 }}>{percent}%</span>)}/>
                                <img src="../../assets/right-arrow.svg" alt="" />
                            </div>
                        </a>
                    )))}
                </div>
            </div>
        </section>
    )
}


{/* <Progress type="dashboard" percent={75} gapDegree={30} /> */}