69 lines
3.0 KiB
TypeScript
69 lines
3.0 KiB
TypeScript
import React, { useEffect, useState } from "react";
|
|
import Image from 'next/image'
|
|
import { Inter } from 'next/font/google'
|
|
const inter = Inter({ subsets: ['latin'] })
|
|
import NavBar from '../components/NavBar'
|
|
export default function Modal() {
|
|
const [school, setUser] = useState<any[]>([]);
|
|
const fetchData = async () => {
|
|
const response = await fetch("https://management.beanstalkedu.com/items/school?filter[status][_eq]=published");
|
|
const data = await response.json();
|
|
return setUser(data.data);
|
|
}
|
|
// console.log(user)
|
|
|
|
useEffect(() => {
|
|
fetchData();
|
|
},[])
|
|
|
|
return (
|
|
<main>
|
|
<div>
|
|
<NavBar />
|
|
<section className='container mx-auto px-4 mt-16'>
|
|
<div className="flex justify-end bg-[#FFF6F2] p-2 border-x-2 border-t-2 rounded-t-xl ">
|
|
<a href="/add-school-form" className=" inline-flex place-items-center p-2">
|
|
<img src="/img/3.svg" alt="" />
|
|
Add School
|
|
</a>
|
|
</div>
|
|
<div className='flex xl:justify-center overflow-x-scroll pb-4 w-full'>
|
|
<table className=" text-center border-x-2 border-b-2 p-2 w-full">
|
|
<thead className=''>
|
|
<tr className='bg-[#FFF6F2] text-[#1D1D1D] text-xl whitespace-nowrap'>
|
|
<th className=" p-2">ID</th>
|
|
<th className=" p-2">School Name</th>
|
|
<th className=" p-2">Country</th>
|
|
<th className=" p-2">Anual</th>
|
|
<th className=" p-2">Early Start Program</th>
|
|
<th className=" p-2">Toddlers</th>
|
|
<th className=" p-2">Interakto</th>
|
|
<th className=" p-2">Status</th>
|
|
<th className=" p-2"> <img src="/img/3.svg" alt="" />Edit</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{school.map(data=>
|
|
<tr className="border-b-2 whitespace-normal">
|
|
<td className=" p-2">{data.id}</td>
|
|
<td className=" p-2">{data.name}</td>
|
|
<td className="p-2">{data.country}</td>
|
|
<td className="p-2">{data.anual}</td>
|
|
<td className="p-2">{data.early_start_programme}</td>
|
|
<td className="p-2">{data.toddlers}</td>
|
|
<td className="p-2">{data.interakto}</td>
|
|
<td className="p-2">{data.status}</td>
|
|
<td className="p-2"> <a href='"/editschool?id="{data.name}'> Edit </a> </td>
|
|
</tr>
|
|
)}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</main>
|
|
)
|
|
|
|
}
|
|
|