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; points: number;
} }
export default function TopPerformers() { export default function TopPerformers() {
const [data, setData] = useState<Performer[]>([]); const [data, setData] = useState<Performer[]>([]);
const [loading, setLoading] = useState(true); const [loading, setLoading] = useState(true);
@ -46,37 +47,38 @@ export default function TopPerformers() {
const [highestRank, secondHighestRank, thirdHighestRank, ...sortedData] = data; const [highestRank, secondHighestRank, thirdHighestRank, ...sortedData] = data;
return ( return (
<div className=''> <div className=''>
<h2 className='text-[20px] font-[700] inline-flex px-4 pt-4'> <h2 className='text-[20px] font-[700] inline-flex px-4 pt-4'>
Top Performers <img src="/assets/right-arrow.svg" alt="" /> Top Performers <img src="/assets/right-arrow.svg" alt="" />
</h2> </h2>
<p className='text-[16px] font-[700] text-[#6E6E6E] px-4 pb-4 mb-28'>Knowledge Quest</p> <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='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'> <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="" /> <img className='absolute mt-12' src="/assets/bacth2.svg" alt="" />
</div> </div>
<p className='text-[12px] font-[700] text-center mt-4'>{secondHighestRank.name}</p> <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>
<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='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'> <div className='-mt-10 relative flex flex-col justify-center place-items-center'>
<img className='-mt-10' src="/assets/crown.png" alt="" /> <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="" /> <img className='absolute mt-9' src="/assets/bacth1.svg" alt="" />
</div> </div>
<p className='text-[12px] font-[700] text-center mt-4'>{highestRank.name}</p> <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>
<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='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'> <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="" /> <img className='absolute mt-12' src="/assets/bacth3.svg" alt="" />
</div> </div>
<p className='text-[12px] font-[700] text-center mt-4'>{thirdHighestRank.name}</p> <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> </div>
<div className='flex flex-col'> <div className='flex flex-col'>

4
app/routes/_index.tsx
View File

@ -1,10 +1,12 @@
import type { MetaFunction } from "@remix-run/node"; import type { MetaFunction } from "@remix-run/node";
import TestComponent from '../components/StudentDashboard-no-content'; // Fix typo here import TestComponent from '../components/StudentDashboard-no-content'; // Fix typo here
import TimeLine from '~/components/Timeline';
export default function Index() { export default function Index() {
return ( return (
<div> <div>
<TestComponent /> <TimeLine />
{/* <TestComponent /> */}
</div> </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='border-b-[1px] py-2 border-[#CFCFCF]'>
<div className='container mx-auto flex flex-row justify-between pr-8'> <div className='container mx-auto flex flex-row justify-between pr-8'>
<div className='inline-flex justify-center place-items-center'> <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> <p className='pl-1 text-[18px] font-[700] whitespace-nowrap'>Student Dashboard</p>
</div> </div>
<div className='flex flex-row place-items-center'> <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'> <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>
<Button className='border-none shadow-none bg-transparent hover:bg-transparent' onClick={showLoading}> <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]'> <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> </div>
</Button> </Button>
<Dropdown menu={{ items }} trigger={['click']}> <Dropdown menu={{ items }} trigger={['click']}>
@ -232,10 +232,8 @@ const App: React.FC = () => {
<div className='xl:col-span-2'> <div className='xl:col-span-2'>
<TopPerformers /> <TopPerformers />
</div> </div>
</div> </div>
</section> </section>
</Content> </Content>
</Layout> </Layout>
</Layout> </Layout>