109 lines
3.4 KiB
TypeScript
109 lines
3.4 KiB
TypeScript
import Chip from "components/Chip";
|
|
import Img from "components/Img";
|
|
import InsetBox from "components/InsetBox";
|
|
import Markdawn from "components/Markdown/Markdawn";
|
|
import { GetContentQuery, UploadImageFragment } from "graphql/generated";
|
|
import { AppStaticProps } from "graphql/getAppStaticProps";
|
|
import { prettyinlineTitle, prettySlug, slugify } from "helpers/formatters";
|
|
import { ImageQuality } from "helpers/img";
|
|
import { Immutable } from "helpers/types";
|
|
|
|
interface Props {
|
|
pre_title?: string | null | undefined;
|
|
title: string | null | undefined;
|
|
subtitle?: string | null | undefined;
|
|
description?: string | null | undefined;
|
|
type?: Exclude<
|
|
Exclude<
|
|
GetContentQuery["contents"],
|
|
null | undefined
|
|
>["data"][number]["attributes"],
|
|
null | undefined
|
|
>["type"];
|
|
categories?: Exclude<
|
|
Exclude<
|
|
GetContentQuery["contents"],
|
|
null | undefined
|
|
>["data"][number]["attributes"],
|
|
null | undefined
|
|
>["categories"];
|
|
thumbnail?: UploadImageFragment | null | undefined;
|
|
langui: AppStaticProps["langui"];
|
|
languageSwitcher?: JSX.Element;
|
|
}
|
|
|
|
export default function ThumbnailHeader(props: Immutable<Props>): JSX.Element {
|
|
const {
|
|
langui,
|
|
pre_title,
|
|
title,
|
|
subtitle,
|
|
thumbnail,
|
|
type,
|
|
categories,
|
|
description,
|
|
languageSwitcher,
|
|
} = props;
|
|
|
|
return (
|
|
<>
|
|
<div className="grid place-items-center gap-12 mb-12">
|
|
<div className="drop-shadow-shade-lg">
|
|
{thumbnail ? (
|
|
<Img
|
|
className=" rounded-xl"
|
|
image={thumbnail}
|
|
quality={ImageQuality.Medium}
|
|
/>
|
|
) : (
|
|
<div className="w-96 aspect-[4/3] bg-light rounded-xl"></div>
|
|
)}
|
|
</div>
|
|
<div
|
|
id={slugify(
|
|
prettyinlineTitle(pre_title ?? "", title, subtitle ?? "")
|
|
)}
|
|
className="grid place-items-center text-center"
|
|
>
|
|
<p className="text-2xl">{pre_title}</p>
|
|
<h1 className="text-3xl">{title}</h1>
|
|
<h2 className="text-2xl">{subtitle}</h2>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex place-content-center flex-row flew-wrap gap-8">
|
|
{type?.data?.attributes && (
|
|
<div className="flex flex-col place-items-center gap-2">
|
|
<h3 className="text-xl">{langui.type}</h3>
|
|
<div className="flex flex-row flex-wrap">
|
|
<Chip>
|
|
{type.data.attributes.titles &&
|
|
type.data.attributes.titles.length > 0
|
|
? type.data.attributes.titles[0]?.title
|
|
: prettySlug(type.data.attributes.slug)}
|
|
</Chip>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{categories && categories.data.length > 0 && (
|
|
<div className="flex flex-col place-items-center gap-2">
|
|
<h3 className="text-xl">{langui.categories}</h3>
|
|
<div className="flex flex-row flex-wrap place-content-center gap-2">
|
|
{categories.data.map((category) => (
|
|
<Chip key={category.id}>{category.attributes?.name}</Chip>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)}
|
|
{languageSwitcher}
|
|
</div>
|
|
{description && (
|
|
<InsetBox className="mt-8">
|
|
{<Markdawn text={description}></Markdawn>}
|
|
</InsetBox>
|
|
)}
|
|
</>
|
|
);
|
|
}
|