78 lines
2.6 KiB
TypeScript
78 lines
2.6 KiB
TypeScript
import { Suspense } from "react"
|
|
import { type Metadata } from "next"
|
|
import dynamic from "next/dynamic"
|
|
|
|
import { siteConfig } from "@/lib/config"
|
|
import { absoluteUrl } from "@/lib/utils"
|
|
import { Skeleton } from "@/styles/base-nova/ui/skeleton"
|
|
import { Customizer } from "@/app/(app)/(create)/components/customizer"
|
|
import { PresetHandler } from "@/app/(app)/(create)/components/preset-handler"
|
|
import { Preview } from "@/app/(app)/(create)/components/preview"
|
|
import { PreviewOverrideProvider } from "@/app/(app)/(create)/components/preview-override"
|
|
import { getAllItems } from "@/app/(app)/(create)/lib/api"
|
|
|
|
// Only shown on first visit (checks localStorage).
|
|
const WelcomeDialog = dynamic(() =>
|
|
import("@/app/(app)/(create)/components/welcome-dialog").then(
|
|
(m) => m.WelcomeDialog
|
|
)
|
|
)
|
|
|
|
export const metadata: Metadata = {
|
|
title: "New Project",
|
|
description:
|
|
"Customize everything. Pick your component library, icons, base color, theme, fonts and create your own version of shadcn/ui.",
|
|
openGraph: {
|
|
title: "New Project",
|
|
description:
|
|
"Customize everything. Pick your component library, icons, base color, theme, fonts and create your own version of shadcn/ui.",
|
|
type: "website",
|
|
url: absoluteUrl("/create"),
|
|
images: [
|
|
{
|
|
url: siteConfig.ogImage,
|
|
width: 1200,
|
|
height: 630,
|
|
alt: siteConfig.name,
|
|
},
|
|
],
|
|
},
|
|
twitter: {
|
|
card: "summary_large_image",
|
|
title: "New Project",
|
|
description:
|
|
"Customize everything. Pick your component library, icons, base color, theme, fonts and create your own version of shadcn/ui.",
|
|
images: [siteConfig.ogImage],
|
|
creator: "@shadcn",
|
|
},
|
|
}
|
|
|
|
export default function CreatePage() {
|
|
return (
|
|
<div className="relative z-10 flex min-h-0 flex-1 flex-col overflow-hidden section-soft [--customizer-width:--spacing(48)] [--gap:--spacing(4)] md:[--gap:--spacing(6)] 2xl:[--customizer-width:--spacing(56)]">
|
|
<div
|
|
data-slot="designer"
|
|
className="flex min-h-0 flex-1 flex-col gap-(--gap) p-(--gap) pt-[calc(var(--gap)*0.25)] md:flex-row-reverse"
|
|
>
|
|
<PreviewOverrideProvider>
|
|
<Preview />
|
|
<Suspense
|
|
fallback={
|
|
<Skeleton className="isolate min-h-[151px] w-full self-start rounded-2xl md:h-full md:max-h-full md:min-h-0 md:w-(--customizer-width)" />
|
|
}
|
|
>
|
|
<CustomizerLoader />
|
|
</Suspense>
|
|
</PreviewOverrideProvider>
|
|
</div>
|
|
<PresetHandler />
|
|
<WelcomeDialog />
|
|
</div>
|
|
)
|
|
}
|
|
|
|
async function CustomizerLoader() {
|
|
const itemsByBase = await getAllItems()
|
|
return <Customizer itemsByBase={itemsByBase} />
|
|
}
|