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

s1

master
Suvodip 2024-08-05 20:06:44 +05:30
parent f45cb49419
commit d049614691
5 changed files with 44 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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;

16
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'>

4
app/routes/_index.tsx
View File

@ -1,10 +1,12 @@
import type { MetaFunction } from "@remix-run/node";
import TestComponent from '../components/StudentDashboard-no-content'; // Fix typo here
import TimeLine from '~/components/Timeline';
export default function Index() {
return (
<div>
<TestComponent />
<TimeLine />
{/* <TestComponent /> */}
</div>
);
}

8
app/routes/knowledge-quest.tsx
View File

@ -194,16 +194,16 @@ const App: React.FC = () => {
<div className='border-b-[1px] py-2 border-[#CFCFCF]'>
<div className='container mx-auto flex flex-row justify-between pr-8'>
<div className='inline-flex justify-center place-items-center'>
<img src="../../assets/student-dash.svg" alt=""/>
<img src="/assets/student-dash.svg" alt=""/>
<p className='pl-1 text-[18px] font-[700] whitespace-nowrap'>Student Dashboard</p>
</div>
<div className='flex flex-row place-items-center'>
<button className='bg-[#000] py-2.5 px-3 rounded-[8px] text-[#FFF] tetx-[16px] font-[600] inline-flex justify-center place-items-center'>
<img src="../../assets/ai-button-icon.svg" alt="" /> AI Generative Quiz
<img src="/assets/ai-button-icon.svg" alt="" /> AI Generative Quiz
</button>
<Button className='border-none shadow-none bg-transparent hover:bg-transparent' onClick={showLoading}>
<div className='border-[1px] border[#525252] rounded-full p-2 w-[47px] h-[47px]'>
<img src="../../assets/notification-bell.svg" alt="" />
<img src="/assets/notification-bell.svg" alt="" />
</div>
</Button>
<Dropdown menu={{ items }} trigger={['click']}>
@ -232,10 +232,8 @@ const App: React.FC = () => {
<div className='xl:col-span-2'>
<TopPerformers />
</div>
</div>
</section>
</Content>
</Layout>
</Layout>