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-07-30 20:59:12 +05:30
parent f65b67b2a5
commit 9c7a9882ed
6 changed files with 72 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/components/ContinueLearning.tsx
View File

@ -41,7 +41,7 @@ export default function ContinueLearning() {
return (
<section className='bg-[#FCFCFC]'>
<div className='container mx-auto'>
<h2 className='text-[20px] font-[700] my-4 inline-flex leading-[24px]'>Continue Learning <img src="../../assets/right-arrow.svg" alt="" /></h2>
<h2 className='text-[20px] font-[700] my-4 inline-flex leading-[24px]'>Continue Learning <img src="/assets/right-arrow.svg" alt="" /></h2>
<div className='grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6'>
{courseData.map(data=>(
<div key={data.id} className=''>

8
app/components/KnowledgeQuests.tsx
View File

@ -49,10 +49,10 @@ export default function KnowledgeQuests() {
<div className='flex flex-row justify-between gap-6'>
<img src={data.img} alt="" />
<div className='flex flex-col space-y-3'>
<h2 className='text-[16px] font-[700] text-[#000]'>{data.title}</h2>
<p className='text-[14px] font-[600] text-[#525252]'>{data.challenge}</p>
<p className='text-[14px] font-[600] text-[#9D9D9D]'>{data.question}</p>
</div>
<h2 className='text-[16px] font-[700] text-[#000]'>{data.title}</h2>
<p className='text-[14px] font-[600] text-[#525252]'>{data.challenge}</p>
<p className='text-[14px] font-[600] text-[#9D9D9D]'>{data.question}</p>
</div>
</div>
<button className='bg-[#000] text-[#FFF] rounded-[8px] px-16 py-3 h-fit text-[18px] font-[600]'>Start</button>
</div>

10
app/components/ProgressReview.tsx
View File

@ -41,7 +41,7 @@ export default function Index() {
return res.json();
})
.then((data) => {
// console.log('Fetched data:', data);
console.log('Fetched data:', data);
// Extract the modules array from the response
if (data && Array.isArray(data.modules)) {
setQuizModuleData(data.modules);
@ -93,11 +93,7 @@ export default function Index() {
</div>
<div className="flex flex-col">
{moduleData.quizzes.map((quizData) => (
<div
onClick={() => showModal(quizData)}
className="flex flex-row justify-between place-items-center hover:bg-[#FFF4EA] duration-500 border-b-[1px] border-b-[#CFCFCF] p-6 cursor-pointer"
key={quizData.quizId}
>
<div onClick={() => showModal(quizData)} className="flex flex-row justify-between place-items-center hover:bg-[#FFF4EA] duration-500 border-b-[1px] border-b-[#CFCFCF] p-6 cursor-pointer" key={quizData.quizId}>
<div className="flex flex-col space-y-2">
<h3 className="text-[20px] font-[700]">
#{quizData.quizId} {quizData.quizName}
@ -113,7 +109,7 @@ export default function Index() {
<span className="text-[32px] font-[700] text-[#EF7A0C]">{quizData.attendQuestion}</span>/
<span className="text-[16px] font-[700] ">{quizData.totalQuestion}</span>
</p>
<img src="../../assets/right-arrow.svg" alt="" />
<img src="/assets/right-arrow.svg" alt="" />
</div>
</div>
))}

2
app/components/QuizzesScore.tsx
View File

@ -43,7 +43,7 @@ export default function quizScoreData() {
<div className="border-[1px] border-[#CFCFCF] rounded-t-[10px]" style={{background: 'linear-gradient(138.22deg, #4377C6 0%, #092E76 180.99%)'}}>
<h2 className="text-[20px] font-[700] text-[#FFF] p-4">Quizzes score</h2>
<div className="flex flex-col">
{quizData.slice(15).map((data => (
{quizData.slice(0, 10).map((data => (
<a key={data.quizId} href='#' className='flex flex-row justify-between place-items-center bg-[#FCFCFC] border-b-[1px] border-b-[#CFCFCF] p-4'>
<div className='flex flex-col'>
<p className='text-[14px] font-[600] text-[#EF7A0C]'>{data.quizType}</p>

18
app/components/TopPerformers.tsx
View File

@ -49,34 +49,34 @@ export default function TopPerformers() {
return (
<div className=''>
<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>
<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='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='absolute mt-12' src="../../assets/bacth2.svg" 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}</p>
<p className='text-[12px] font-[700] text-center'>{secondHighestRank.score} / 50</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='-mt-10' src="/assets/crown.png" alt="" />
<img className='mx-auto h-[52px] w-[60px]' 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>
<p className='text-[12px] font-[700] text-center mt-4'>{highestRank.name}</p>
<p className='text-[12px] font-[700] text-center'>{highestRank.score}</p>
<p className='text-[12px] font-[700] text-center'>{highestRank.score} / 50</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='absolute mt-12' src="../../assets/bacth3.svg" 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}</p>
<p className='text-[12px] font-[700] text-center'>{thirdHighestRank.score} / 50</p>
</div>
</div>
<div className='flex flex-col'>
@ -89,7 +89,7 @@ export default function TopPerformers() {
<p className='text-[10px] font-[700] text-[#6E6E6E]'>{data.program}</p>
</div>
<div className='flex flex-col justify-center place-items-center'>
<img src="../../assets/points-icon.svg" alt="" />
<img src="/assets/points-icon.svg" alt="" />
<p className='text-[10px] font-[700]'>{data.points} Points</p>
</div>
</div>

54
app/routes/sign-in.tsx Normal file
View File

@ -0,0 +1,54 @@
import { useState } from 'react';
import { FormEvent } from 'react';
export default function SignIn() {
const [userName, setUserName] = useState('');
const [password, setPassword] = useState('');
const handleSubmit = async (e: FormEvent<HTMLFormElement>) => {
e.preventDefault(); // Prevent the default form submission
const data = {
userName,
password,
};
try {
const response = await fetch('https://iimtt-api.s38.siliconpin.com/api/sign-in', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(data),
});
if (!response.ok) {
throw new Error('Network response was not ok');
}
const result = await response.json();
console.log('Success:', result);
} catch (error) {
console.error('Error:', error);
}
};
return (
<section className="h-screen flex items-center justify-center">
<div className="container mx-auto px-4 max-w-xl">
<form onSubmit={handleSubmit} className="flex flex-col space-y-4 border-[1px] border-[#CFCFCF] rounded-[10px] shadow-lg py-10 px-6 ">
<div className="flex flex-col space-y-2">
<label htmlFor="userName">User Name:</label>
<input className="focus:outline-none border-[1px] focus:border-[#EF7A0C] p-2 rounded-[8px]" type="text" name="userName" id="userName" value={userName} onChange={(e) => setUserName(e.target.value)} />
</div>
<div className="flex flex-col space-y-2">
<label htmlFor="password">Password:</label>
<input className="focus:outline-none border-[1px] focus:border-[#EF7A0C] p-2 rounded-[8px]" type="password" name="password" id="password" value={password} onChange={(e) => setPassword(e.target.value)}/>
</div>
<label htmlFor="remember"><input type="checkbox" name="remember" id="remember" /> Remember Password</label>
<br />
<button className="bg-[#000] text-[#FFF] py-2.5 rounded-[8px]" type="submit" >Sign In</button>
</form>
</div>
</section>
);
}