Accords-Library-Archive
/
accords-library.com
1
0
Fork 0
Code Issues Pull Requests 5 Packages Projects Releases Wiki Activity

ThumbnailHeaders are now more modular thus work in more situation

This commit is contained in:
DrMint 2022-03-17 17:04:50 +01:00
parent 3364a8f560
commit 1f1c17a3a8
1 changed files with 31 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

69
src/components/Content/ThumbnailHeader.tsx
View File

@ -3,95 +3,88 @@ import {
GetWebsiteInterfaceQuery, GetWebsiteInterfaceQuery,
} from "graphql/operations-types"; } from "graphql/operations-types";
import { prettyinlineTitle, prettySlug, slugify } from "queries/helpers"; import { prettyinlineTitle, prettySlug, slugify } from "queries/helpers";
import Button from "components/Button";
import Img, { ImageQuality } from "components/Img"; import Img, { ImageQuality } from "components/Img";
import InsetBox from "components/InsetBox"; import InsetBox from "components/InsetBox";
import Chip from "components/Chip"; import Chip from "components/Chip";
export type ThumbnailHeaderProps = { export type ThumbnailHeaderProps = {
content: { pre_title?: string;
slug: GetContentQuery["contents"]["data"][number]["attributes"]["slug"]; title: string;
thumbnail: GetContentQuery["contents"]["data"][number]["attributes"]["thumbnail"]; subtitle?: string;
titles: GetContentQuery["contents"]["data"][number]["attributes"]["titles"]; description?: string;
type: GetContentQuery["contents"]["data"][number]["attributes"]["type"]; type?: GetContentQuery["contents"]["data"][number]["attributes"]["type"];
categories: GetContentQuery["contents"]["data"][number]["attributes"]["categories"]; categories?: GetContentQuery["contents"]["data"][number]["attributes"]["categories"];
}; thumbnail?: GetContentQuery["contents"]["data"][number]["attributes"]["thumbnail"];
langui: GetWebsiteInterfaceQuery["websiteInterfaces"]["data"][number]["attributes"]; langui: GetWebsiteInterfaceQuery["websiteInterfaces"]["data"][number]["attributes"];
}; };
export default function ThumbnailHeader( export default function ThumbnailHeader(
props: ThumbnailHeaderProps props: ThumbnailHeaderProps
): JSX.Element { ): JSX.Element {
const content = props.content; const {
const langui = props.langui; langui,
pre_title,
title,
subtitle,
thumbnail,
type,
categories,
description,
} = props;
return ( return (
<> <>
<div className="grid place-items-center gap-12 mb-12"> <div className="grid place-items-center gap-12 mb-12">
<div className="drop-shadow-shade-lg"> <div className="drop-shadow-shade-lg">
{content.thumbnail.data ? ( {thumbnail && thumbnail.data ? (
<Img <Img
className=" rounded-xl" className=" rounded-xl"
image={content.thumbnail.data.attributes} image={thumbnail.data.attributes}
quality={ImageQuality.Medium} quality={ImageQuality.Medium}
priority priority
/> />
) : ( ) : (
<div className="w-full aspect-[4/3] bg-light rounded-xl"></div> <div className="w-96 aspect-[4/3] bg-light rounded-xl"></div>
)} )}
</div> </div>
<div <div
id={slugify( id={slugify(
content.titles.length > 0 prettyinlineTitle(pre_title || "", title, subtitle || "")
? prettyinlineTitle(
content.titles[0].pre_title,
content.titles[0].title,
content.titles[0].subtitle
)
: prettySlug(content.slug)
)} )}
className="grid place-items-center text-center" className="grid place-items-center text-center"
> >
{content.titles.length > 0 ? ( <p className="text-2xl">{pre_title}</p>
<> <h1 className="text-3xl">{title}</h1>
<p className="text-2xl">{content.titles[0].pre_title}</p> <h2 className="text-2xl">{subtitle}</h2>
<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> </div>
<div className="grid grid-flow-col gap-8"> <div className="grid grid-flow-col gap-8">
{content.type.data && ( {type && type.data && (
<div className="flex flex-col place-items-center gap-2"> <div className="flex flex-col place-items-center gap-2">
<h3 className="text-xl">{langui.type}</h3> <h3 className="text-xl">{langui.type}</h3>
<div className="flex flex-row flex-wrap"> <div className="flex flex-row flex-wrap">
<Chip> <Chip>
{content.type.data.attributes.titles.length > 0 {type.data.attributes.titles.length > 0
? content.type.data.attributes.titles[0].title ? type.data.attributes.titles[0].title
: prettySlug(content.type.data.attributes.slug)} : prettySlug(type.data.attributes.slug)}
</Chip> </Chip>
</div> </div>
</div> </div>
)} )}
{content.categories.data.length > 0 && ( {categories && categories.data.length > 0 && (
<div className="flex flex-col place-items-center gap-2"> <div className="flex flex-col place-items-center gap-2">
<h3 className="text-xl">{langui.categories}</h3> <h3 className="text-xl">{langui.categories}</h3>
<div className="flex flex-row flex-wrap place-content-center gap-2"> <div className="flex flex-row flex-wrap place-content-center gap-2">
{content.categories.data.map((category) => ( {categories.data.map((category) => (
<Chip key={category.id}>{category.attributes.name}</Chip> <Chip key={category.id}>{category.attributes.name}</Chip>
))} ))}
</div> </div>
</div> </div>
)} )}
</div> </div>
{content.titles.length > 0 && content.titles[0].description && ( {description && <InsetBox className="mt-8">{description}</InsetBox>}
<InsetBox className="mt-8">{content.titles[0].description}</InsetBox>
)}
</> </>
); );
} }