diff --git a/src/components/Content/ThumbnailHeader.tsx b/src/components/Content/ThumbnailHeader.tsx index 59d11a5..89607d0 100644 --- a/src/components/Content/ThumbnailHeader.tsx +++ b/src/components/Content/ThumbnailHeader.tsx @@ -3,95 +3,88 @@ import { GetWebsiteInterfaceQuery, } from "graphql/operations-types"; import { prettyinlineTitle, prettySlug, slugify } from "queries/helpers"; -import Button from "components/Button"; import Img, { ImageQuality } from "components/Img"; import InsetBox from "components/InsetBox"; import Chip from "components/Chip"; 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"]; - }; + pre_title?: string; + title: string; + subtitle?: string; + description?: string; + type?: GetContentQuery["contents"]["data"][number]["attributes"]["type"]; + categories?: GetContentQuery["contents"]["data"][number]["attributes"]["categories"]; + thumbnail?: GetContentQuery["contents"]["data"][number]["attributes"]["thumbnail"]; langui: GetWebsiteInterfaceQuery["websiteInterfaces"]["data"][number]["attributes"]; }; export default function ThumbnailHeader( props: ThumbnailHeaderProps ): JSX.Element { - const content = props.content; - const langui = props.langui; + const { + langui, + pre_title, + title, + subtitle, + thumbnail, + type, + categories, + description, + } = props; return ( <>
- {content.thumbnail.data ? ( + {thumbnail && thumbnail.data ? ( ) : ( -
+
)}
0 - ? prettyinlineTitle( - content.titles[0].pre_title, - content.titles[0].title, - content.titles[0].subtitle - ) - : prettySlug(content.slug) + prettyinlineTitle(pre_title || "", title, subtitle || "") )} className="grid place-items-center text-center" > - {content.titles.length > 0 ? ( - <> -

{content.titles[0].pre_title}

-

{content.titles[0].title}

-

{content.titles[0].subtitle}

- - ) : ( -

{prettySlug(content.slug)}

- )} +

{pre_title}

+

{title}

+

{subtitle}

- {content.type.data && ( + {type && type.data && (

{langui.type}

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

{langui.categories}

- {content.categories.data.map((category) => ( + {categories.data.map((category) => ( {category.attributes.name} ))}
)}
- {content.titles.length > 0 && content.titles[0].description && ( - {content.titles[0].description} - )} + {description && {description}} ); }