generated from dwd/boilarplate-remix-tailwind-antd
s1
This commit is contained in:
Suvodip
171
app/components/ClassMates.tsx
Normal file
171
app/components/ClassMates.tsx
Normal file
@@ -0,0 +1,171 @@
|
||||
let classmatesData = [
|
||||
{
|
||||
id: "1",
|
||||
name: "Daniel Nguyen",
|
||||
program: "Graduate Program",
|
||||
type: "Student",
|
||||
avatar: "avatar1.png"
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
name: "Sarah Anderson",
|
||||
program: "Post-Graduate Program",
|
||||
type: "Student",
|
||||
avatar: "avatar2.png"
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
name: "John Smith",
|
||||
program: "Undergraduate Program",
|
||||
type: "Student",
|
||||
avatar: "avatar3.png"
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
name: "Emily Davis",
|
||||
program: "Graduate Program",
|
||||
type: "Student",
|
||||
avatar: "avatar4.png"
|
||||
},
|
||||
{
|
||||
id: "5",
|
||||
name: "Michael Johnson",
|
||||
program: "Post-Graduate Program",
|
||||
type: "Student",
|
||||
avatar: "avatar5.png"
|
||||
},
|
||||
{
|
||||
id: "6",
|
||||
name: "Jessica Wilson",
|
||||
program: "Undergraduate Program",
|
||||
type: "Student",
|
||||
avatar: "avatar6.png"
|
||||
},
|
||||
{
|
||||
id: "7",
|
||||
name: "David Brown",
|
||||
program: "Graduate Program",
|
||||
type: "Student",
|
||||
avatar: "avatar1.png"
|
||||
},
|
||||
{
|
||||
id: "8",
|
||||
name: "Laura Lee",
|
||||
program: "Post-Graduate Program",
|
||||
type: "Student",
|
||||
avatar: "avatar2.png"
|
||||
},
|
||||
{
|
||||
id: "9",
|
||||
name: "Chris Miller",
|
||||
program: "Undergraduate Program",
|
||||
type: "Student",
|
||||
avatar: "avatar3.png"
|
||||
},
|
||||
{
|
||||
id: "10",
|
||||
name: "Sophia Taylor",
|
||||
program: "Graduate Program",
|
||||
type: "Student",
|
||||
avatar: "avatar4.png"
|
||||
},
|
||||
{
|
||||
id: "11",
|
||||
name: "James Anderson",
|
||||
program: "Post-Graduate Program",
|
||||
type: "Student",
|
||||
avatar: "avatar5.png"
|
||||
},
|
||||
{
|
||||
id: "12",
|
||||
name: "Olivia Thomas",
|
||||
program: "Undergraduate Program",
|
||||
type: "Student",
|
||||
avatar: "avatar6.png"
|
||||
},
|
||||
{
|
||||
id: "13",
|
||||
name: "Ethan Martinez",
|
||||
program: "Graduate Program",
|
||||
type: "Student",
|
||||
avatar: "avatar1.png"
|
||||
},
|
||||
{
|
||||
id: "14",
|
||||
name: "Ava Garcia",
|
||||
program: "Post-Graduate Program",
|
||||
type: "Student",
|
||||
avatar: "avatar2.png"
|
||||
},
|
||||
{
|
||||
id: "15",
|
||||
name: "Noah Rodriguez",
|
||||
program: "Undergraduate Program",
|
||||
type: "Student",
|
||||
avatar: "avatar3.png"
|
||||
},
|
||||
{
|
||||
id: "16",
|
||||
name: "Mia Martinez",
|
||||
program: "Graduate Program",
|
||||
type: "Student",
|
||||
avatar: "avatar4.png"
|
||||
},
|
||||
{
|
||||
id: "17",
|
||||
name: "Lucas Wilson",
|
||||
program: "Post-Graduate Program",
|
||||
type: "Student",
|
||||
avatar: "avatar5.png"
|
||||
},
|
||||
{
|
||||
id: "18",
|
||||
name: "Isabella Clark",
|
||||
program: "Undergraduate Program",
|
||||
type: "Student",
|
||||
avatar: "avatar6.png"
|
||||
},
|
||||
{
|
||||
id: "19",
|
||||
name: "Liam Walker",
|
||||
program: "Graduate Program",
|
||||
type: "Student",
|
||||
avatar: "avatar1.png"
|
||||
},
|
||||
{
|
||||
id: "20",
|
||||
name: "Charlotte Lewis",
|
||||
program: "Post-Graduate Program",
|
||||
type: "Student",
|
||||
avatar: "avatar2.png"
|
||||
}
|
||||
];
|
||||
export default function Index() {
|
||||
return (
|
||||
<div className=''>
|
||||
<p className='text-[18px] font-[700] text-[#525252] border-b-[1px] border-b-[#CFCFCF] py-5 pl-5 container-fluid'>
|
||||
<span>Your Classmates </span> | <span>Graduate Program</span>
|
||||
</p>
|
||||
<div className='container mx-auto grid grid-cols-1 lg:grid-cols-2 2xl:grid-cols-3 gap-6 place-items-center p-6'>
|
||||
{classmatesData.map(data => (
|
||||
<div key={data.id} className='relative flex flex-col justify-center items-center shadow-lg w-full rounded-[10px] py-8 overflow-hidden' style={{ background: 'transparent' }}>
|
||||
<div className='absolute top-0 left-0 w-full h-1/2' style={{ backgroundImage: `url('../../assets/${data.avatar}')`, backgroundRepeat: 'no-repeat', backgroundSize: 'cover', backgroundPosition: 'center', filter: 'blur(8px)'}}></div>
|
||||
<div className='absolute bottom-0 left-0 w-full h-1/2 bg-[#FFF] '></div><br /><br />
|
||||
<img className='w-[60px] h-[60px] border-[4px] border-[#FFF] rounded-full z-10' src={`../../assets/${data.avatar}`} alt="" />
|
||||
<p className='z-10 text-[16px] font-[700] text-[]'>{data.name}</p>
|
||||
<p className='z-10 text-[12px] font-[500] text-[#6E6E6E]'>
|
||||
<span>{data.program}</span> | <span>{data.type}</span>
|
||||
</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
|
||||
{/* <div className="h-[90px] bg-cover bg-center w-full" style={{ backgroundImage: `url('../../assets/${data.avatar}')` }}>
|
||||
<img className='w-[60px] h-[60px]' src={`../../assets/${data.avatar}`} alt="" />
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis quasi nisi eligendi consectetur sequi nemo doloribus, obcaecati corrupti dolorum dolores omnis magni similique. Debitis unde nam, magnam maxime magni repudiandae.</p>
|
||||
</div> */}
|
||||
20
app/components/ClassmateTutorSection.tsx
Normal file
20
app/components/ClassmateTutorSection.tsx
Normal file
@@ -0,0 +1,20 @@
|
||||
export default function Index() {
|
||||
return (
|
||||
<div className='relative flex flex-col justify-center items-center shadow-lg w-full rounded-[10px] py-8 overflow-hidden' style={{ background: 'transparent' }}>
|
||||
<div className='absolute top-0 left-0 w-full h-1/2' style={{ backgroundImage: `url('../../assets/tutor.png')`, backgroundRepeat: 'no-repeat', backgroundSize: 'cover', backgroundPosition: 'center', filter: 'blur(8px)' }}></div>
|
||||
<div className='absolute bottom-0 left-0 w-full h-1/2' style={{background: 'linear-gradient(101.74deg, #4276C5 0.01%, #26529D 100.18%)'}}></div>
|
||||
<br /><br />
|
||||
<img className='w-[60px] h-[60px] border-[4px] border-[#FFF] rounded-full z-10' src={`../../assets/tutor.png`} alt="Tutor" />
|
||||
<p className='z-10 text-[30px] font-[700] text-[#FFF]'>Sarah Anderson</p>
|
||||
<p className='z-10 '>
|
||||
<span className="text-[14px] font-[700] text-[#EF7A0C]">TUTOR </span>
|
||||
<span className="text-[#FFF]"> | </span>
|
||||
<span className="text-[14px] font-[600] text-[#FFF]">Graduate Program</span>
|
||||
</p>
|
||||
<hr className="z-10" />
|
||||
{/* <p className="z-10">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Id a cum maxime iste dicta minus vitae harum saepe, assumenda esse sit autem qui quis deserunt adipisci omnis veniam incidunt? Placeat.</p> */}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
@@ -25,145 +25,30 @@ let knowledgeData = [
|
||||
}
|
||||
];
|
||||
|
||||
let performersData = [
|
||||
{
|
||||
id: "1",
|
||||
name: "Eiden",
|
||||
score: "48/50",
|
||||
points: "999",
|
||||
rank: "1",
|
||||
program: "Graduate Program",
|
||||
avatar: "avatar1.png"
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
name: "Jackson",
|
||||
score: "45/50",
|
||||
points: "997",
|
||||
rank: "2",
|
||||
program: "Graduate Program",
|
||||
avatar: "avatar2.png"
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
name: "Emma Aria",
|
||||
score: "43/50",
|
||||
points: "994",
|
||||
rank: "3",
|
||||
program: "Graduate Program",
|
||||
avatar: "avatar3.png"
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
name: "John Doe",
|
||||
score: "40/50",
|
||||
points: "990",
|
||||
rank: "4",
|
||||
program: "Graduate Program",
|
||||
avatar: "avatar4.png"
|
||||
},
|
||||
{
|
||||
id: "5",
|
||||
name: "Jane Cooper",
|
||||
score: "37/50",
|
||||
points: "987",
|
||||
rank: "5",
|
||||
program: "Graduate Program",
|
||||
avatar: "avatar5.png"
|
||||
},
|
||||
{
|
||||
id: "6",
|
||||
name: "John Doe",
|
||||
score: "35/50",
|
||||
points: "982",
|
||||
rank: "6",
|
||||
program: "Graduate Program",
|
||||
avatar: "avatar6.png"
|
||||
}
|
||||
];
|
||||
|
||||
const sortedData = performersData.sort((a, b) => parseInt(a.rank) - parseInt(b.rank));
|
||||
|
||||
const highestRank = sortedData[0];
|
||||
const secondHighestRank = sortedData[1];
|
||||
const thirdHighestRank = sortedData[2];
|
||||
|
||||
console.log('The highest rank is:', highestRank);
|
||||
console.log('The second highest rank is:', secondHighestRank);
|
||||
console.log('The Third highest rank is:', thirdHighestRank);
|
||||
|
||||
|
||||
|
||||
export default function(){
|
||||
return(
|
||||
<section className='container mx-auto my-16'>
|
||||
<div className='grid grid-cols-1 xl:grid-cols-7 gap-y-6 border-[1px] border-[#CFCFCF]'>
|
||||
<div className='xl:col-span-5 border-r-[1px] border-[#CFCFCF]'>
|
||||
<h2 className='text-[20px] font-[700] inline-flex p-6'>Knowledge Quests <img src="../../assets/right-arrow.svg" alt="" /></h2>
|
||||
<div className='flex flex-col gap-6'>
|
||||
{knowledgeData.map(data => (
|
||||
<div key={data.id} className='flex flex-row justify-between px-6 place-items-center'>
|
||||
<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>
|
||||
</div>
|
||||
<button className='bg-[#000] text-[#FFF] rounded-[8px] px-16 py-3 h-fit text-[18px] font-[600]'>Start</button>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<div className='xl:col-span-2'>
|
||||
<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='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={`../../assets/${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}</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={`../../assets/${highestRank.avatar}`} alt="" />
|
||||
<img className='absolute mt-12' 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>
|
||||
</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={`../../assets/${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}</p>
|
||||
</div>
|
||||
<section className=''>
|
||||
<div className=''>
|
||||
<div className=''>
|
||||
<h2 className='text-[20px] font-[700] inline-flex p-6'>Knowledge Quests <img src="../../assets/right-arrow.svg" alt="" /></h2>
|
||||
<div className='flex flex-col gap-6'>
|
||||
{knowledgeData.map(data => (
|
||||
<div key={data.id} className='flex flex-row justify-between px-6 place-items-center'>
|
||||
<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>
|
||||
<div className='flex flex-col'>
|
||||
{sortedData.slice(3).map(data => (
|
||||
<div key={data.id} className='flex flex-row justify-between place-items-center border-b-[1px] border-[#CFCFCF] p-2'>
|
||||
<p className='text-[11px] font-[700]'># {data.rank}</p>
|
||||
<img className='w-[35px] h-[35px]' src={`../../assets/${data.avatar}`} alt="" />
|
||||
<div>
|
||||
<p className='text-[14px] font-[700]'>{data.name}</p>
|
||||
<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="" />
|
||||
<p className='text-[10px] font-[700]'>{data.points} Points</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<button className='bg-[#000] text-[#FFF] rounded-[8px] px-16 py-3 h-fit text-[18px] font-[600]'>Start</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
@@ -489,7 +489,6 @@ export default function Index() {
|
||||
<p className="text-[20px] font-[500]">{questionData.correctAnswer}</p>
|
||||
<div className='inline-flex place-items-center space-x-4 w-full border-[1px] border-[#218B32] rounded-[10px] p-3'>
|
||||
<p className='text-[14px] font-[700] text-[#218B32] inline-flex place-items-center'><img src="../../assets/green-tick.svg" alt="" /> Correct</p>
|
||||
|
||||
<p className='text-[14px] font-[400]'> {questionData.correctAnswer}</p>
|
||||
</div>
|
||||
<ul>
|
||||
|
||||
119
app/components/TopPerformers.tsx
Normal file
119
app/components/TopPerformers.tsx
Normal file
@@ -0,0 +1,119 @@
|
||||
let performersData = [
|
||||
{
|
||||
id: "1",
|
||||
name: "Eiden",
|
||||
score: "48/50",
|
||||
points: "999",
|
||||
rank: "1",
|
||||
program: "Graduate Program",
|
||||
avatar: "avatar1.png"
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
name: "Jackson",
|
||||
score: "45/50",
|
||||
points: "997",
|
||||
rank: "2",
|
||||
program: "Graduate Program",
|
||||
avatar: "avatar2.png"
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
name: "Emma Aria",
|
||||
score: "43/50",
|
||||
points: "994",
|
||||
rank: "3",
|
||||
program: "Graduate Program",
|
||||
avatar: "avatar3.png"
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
name: "John Doe",
|
||||
score: "40/50",
|
||||
points: "990",
|
||||
rank: "4",
|
||||
program: "Graduate Program",
|
||||
avatar: "avatar4.png"
|
||||
},
|
||||
{
|
||||
id: "5",
|
||||
name: "Jane Cooper",
|
||||
score: "37/50",
|
||||
points: "987",
|
||||
rank: "5",
|
||||
program: "Graduate Program",
|
||||
avatar: "avatar5.png"
|
||||
},
|
||||
{
|
||||
id: "6",
|
||||
name: "John Doe",
|
||||
score: "35/50",
|
||||
points: "982",
|
||||
rank: "6",
|
||||
program: "Graduate Program",
|
||||
avatar: "avatar6.png"
|
||||
}
|
||||
];
|
||||
|
||||
const sortedData = performersData.sort((a, b) => parseInt(a.rank) - parseInt(b.rank));
|
||||
|
||||
const highestRank = sortedData[0];
|
||||
const secondHighestRank = sortedData[1];
|
||||
const thirdHighestRank = sortedData[2];
|
||||
|
||||
// console.log('The highest rank is:', highestRank);
|
||||
// console.log('The second highest rank is:', secondHighestRank);
|
||||
// console.log('The Third highest rank is:', thirdHighestRank);
|
||||
|
||||
|
||||
export default function(){
|
||||
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='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={`../../assets/${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}</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={`../../assets/${highestRank.avatar}`} alt="" />
|
||||
<img className='absolute mt-12' 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>
|
||||
</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={`../../assets/${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}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className='flex flex-col'>
|
||||
{sortedData.slice(3).map(data => (
|
||||
<div key={data.id} className='flex flex-row justify-between place-items-center border-b-[1px] border-[#CFCFCF] p-2'>
|
||||
<p className='text-[11px] font-[700]'># {data.rank}</p>
|
||||
<img className='w-[35px] h-[35px]' src={`../../assets/${data.avatar}`} alt="" />
|
||||
<div>
|
||||
<p className='text-[14px] font-[700]'>{data.name}</p>
|
||||
<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="" />
|
||||
<p className='text-[10px] font-[700]'>{data.points} Points</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user