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

Browse Source
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,
} 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 (
<>
<div className="grid place-items-center gap-12 mb-12">
<div className="drop-shadow-shade-lg">
{content.thumbnail.data ? (
{thumbnail && thumbnail.data ? (
<Img
className=" rounded-xl"
image={content.thumbnail.data.attributes}
image={thumbnail.data.attributes}
quality={ImageQuality.Medium}
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
id={slugify(
content.titles.length > 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 ? (
<>
<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>
)}
<p className="text-2xl">{pre_title}</p>
<h1 className="text-3xl">{title}</h1>
<h2 className="text-2xl">{subtitle}</h2>
</div>
</div>
<div className="grid grid-flow-col gap-8">
{content.type.data && (
{type && type.data && (
<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>
{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)}
</Chip>
</div>
</div>
)}
{content.categories.data.length > 0 && (
{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">
{content.categories.data.map((category) => (
{categories.data.map((category) => (
<Chip key={category.id}>{category.attributes.name}</Chip>
))}
</div>
</div>
)}
</div>
{content.titles.length > 0 && content.titles[0].description && (
<InsetBox className="mt-8">{content.titles[0].description}</InsetBox>
)}
{description && <InsetBox className="mt-8">{description}</InsetBox>}
</>
);
}