From d04961469146419593bd5a97f84dce13a9665e44 Mon Sep 17 00:00:00 2001
From: Suvodip <suvodip@l1>
Date: Mon, 5 Aug 2024 20:06:44 +0530
Subject: [PATCH] s1

---
 app/components/KnowledgeQuests.tsx |  2 +-
 app/components/Timeline.tsx        | 27 +++++++++++++++++++++++++++
 app/components/TopPerformers.tsx   | 18 ++++++++++--------
 app/routes/_index.tsx              |  4 +++-
 app/routes/knowledge-quest.tsx     |  8 +++-----
 5 files changed, 44 insertions(+), 15 deletions(-)
 create mode 100644 app/components/Timeline.tsx

diff --git a/app/components/KnowledgeQuests.tsx b/app/components/KnowledgeQuests.tsx
index ebd1fd6..d901ad6 100644
--- a/app/components/KnowledgeQuests.tsx
+++ b/app/components/KnowledgeQuests.tsx
@@ -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');
             }
diff --git a/app/components/Timeline.tsx b/app/components/Timeline.tsx
new file mode 100644
index 0000000..c08c52a
--- /dev/null
+++ b/app/components/Timeline.tsx
@@ -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;
diff --git a/app/components/TopPerformers.tsx b/app/components/TopPerformers.tsx
index 043c571..f68bfb9 100644
--- a/app/components/TopPerformers.tsx
+++ b/app/components/TopPerformers.tsx
@@ -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>
   );
-}
+}
\ No newline at end of file
diff --git a/app/routes/_index.tsx b/app/routes/_index.tsx
index d6e4b5c..b695799 100644
--- a/app/routes/_index.tsx
+++ b/app/routes/_index.tsx
@@ -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>
   );
 }
diff --git a/app/routes/knowledge-quest.tsx b/app/routes/knowledge-quest.tsx
index 24e0974..1e6f6d9 100644
--- a/app/routes/knowledge-quest.tsx
+++ b/app/routes/knowledge-quest.tsx
@@ -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>