import Chip from "components/Chip"; import Img, { ImageQuality } from "components/Img"; import InsetBox from "components/InsetBox"; import { GetContentQuery, UploadImageFragment } from "graphql/generated"; import { AppStaticProps } from "queries/getAppStaticProps"; import { prettyinlineTitle, prettySlug, slugify } from "queries/helpers"; 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"]; } export default function ThumbnailHeader(props: Props): JSX.Element { const { langui, pre_title, title, subtitle, thumbnail, type, categories, description, } = props; return ( <>
{thumbnail ? ( ) : (
)}

{pre_title}

{title}

{subtitle}

{type?.data?.attributes && (

{langui.type}

{type.data.attributes.titles && type.data.attributes.titles.length > 0 ? type.data.attributes.titles[0]?.title : prettySlug(type.data.attributes.slug)}
)} {categories && categories.data.length > 0 && (

{langui.categories}

{categories.data.map((category) => ( {category.attributes?.name} ))}
)}
{description && {description}} ); }