48 lines
1.3 KiB
TypeScript
48 lines
1.3 KiB
TypeScript
"use client"
|
|
import React, { useEffect, useState, Suspense } from 'react'
|
|
import Banner from './Banner'
|
|
import LongDesc from './LongDesc'
|
|
import CourseImagesSilder from './CourseImagesSilder'
|
|
import Accordion from './Accordion'
|
|
import { CoursesProps, SettingsProps } from '@/types'
|
|
import Footer from '../Footer'
|
|
import Loading from '../Loading'
|
|
|
|
const Course = ({ course, settings }: { course: CoursesProps, settings: SettingsProps }) => {
|
|
|
|
const [loading, setLoading] = useState(true);
|
|
// const [courses, setCourses] = useState<CoursesProps[]>([]);
|
|
|
|
useEffect(() => {
|
|
const loadCourses = async () => {
|
|
setLoading(true);
|
|
await new Promise(resolve => setTimeout(resolve, 100)); // 0.5 second delay
|
|
setLoading(false);
|
|
}; loadCourses();
|
|
}, []);
|
|
|
|
|
|
|
|
return (
|
|
<div className='bg-[#F6E8E8]'>
|
|
{loading ? (
|
|
<div className="flex justify-center items-center h-screen">
|
|
<Suspense fallback={<div>Loading...</div>}>
|
|
<Loading />
|
|
</Suspense>
|
|
</div>
|
|
) : (
|
|
<div>
|
|
<Banner courseData={course} />
|
|
<LongDesc courseData={course} />
|
|
<CourseImagesSilder courseData={course} />
|
|
<Accordion courseData={course} />
|
|
<Footer settings={settings} />
|
|
</div>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default Course
|