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

2
app/components/KnowledgeQuests.tsx
View File

@@ -15,7 +15,7 @@ export default function KnowledgeQuests() {
useEffect(() => {
fetch('https://api.teachertrainingkolkata.in/api/knowledge-quests')
.then(res => {
.then(res => {
if (!res.ok) {
throw new Error('Network response was not ok');
}

27
app/components/Timeline.tsx Normal file
View File

@@ -0,0 +1,27 @@
import React from 'react';
import { Timeline } from 'antd';
const AntdTimeline = () => (
<Timeline>
<Timeline.Item>Event 1: Start of the project - 2024-01-01</Timeline.Item>
<Timeline.Item color='green'>
Event 2: Initial Design - 2024-02-01
<div style={{ marginTop: '10px' }}>
<video width="320" height="240" controls>
<source src="https://videos.pexels.com/video-files/3195394/3195394-sd_640_360_25fps.mp4" type="video/mp4" />
Your browser does not support the video tag.
</video>
</div>
</Timeline.Item>
<Timeline.Item>
Event 3: Development Phase - 2024-03-01
<div style={{ marginTop: '10px' }}>
<embed src="https://pdfobject.com/pdf/sample.pdf" style={{width: '100%'}} height="375" type="application/pdf" />
</div>
</Timeline.Item>
<Timeline.Item>Event 4: Testing - 2024-04-01</Timeline.Item>
<Timeline.Item>Event 5: Launch - 2024-05-01</Timeline.Item>
</Timeline>
);
export default AntdTimeline;

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