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

work on classmate-directory page

master
Suvodip 2024-07-29 17:34:42 +05:30
parent 109c1a598f
commit db1be21da7
3 changed files with 192 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
app/components/ClassmateTutorSection.tsx
View File

@ -1,20 +1,18 @@
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>
<div className='absolute top-0 left-0 w-full h-2/5' 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-3/5' 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" />
<img className='w-[115px] h-[115px] border-[5px] border-[#3362AF] 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 className="z-10 border-b-[1px] border-[#B8B8B8] w-full my-3"></div>
<p className="z-10 text-[12px] font-[600] text-[#fff] text-center">Early Childhood Educator | 3 YRS of Experience</p>
</div>
);
}

135
app/components/TopPerformers.tsx
View File

@ -52,6 +52,141 @@ let performersData = [
rank: "6",
program: "Graduate Program",
avatar: "avatar6.png"
},
{
id: "7",
name: "Alice",
score: "33/50",
points: "980",
rank: "7",
program: "Graduate Program",
avatar: "avatar1.png"
},
{
id: "8",
name: "Bob",
score: "32/50",
points: "978",
rank: "8",
program: "Graduate Program",
avatar: "avatar2.png"
},
{
id: "9",
name: "Charlie",
score: "30/50",
points: "975",
rank: "9",
program: "Graduate Program",
avatar: "avatar3.png"
},
{
id: "10",
name: "Diana",
score: "28/50",
points: "972",
rank: "10",
program: "Graduate Program",
avatar: "avatar4.png"
},
{
id: "11",
name: "Edward",
score: "27/50",
points: "970",
rank: "11",
program: "Graduate Program",
avatar: "avatar5.png"
},
{
id: "12",
name: "Fiona",
score: "26/50",
points: "968",
rank: "12",
program: "Graduate Program",
avatar: "avatar6.png"
},
{
id: "13",
name: "George",
score: "25/50",
points: "965",
rank: "13",
program: "Graduate Program",
avatar: "avatar1.png"
},
{
id: "14",
name: "Hannah",
score: "23/50",
points: "962",
rank: "14",
program: "Graduate Program",
avatar: "avatar2.png"
},
{
id: "15",
name: "Ian",
score: "22/50",
points: "960",
rank: "15",
program: "Graduate Program",
avatar: "avatar3.png"
},
{
id: "16",
name: "Julia",
score: "20/50",
points: "957",
rank: "16",
program: "Graduate Program",
avatar: "avatar4.png"
},
{
id: "17",
name: "Kyle",
score: "19/50",
points: "955",
rank: "17",
program: "Graduate Program",
avatar: "avatar5.png"
},
{
id: "18",
name: "Laura",
score: "18/50",
points: "953",
rank: "18",
program: "Graduate Program",
avatar: "avatar6.png"
},
{
id: "19",
name: "Michael",
score: "17/50",
points: "950",
rank: "19",
program: "Graduate Program",
avatar: "avatar1.png"
},
{
id: "20",
name: "Nancy",
score: "16/50",
points: "947",
rank: "20",
program: "Graduate Program",
avatar: "avatar2.png"
},
{
id: "21",
name: "Oliver",
score: "15/50",
points: "945",
rank: "21",
program: "Graduate Program",
avatar: "avatar3.png"
}
];

12
app/routes/classmate-directory.tsx
View File

@ -194,7 +194,7 @@ 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'>
<Breadcrumb separator=">" items={[{title: <a href="">Administration</a>,},{title: 'Class Directory',},]}/>
<Breadcrumb separator=">" className='pl-6' style={{fontSize: '18px' , fontWeight: '700'}} items={[{title: <a href="">Administration</a>,},{title: 'Class Directory',},]}/>
</div>
<div>
<Button className='border-none shadow-none bg-transparent hover:bg-transparent' onClick={showLoading}>
@ -221,18 +221,20 @@ const App: React.FC = () => {
</div>
{/* Place Content from here */}
<section className=''>
<div className='grid grid-cols-1 md:grid-cols-7'>
<div className='md:col-span-5 border-r-[1px] border-r-[#CFCFCF]'>
<section className='container mx-auto'>
<div className='grid grid-cols-1 xl:grid-cols-7'>
<div className='xl:col-span-5 border-r-[1px] border-r-[#CFCFCF]'>
<ClassMates />
</div>
<div className='md:col-span-2 p-4'>
<div className='xl:col-span-2 p-4'>
<div>
<ClassmateTutorSection />
</div>
<div className='border-[1px] border-r-[#CFCFCF] mt-6'>
<TopPerformers />
</div>
</div>
</div>
</section>
</Content>