dwd-projects/bs-p2
1
0
Fork 0
generated from dwd/boilarplate-remix-tailwind-antd
Code Issues Pull Requests 1 Packages Projects Releases Wiki Activity

dynamic data

Browse Source
This commit is contained in:
Suvodip
2024-07-29 21:45:32 +05:30
parent db1be21da7
commit c665a27db8
6 changed files with 418 additions and 1054 deletions
Download Patch File Download Diff File Expand all files Collapse all files

196
app/components/ClassMates.tsx
View File

@@ -1,146 +1,43 @@
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() {
import React, { useEffect, useState } from 'react';
interface Performer {
id: number;
name: string;
avatar: string;
program: string;
type: string;
}
export default function classMatesDirectory() {
const [classmatesData, setData] = useState<Performer[]>([]);
const [loading, setLoading] = useState(true);
const [error, setError] = useState<Error | null>(null);
useEffect(() => {
fetch('https://iimtt-api.s38.siliconpin.com/api/class-mates')
.then(res => {
if (!res.ok) {
throw new Error('Network response was not ok');
}
return res.json();
})
.then(data => {
setData(data);
setLoading(false);
})
.catch(error => {
console.error('Error fetching data:', error);
setError(error);
setLoading(false);
});
}, []);
if (loading) {
return <div>Loading...</div>;
}
if (error) {
return <div>Error: {error.message}</div>;
}
return (
<div className=''>
<p className='text-[18px] font-[700] text-[#525252] border-b-[1px] border-b-[#CFCFCF] py-5 pl-5 container-fluid'>
@@ -149,9 +46,9 @@ export default function Index() {
<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 top-0 left-0 w-full h-1/2' style={{ backgroundImage: `url('${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="" />
<img className='w-[60px] h-[60px] border-[4px] border-[#FFF] rounded-full z-10' src={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>
@@ -161,11 +58,4 @@ export default function Index() {
</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> */}
}