111 lines
3 KiB
TypeScript
111 lines
3 KiB
TypeScript
import type { ReactNode } from "react"
|
|
import Link from "next/link"
|
|
import { Button } from "@/components/ui/button"
|
|
import { Breadcrumbs, type BreadcrumbItem } from "@/components/breadcrumbs"
|
|
import {
|
|
PublicInset,
|
|
PublicPageHeader,
|
|
PublicSurface,
|
|
} from "@/components/public-surface"
|
|
import { cn } from "@/lib/utils"
|
|
|
|
type ShellAction = {
|
|
label: string
|
|
href: string
|
|
variant?: "default" | "outline"
|
|
}
|
|
|
|
interface DropdownPageShellProps {
|
|
breadcrumbs: BreadcrumbItem[]
|
|
eyebrow?: string
|
|
title: string
|
|
description?: string
|
|
headerContent?: ReactNode
|
|
content: ReactNode
|
|
contentClassName?: string
|
|
contentSurfaceClassName?: string
|
|
sections?: ReactNode
|
|
cta?: {
|
|
eyebrow?: string
|
|
title: string
|
|
description: string
|
|
actions: ShellAction[]
|
|
note?: ReactNode
|
|
}
|
|
className?: string
|
|
}
|
|
|
|
export function DropdownPageShell({
|
|
breadcrumbs,
|
|
eyebrow,
|
|
title,
|
|
description,
|
|
headerContent,
|
|
content,
|
|
contentClassName,
|
|
contentSurfaceClassName,
|
|
sections,
|
|
cta,
|
|
className,
|
|
}: DropdownPageShellProps) {
|
|
return (
|
|
<div className={cn("public-page", className)}>
|
|
<Breadcrumbs className="mb-6" items={breadcrumbs} />
|
|
|
|
<PublicPageHeader
|
|
align="center"
|
|
eyebrow={eyebrow}
|
|
title={title}
|
|
description={description}
|
|
>
|
|
{headerContent}
|
|
</PublicPageHeader>
|
|
|
|
<section className="mt-10">
|
|
<PublicSurface
|
|
className={cn("overflow-hidden", contentSurfaceClassName)}
|
|
>
|
|
<div className={cn("max-w-none", contentClassName)}>{content}</div>
|
|
</PublicSurface>
|
|
</section>
|
|
|
|
{sections ? <div className="mt-12 space-y-12">{sections}</div> : null}
|
|
|
|
{cta ? (
|
|
<section className="mt-12">
|
|
<PublicSurface className="text-center">
|
|
{cta.eyebrow ? (
|
|
<p className="text-xs font-semibold uppercase tracking-[0.2em] text-primary/80">
|
|
{cta.eyebrow}
|
|
</p>
|
|
) : null}
|
|
<h2 className="mt-3 text-3xl font-semibold tracking-tight text-balance">
|
|
{cta.title}
|
|
</h2>
|
|
<p className="mx-auto mt-4 max-w-2xl text-base leading-7 text-muted-foreground md:text-lg md:leading-8">
|
|
{cta.description}
|
|
</p>
|
|
<div className="mt-6 flex flex-col justify-center gap-3 sm:flex-row">
|
|
{cta.actions.map((action) => (
|
|
<Button
|
|
key={`${action.href}-${action.label}`}
|
|
asChild
|
|
size="lg"
|
|
variant={action.variant ?? "default"}
|
|
className="min-h-11 rounded-full px-6"
|
|
>
|
|
<Link href={action.href}>{action.label}</Link>
|
|
</Button>
|
|
))}
|
|
</div>
|
|
{cta.note ? (
|
|
<PublicInset className="mx-auto mt-6 max-w-2xl text-left sm:text-center">
|
|
{cta.note}
|
|
</PublicInset>
|
|
) : null}
|
|
</PublicSurface>
|
|
</section>
|
|
) : null}
|
|
</div>
|
|
)
|
|
}
|