82 lines
2.8 KiB
TypeScript
82 lines
2.8 KiB
TypeScript
import {
|
|
GetContentQuery,
|
|
GetWebsiteInterfaceQuery,
|
|
} from "graphql/operations-types";
|
|
import { prettySlug } from "queries/helpers";
|
|
import Button from "components/Button";
|
|
import Img, { ImageQuality } from "components/Img";
|
|
|
|
export type ThumbnailHeaderProps = {
|
|
content: {
|
|
slug: GetContentQuery["contents"]["data"][number]["attributes"]["slug"];
|
|
thumbnail: GetContentQuery["contents"]["data"][number]["attributes"]["thumbnail"];
|
|
titles: GetContentQuery["contents"]["data"][number]["attributes"]["titles"];
|
|
type: GetContentQuery["contents"]["data"][number]["attributes"]["type"];
|
|
categories: GetContentQuery["contents"]["data"][number]["attributes"]["categories"];
|
|
};
|
|
langui: GetWebsiteInterfaceQuery["websiteInterfaces"]["data"][number]["attributes"];
|
|
};
|
|
|
|
export default function ThumbnailHeader(
|
|
props: ThumbnailHeaderProps
|
|
): JSX.Element {
|
|
const content = props.content;
|
|
const langui = props.langui;
|
|
|
|
return (
|
|
<>
|
|
<div className="grid place-items-center gap-12 mb-12">
|
|
<div className="drop-shadow-dark-lg">
|
|
{content.thumbnail.data ? (
|
|
<Img
|
|
className=" rounded-xl"
|
|
image={content.thumbnail.data.attributes}
|
|
quality={ImageQuality.Medium}
|
|
priority
|
|
/>
|
|
) : (
|
|
<div className="w-full aspect-[4/3] bg-light rounded-xl"></div>
|
|
)}
|
|
</div>
|
|
<div className="grid place-items-center text-center">
|
|
{content.titles.length > 0 ? (
|
|
<>
|
|
<p className="text-2xl">{content.titles[0].pre_title}</p>
|
|
<h1 className="text-3xl">{content.titles[0].title}</h1>
|
|
<h2 className="text-2xl">{content.titles[0].subtitle}</h2>
|
|
</>
|
|
) : (
|
|
<h1 className="text-3xl">{prettySlug(content.slug)}</h1>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="grid grid-flow-col gap-8">
|
|
{content.type ? (
|
|
<div className="grid place-items-center place-content-start gap-2">
|
|
<h3 className="text-xl">{langui.global_type}</h3>
|
|
<Button>
|
|
{content.type.data.attributes.titles.length > 0
|
|
? content.type.data.attributes.titles[0].title
|
|
: prettySlug(content.type.data.attributes.slug)}
|
|
</Button>
|
|
</div>
|
|
) : (
|
|
""
|
|
)}
|
|
|
|
{content.categories.data.length > 0 ? (
|
|
<div className="grid place-items-center place-content-start gap-2">
|
|
<h3 className="text-xl">{langui.global_categories}</h3>
|
|
{content.categories.data.map((category) => (
|
|
<Button key={category.id}>{category.attributes.name}</Button>
|
|
))}
|
|
</div>
|
|
) : (
|
|
""
|
|
)}
|
|
</div>
|
|
</>
|
|
);
|
|
}
|