read cources

This commit is contained in:
Flatlogic Bot 2025-05-13 12:12:33 +00:00
parent ee08f35178
commit d1fc101a26
3 changed files with 38 additions and 4 deletions

File diff suppressed because one or more lines are too long

View File

@ -0,0 +1 @@
{}

View File

@ -1,19 +1,51 @@
import React from 'react'; import React, { useState, useEffect } from 'react';
import type { ReactElement } from 'react'; import type { ReactElement } from 'react';
import Head from 'next/head'; import Head from 'next/head';
import LayoutGuest from '../../layouts/Guest'; import LayoutGuest from '../../layouts/Guest';
import WebSiteHeader from '../../components/WebPageComponents/Header'; import WebSiteHeader from '../../components/WebPageComponents/Header';
import WebSiteFooter from '../../components/WebPageComponents/Footer'; import WebSiteFooter from '../../components/WebPageComponents/Footer';
import CardBox from '../../components/CardBox';
interface Course {
id: number;
title: string;
description: string;
}
export default function CourcesPage() { export default function CourcesPage() {
const [courses, setCourses] = useState<Course[]>([]);
useEffect(() => {
fetch('/api/courses')
.then(res => res.json())
.then(data => {
if (Array.isArray(data)) setCourses(data);
else if (data.items) setCourses(data.items);
else setCourses([]);
})
.catch(err => console.error(err));
}, []);
return ( return (
<> <>
<Head> <Head>
<title>Cources</title> <title>Cources</title>
</Head> </Head>
<WebSiteHeader projectName="test i18" /> <WebSiteHeader projectName="test i18" />
<main className="flex-grow bg-white rounded-none p-8"> <main className="flex-grow bg-white p-8">
<h1 className="text-2xl font-bold">Cources Page</h1> <h1 className="text-2xl font-bold mb-6">Cources</h1>
{courses.length > 0 ? (
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
{courses.map(course => (
<CardBox key={course.id} className="p-4">
<h2 className="text-xl font-semibold">{course.title}</h2>
<p className="mt-2 text-gray-600">{course.description}</p>
</CardBox>
))}
</div>
) : (
<p>No courses found.</p>
)}
</main> </main>
<WebSiteFooter projectName="test i18" /> <WebSiteFooter projectName="test i18" />
</> </>