51 lines
1.6 KiB
TypeScript
51 lines
1.6 KiB
TypeScript
"use client";
|
|
|
|
import { useState, useEffect, lazy, Suspense } from "react";
|
|
const Hero1 = lazy(() => import('../Hero1'));
|
|
import Hero2 from '../Hero2'
|
|
import CoursesSilder from "../CoursesSilder";
|
|
import ContactForm from '../ContactForm'
|
|
import Loading from '../Loading'
|
|
import Footer from '../Footer'
|
|
import { CoursesProps, SettingsProps } from "@/types";
|
|
import Whatsapp from "../Whatsapp";
|
|
const Home = ({ courses, settings }: { courses: 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, 300)); // 0.5 second delay
|
|
setLoading(false);
|
|
}; loadCourses();
|
|
}, []);
|
|
|
|
const startLoading = () => setLoading(true);
|
|
const stopLoading = () => setLoading(false);
|
|
|
|
console.log(courses);
|
|
return (
|
|
<div className='bg-[#F2D5D5]'>
|
|
{loading ? (
|
|
<div className="flex justify-center items-center h-screen">
|
|
<Suspense fallback={<div>Loading...</div>}>
|
|
<Loading />
|
|
</Suspense>
|
|
</div>
|
|
) : (
|
|
<div>
|
|
<Hero1 />
|
|
<Hero2 settings={settings} />
|
|
<Suspense fallback={<div>Loading...</div>}>
|
|
<CoursesSilder courses={courses} />
|
|
</Suspense>
|
|
<ContactForm startLoading={startLoading} stopLoading={stopLoading} />
|
|
<Whatsapp settings={settings} />
|
|
<Footer settings={settings} />
|
|
</div>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|
|
export default Home |