48 lines
1.7 KiB
TypeScript
48 lines
1.7 KiB
TypeScript
import { useEffect, useState } from 'react';
|
|
import BrandLogo from './partials/BrandLogo.jsx';
|
|
import FAQDiscord from './partials/FAQDiscord.jsx';
|
|
import Features from './partials/Features.jsx';
|
|
import Footer from './partials/Footer.jsx';
|
|
import Hero from './partials/Hero.jsx';
|
|
import MemeLibrarySearch from './partials/MemeLibrarySearch.jsx';
|
|
|
|
const Home = ({ faqData }) => {
|
|
const [isClient, setIsClient] = useState(false);
|
|
const [Editor, setEditor] = useState(null);
|
|
|
|
useEffect(() => {
|
|
setIsClient(true);
|
|
// Dynamically import Editor only on client-side to avoid SSR issues with Konva
|
|
if (typeof window !== 'undefined') {
|
|
import('@/modules/editor/editor.jsx').then((module) => {
|
|
setEditor(() => module.default);
|
|
});
|
|
}
|
|
}, []);
|
|
|
|
return (
|
|
<div className="min-h-[100vh] space-y-0 bg-neutral-50 py-6 dark:bg-black">
|
|
<BrandLogo className="pb-2" />
|
|
<div className="to-muted/10 w-full bg-gradient-to-b from-transparent dark:from-transparent dark:to-neutral-900">
|
|
{isClient && Editor ? (
|
|
<Editor />
|
|
) : (
|
|
<div className="flex h-96 items-center justify-center">
|
|
<div className="text-muted-foreground">Loading editor...</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
<div className="space-y-16">
|
|
<Hero />
|
|
<MemeLibrarySearch />
|
|
<Features />
|
|
<FAQDiscord faqData={faqData} />
|
|
</div>
|
|
<Footer />
|
|
{/* <AuthUser /> */}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Home;
|