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-08-05 20:06:44 +05:30
parent f45cb49419
commit d049614691
5 changed files with 44 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
app/components/TopPerformers.tsx
View File

@@ -10,6 +10,7 @@ interface Performer {
points: number;
}
export default function TopPerformers() {
const [data, setData] = useState<Performer[]>([]);
const [loading, setLoading] = useState(true);
@@ -46,37 +47,38 @@ export default function TopPerformers() {
const [highestRank, secondHighestRank, thirdHighestRank, ...sortedData] = data;
return (
<div className=''>
<h2 className='text-[20px] font-[700] inline-flex px-4 pt-4'>
Top Performers <img src="/assets/right-arrow.svg" alt="" />
</h2>
<p className='text-[16px] font-[700] text-[#6E6E6E] px-4 pb-4 mb-28'>Knowledge Quest</p>
<div className='flex flex-row justify-between place-items-center space-x-2 border-b-[1px] border-[#CFCFCF]'>
<div className='flex flex-row justify-between place-items-center border-b-[1px] border-[#CFCFCF]'>
<div className='w-full mx-auto h-[88px] border-x-[1px] border-t-[1px] border-[#CFCFCF] rounded-t-[10px] justify-center place-items-center mx-auto py-4'>
<div className='-mt-10 relative flex flex-col justify-center place-items-center'>
<img className='mx-auto h-[52px] w-[60px]' src={secondHighestRank.avatar} alt="" />
<img className='mx-auto h-[53px] w-[54px] rounded-full' src={secondHighestRank.avatar} alt="" />
<img className='absolute mt-12' src="/assets/bacth2.svg" alt="" />
</div>
<p className='text-[12px] font-[700] text-center mt-4'>{secondHighestRank.name}</p>
<p className='text-[12px] font-[700] text-center'>{secondHighestRank.score} / 50</p>
<p className='text-[12px] font-[700] text-center'>{secondHighestRank.points} Points</p>
</div>
<div className='w-full mx-auto h-[130px] -mt-[42px] border-x-[1px] border-t-[1px] border-[#CFCFCF] rounded-t-[10px] justify-center place-items-center mx-auto py-4'>
<div className='-mt-10 relative flex flex-col justify-center place-items-center'>
<img className='-mt-10' src="/assets/crown.png" alt="" />
<img className='mx-auto h-[52px] w-[60px]' src={highestRank.avatar} alt="" />
<img className='mx-auto h-[53px] w-[54px] rounded-full' src={highestRank.avatar} alt="" />
<img className='absolute mt-9' src="/assets/bacth1.svg" alt="" />
</div>
<p className='text-[12px] font-[700] text-center mt-4'>{highestRank.name}</p>
<p className='text-[12px] font-[700] text-center'>{highestRank.score} / 50</p>
<p className='text-[12px] font-[700] text-center'>{highestRank.points} Points</p>
</div>
<div className='w-full mx-auto h-[88px] border-x-[1px] border-t-[1px] border-[#CFCFCF] rounded-t-[10px] justify-center place-items-center mx-auto py-4'>
<div className='-mt-10 relative flex flex-col justify-center place-items-center'>
<img className='mx-auto h-[52px] w-[60px]' src={thirdHighestRank.avatar} alt="" />
<img className='mx-auto h-[53px] w-[54px] rounded-full' src={thirdHighestRank.avatar} alt="" />
<img className='absolute mt-12' src="/assets/bacth3.svg" alt="" />
</div>
<p className='text-[12px] font-[700] text-center mt-4'>{thirdHighestRank.name}</p>
<p className='text-[12px] font-[700] text-center'>{thirdHighestRank.score} / 50</p>
<p className='text-[12px] font-[700] text-center'>{thirdHighestRank.points} Points</p>
</div>
</div>
<div className='flex flex-col'>
@@ -97,4 +99,4 @@ export default function TopPerformers() {
</div>
</div>
);
}
}