admin/31463
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

cards for courses

Browse Source
This commit is contained in:
Flatlogic Bot 2025-05-12 21:14:28 +00:00
parent f1670e105f
commit d75bcd4f00
3 changed files with 62 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
app-shell/src/_schema.json
View File

File diff suppressed because one or more lines are too long

41
frontend/src/components/Courses/CoursesPageCard.tsx Normal file
View File

@ -0,0 +1,41 @@
import React from 'react';
import Link from 'next/link';
interface CoursesPageCardProps {
courses: Array<any>;
}
const CoursesPageCard: React.FC<CoursesPageCardProps> = ({ courses }) => {
return (
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
{courses.map((course) => (
<div
key={course.id}
className="bg-white shadow-md rounded-lg overflow-hidden hover:shadow-lg transition-shadow duration-200"
>
{course.imageUrl && (
<img
src={course.imageUrl}
alt={course.title}
className="w-full h-48 object-cover"
/>
)}
<div className="p-4">
<h3 className="text-lg font-semibold mb-2">{course.title}</h3>
<p
className="text-gray-600 text-sm mb-4 overflow-hidden"
style={{ WebkitLineClamp: '2', display: '-webkit-box', WebkitBoxOrient: 'vertical' }}
>
{course.description}
</p>
<Link href={`/courses/${course.id}`} className="inline-block bg-indigo-600 text-white px-4 py-2 rounded hover:bg-indigo-700">
View Details
</Link>
</div>
</div>
))}
</div>
);
};
export default CoursesPageCard;

22
frontend/src/pages/web_pages/courses.tsx
View File

@ -1,13 +1,25 @@
import React from 'react'; import React, { ReactElement, useState, useEffect } 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 axios from 'axios';
import CoursesPageCard from '../../components/Courses/CoursesPageCard';
export default function CoursesPage() { export default function CoursesPage() {
const projectName = 'test i18'; const projectName = 'test i18';
const [courses, setCourses] = useState<any[]>([]);
const [loading, setLoading] = useState<boolean>(true);
useEffect(() => {
axios
.get('courses')
.then((res) => setCourses(res.data.rows))
.catch((err) => console.error(err))
.finally(() => setLoading(false));
}, []);
return ( return (
<> <>
<Head> <Head>
@ -18,7 +30,11 @@ export default function CoursesPage() {
<WebSiteHeader projectName={projectName} /> <WebSiteHeader projectName={projectName} />
<main className="flex-grow p-8"> <main className="flex-grow p-8">
{/* Blank page content for Courses */} {loading ? (
<p>Loading courses...</p>
) : (
<CoursesPageCard courses={courses} />
)}
</main> </main>
<WebSiteFooter projectName={projectName} /> <WebSiteFooter projectName={projectName} />