104 lines
2.7 KiB
TypeScript
104 lines
2.7 KiB
TypeScript
import type * as React from "react"
|
|
import { Link } from "react-router-dom"
|
|
import { ArrowRight } from "lucide-react"
|
|
|
|
import { IconBadge } from "@/components/solenos/icon-tile"
|
|
import { PageBreadcrumb } from "@/components/solenos/page-breadcrumb"
|
|
import { PageHero } from "@/components/solenos/page-hero"
|
|
import { Container, Section } from "@/components/solenos/section"
|
|
|
|
/**
|
|
* Shared shell for the /wissen articles: split PageHero with the
|
|
* Startseite → Wissen → article breadcrumb, then the article's own sections.
|
|
*/
|
|
function WissenArticle({
|
|
breadcrumb,
|
|
eyebrow,
|
|
title,
|
|
tagline,
|
|
lead,
|
|
visual,
|
|
children,
|
|
}: {
|
|
/** label of the current page, appended to Startseite → Wissen */
|
|
breadcrumb: string
|
|
eyebrow?: React.ReactNode
|
|
title: React.ReactNode
|
|
/** short bold subline under the H1 (e.g. "Für den Messbetrieb gebaut.") */
|
|
tagline?: React.ReactNode
|
|
lead?: React.ReactNode
|
|
visual?: React.ReactNode
|
|
children?: React.ReactNode
|
|
}) {
|
|
return (
|
|
<>
|
|
<PageHero
|
|
breadcrumb={
|
|
<PageBreadcrumb
|
|
items={[
|
|
{ label: "Startseite", to: "/" },
|
|
{ label: "Wissen", to: "/wissen" },
|
|
{ label: breadcrumb },
|
|
]}
|
|
/>
|
|
}
|
|
eyebrow={eyebrow}
|
|
title={title}
|
|
lead={
|
|
<>
|
|
{tagline ? (
|
|
<span className="mb-2 block text-lg font-bold text-navy sm:text-xl">
|
|
{tagline}
|
|
</span>
|
|
) : null}
|
|
{lead}
|
|
</>
|
|
}
|
|
visual={visual}
|
|
/>
|
|
<Container>{children}</Container>
|
|
</>
|
|
)
|
|
}
|
|
|
|
/** Baseline link to the sibling article, closing an article out. */
|
|
function WissenRelated({
|
|
to,
|
|
title,
|
|
summary,
|
|
}: {
|
|
to: string
|
|
title: string
|
|
summary: string
|
|
}) {
|
|
return (
|
|
<Section className="pt-0 sm:pt-0 lg:pt-0">
|
|
<Link
|
|
to={to}
|
|
className="group flex items-center gap-6 rounded-3xl border border-border bg-card p-6 shadow-card transition-colors hover:border-brand-200 sm:p-8"
|
|
>
|
|
<div className="min-w-0 flex-1">
|
|
<p className="text-xs font-bold tracking-[0.14em] text-primary uppercase">
|
|
Weiterlesen
|
|
</p>
|
|
<h2 className="mt-2 text-xl font-extrabold tracking-tight text-balance text-navy">
|
|
{title}
|
|
</h2>
|
|
<p className="mt-2 text-sm leading-relaxed text-pretty text-muted-foreground">
|
|
{summary}
|
|
</p>
|
|
</div>
|
|
<IconBadge
|
|
variant="outline"
|
|
size="lg"
|
|
className="transition-transform group-hover:translate-x-0.5"
|
|
>
|
|
<ArrowRight />
|
|
</IconBadge>
|
|
</Link>
|
|
</Section>
|
|
)
|
|
}
|
|
|
|
export { WissenArticle, WissenRelated }
|