Added more info on library items
This commit is contained in:
DrMint
parent
ddc6c1b491
commit
676b73318e
@ -10,47 +10,44 @@ export type LibraryItemComponentProps = {
|
||||
export default function LibraryItemComponent(
|
||||
props: LibraryItemComponentProps
|
||||
): JSX.Element {
|
||||
const item = props.item.attributes;
|
||||
|
||||
return (
|
||||
<Link href={"/library/" + props.item.attributes.slug} passHref>
|
||||
<Link href={"/library/" + item.slug} passHref>
|
||||
<div className="cursor-pointer grid items-end relative hover:rounded-3xl [--cover-opacity:0] hover:[--cover-opacity:1] hover:scale-[1.02] transition-transform">
|
||||
<div className="bg-light absolute inset-1 rounded-lg shadow-dark shadow-xl"></div>
|
||||
{props.item.attributes.thumbnail.data ? (
|
||||
{item.thumbnail.data ? (
|
||||
<Image
|
||||
src={getAssetURL(
|
||||
props.item.attributes.thumbnail.data.attributes.url
|
||||
)}
|
||||
alt={
|
||||
props.item.attributes.thumbnail.data.attributes.alternativeText
|
||||
}
|
||||
height={props.item.attributes.thumbnail.data.attributes.height}
|
||||
width={props.item.attributes.thumbnail.data.attributes.width}
|
||||
src={getAssetURL(item.thumbnail.data.attributes.url)}
|
||||
alt={item.thumbnail.data.attributes.alternativeText}
|
||||
height={item.thumbnail.data.attributes.height}
|
||||
width={item.thumbnail.data.attributes.width}
|
||||
/>
|
||||
) : (
|
||||
<div className="w-full aspect-[21/29.7]"></div>
|
||||
)}
|
||||
<div className="linearbg-1 shadow-[0_0_1em_rgb(0,0,0,0.2)] absolute bottom-0 left-0 right-0 h-auto opacity-[var(--cover-opacity)] transition-opacity z-20 grid p-4 gap-4 text-left">
|
||||
<div>
|
||||
<h2 className="text-lg leading-7">{props.item.attributes.title}</h2>
|
||||
<h3 className="leading-3">{props.item.attributes.subtitle}</h3>
|
||||
<h2 className="text-lg leading-7">{item.title}</h2>
|
||||
<h3 className="leading-3">{item.subtitle}</h3>
|
||||
</div>
|
||||
<div className="grid grid-flow-col">
|
||||
{props.item.attributes.price ? (
|
||||
{item.price ? (
|
||||
<p className="text-sm">
|
||||
<span className="material-icons !text-base translate-y-[.15em] mr-1">
|
||||
event
|
||||
</span>
|
||||
{prettyDate(props.item.attributes.release_date)}
|
||||
{prettyDate(item.release_date)}
|
||||
</p>
|
||||
) : (
|
||||
""
|
||||
)}
|
||||
{props.item.attributes.price ? (
|
||||
{item.price ? (
|
||||
<p className="text-sm justify-self-end">
|
||||
<span className="material-icons !text-base translate-y-[.15em] mr-1">
|
||||
shopping_cart
|
||||
</span>
|
||||
{prettyPrice(props.item.attributes.price)}
|
||||
{prettyPrice(item.price)}
|
||||
</p>
|
||||
) : (
|
||||
""
|
||||
|
||||
@ -53,7 +53,7 @@ query getLibraryItemsPreview($language_code: String) {
|
||||
libraryItems(
|
||||
filters: { root_item: { eq: true } }
|
||||
pagination: { limit: -1 }
|
||||
sort: ["slug:asc"]
|
||||
sort: ["title:asc","subtitle:asc"]
|
||||
) {
|
||||
data {
|
||||
id
|
||||
|
||||
@ -2,12 +2,12 @@ import ContentPanel, {
|
||||
ContentPanelWidthSizes,
|
||||
} from "components/Panels/ContentPanel";
|
||||
import Image from "next/image";
|
||||
import Link from "next/link";
|
||||
import { GetStaticPaths, GetStaticProps } from "next";
|
||||
import { applyCustomAppProps } from "pages/_app";
|
||||
import { getLibraryItem, getLibraryItemsSlugs } from "graphql/operations";
|
||||
import { GetLibraryItemQuery } from "graphql/operations-types";
|
||||
import {
|
||||
capitalizeString,
|
||||
convertMmToInch,
|
||||
getAssetURL,
|
||||
prettyDate,
|
||||
@ -32,9 +32,9 @@ applyCustomAppProps(Library, {
|
||||
});
|
||||
|
||||
export default function Library(props: Props): JSX.Element {
|
||||
const libraryItem = props.libraryItem.libraryItems.data[0];
|
||||
const item = props.libraryItem.libraryItems.data[0].attributes;
|
||||
|
||||
libraryItem.attributes.contents.data.sort((a, b) => {
|
||||
item.contents.data.sort((a, b) => {
|
||||
if (
|
||||
a.attributes.range[0].__typename === "ComponentRangePageRange" &&
|
||||
b.attributes.range[0].__typename === "ComponentRangePageRange"
|
||||
@ -55,7 +55,7 @@ export default function Library(props: Props): JSX.Element {
|
||||
|
||||
<NavOption title="Summary" url="#summary" border={true} />
|
||||
|
||||
{libraryItem.attributes.gallery.data.length > 0 ? (
|
||||
{item.gallery.data.length > 0 ? (
|
||||
<NavOption title="Gallery" url="#gallery" border={true} />
|
||||
) : (
|
||||
""
|
||||
@ -63,13 +63,13 @@ export default function Library(props: Props): JSX.Element {
|
||||
|
||||
<NavOption title="Details" url="#details" border={true} />
|
||||
|
||||
{libraryItem.attributes.subitems.data.length > 0 ? (
|
||||
{item.subitems.data.length > 0 ? (
|
||||
<NavOption title="Subitems" url="#subitems" border={true} />
|
||||
) : (
|
||||
""
|
||||
)}
|
||||
|
||||
{libraryItem.attributes.contents.data.length > 0 ? (
|
||||
{item.contents.data.length > 0 ? (
|
||||
<NavOption title="Content" url="#content" border={true} />
|
||||
) : (
|
||||
""
|
||||
@ -79,17 +79,12 @@ export default function Library(props: Props): JSX.Element {
|
||||
<div className="grid place-items-center gap-12">
|
||||
<div className="cursor-pointer grid items-end relative hover:rounded-3xl w-96 max-w-full mb-16">
|
||||
<div className="bg-light absolute inset-1 rounded-lg shadow-dark shadow-xl"></div>
|
||||
{libraryItem.attributes.thumbnail.data ? (
|
||||
{item.thumbnail.data ? (
|
||||
<Image
|
||||
src={getAssetURL(
|
||||
libraryItem.attributes.thumbnail.data.attributes.url
|
||||
)}
|
||||
alt={
|
||||
libraryItem.attributes.thumbnail.data.attributes
|
||||
.alternativeText
|
||||
}
|
||||
width={libraryItem.attributes.thumbnail.data.attributes.width}
|
||||
height={libraryItem.attributes.thumbnail.data.attributes.height}
|
||||
src={getAssetURL(item.thumbnail.data.attributes.url)}
|
||||
alt={item.thumbnail.data.attributes.alternativeText}
|
||||
width={item.thumbnail.data.attributes.width}
|
||||
height={item.thumbnail.data.attributes.height}
|
||||
/>
|
||||
) : (
|
||||
<div className="w-full aspect-[21/29.7]"></div>
|
||||
@ -100,17 +95,16 @@ export default function Library(props: Props): JSX.Element {
|
||||
id="summary"
|
||||
className="bg-mid w-full grid place-items-center p-8 rounded-2xl"
|
||||
>
|
||||
<div className="max-w-2xl grid place-items-center gap-8">
|
||||
{libraryItem.attributes.subitem_of.data.length > 0 ? (
|
||||
<div className="w-[clamp(0px,100%,42rem)] grid place-items-center gap-8">
|
||||
{item.subitem_of.data.length > 0 ? (
|
||||
<div className="grid place-items-center">
|
||||
<p>Subitem of</p>
|
||||
<Button
|
||||
href={`/library/${libraryItem.attributes.subitem_of.data[0].attributes.slug}`}
|
||||
href={`/library/${item.subitem_of.data[0].attributes.slug}`}
|
||||
>
|
||||
{libraryItem.attributes.subitem_of.data[0].attributes.title}
|
||||
{libraryItem.attributes.subitem_of.data[0].attributes
|
||||
.subtitle
|
||||
? ` - ${libraryItem.attributes.subitem_of.data[0].attributes.subtitle}`
|
||||
{item.subitem_of.data[0].attributes.title}
|
||||
{item.subitem_of.data[0].attributes.subtitle
|
||||
? ` - ${item.subitem_of.data[0].attributes.subtitle}`
|
||||
: ""}
|
||||
</Button>
|
||||
</div>
|
||||
@ -118,28 +112,26 @@ export default function Library(props: Props): JSX.Element {
|
||||
""
|
||||
)}
|
||||
<div className="grid place-items-center">
|
||||
<h1 className="text-3xl">{libraryItem.attributes.title}</h1>
|
||||
{libraryItem.attributes.subtitle ? (
|
||||
<h2 className="text-2xl">
|
||||
{libraryItem.attributes.subtitle}
|
||||
</h2>
|
||||
<h1 className="text-3xl">{item.title}</h1>
|
||||
{item.subtitle ? (
|
||||
<h2 className="text-2xl">{item.subtitle}</h2>
|
||||
) : (
|
||||
""
|
||||
)}
|
||||
</div>
|
||||
{libraryItem.attributes.descriptions.length > 0 ? (
|
||||
<p>{libraryItem.attributes.descriptions[0].description}</p>
|
||||
{item.descriptions.length > 0 ? (
|
||||
<p>{item.descriptions[0].description}</p>
|
||||
) : (
|
||||
""
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{libraryItem.attributes.gallery.data.length > 0 ? (
|
||||
{item.gallery.data.length > 0 ? (
|
||||
<div id="gallery" className="grid place-items-center gap-8 w-full">
|
||||
<h2 className="text-2xl">Gallery</h2>
|
||||
<div className="grid w-full gap-8 items-end grid-cols-[repeat(auto-fit,_minmax(15rem,1fr))]">
|
||||
{libraryItem.attributes.gallery.data.map((galleryItem) => (
|
||||
{item.gallery.data.map((galleryItem) => (
|
||||
<div
|
||||
key={galleryItem.id}
|
||||
className="relative aspect-square hover:scale-[1.02] transition-transform cursor-pointer"
|
||||
@ -166,61 +158,131 @@ export default function Library(props: Props): JSX.Element {
|
||||
id="details"
|
||||
className="bg-mid w-full grid place-items-center p-8 rounded-2xl"
|
||||
>
|
||||
<div className="max-w-2xl grid place-items-center gap-8">
|
||||
<h2 className="text-2xl">Details</h2>
|
||||
<div className="grid grid-flow-col place-items-center gap-8">
|
||||
<div className="grid place-items-center">
|
||||
<h3>Type</h3>
|
||||
</div>
|
||||
|
||||
{libraryItem.attributes.release_date ? (
|
||||
<div className="w-[clamp(0px,100%,42rem)] grid place-items gap-8">
|
||||
<h2 className="text-2xl text-center">Details</h2>
|
||||
<div className="grid grid-flow-col w-full place-content-between">
|
||||
{item.metadata.length > 0 ? (
|
||||
<div className="grid place-items-center">
|
||||
<h3>Release date</h3>
|
||||
<p>{prettyDate(libraryItem.attributes.release_date)}</p>
|
||||
<h3 className="text-xl">Type</h3>
|
||||
<Button>
|
||||
{item.metadata[0].__typename.substring(
|
||||
"ComponentMetadata".length
|
||||
)}
|
||||
</Button>
|
||||
</div>
|
||||
) : (
|
||||
""
|
||||
)}
|
||||
|
||||
{libraryItem.attributes.release_date ? (
|
||||
{item.release_date ? (
|
||||
<div className="grid place-items-center">
|
||||
<h3>Price</h3>
|
||||
<p>{prettyPrice(libraryItem.attributes.price)}</p>
|
||||
<h3 className="text-xl">Release date</h3>
|
||||
<p>{prettyDate(item.release_date)}</p>
|
||||
</div>
|
||||
) : (
|
||||
""
|
||||
)}
|
||||
|
||||
{item.release_date ? (
|
||||
<div className="grid place-items-center">
|
||||
<h3 className="text-xl">Price</h3>
|
||||
<p>{prettyPrice(item.price)}</p>
|
||||
</div>
|
||||
) : (
|
||||
""
|
||||
)}
|
||||
</div>
|
||||
<h3>Physical size</h3>
|
||||
<div className="grid grid-flow-col place-items-center gap-8">
|
||||
<div className="grid place-items-center">
|
||||
<p className="font-bold">Width</p>
|
||||
<p>{libraryItem.attributes.size.width} mm</p>
|
||||
<p>{convertMmToInch(libraryItem.attributes.size.width)} in</p>
|
||||
</div>
|
||||
<div className="grid place-items-center">
|
||||
<p className="font-bold">Height</p>
|
||||
<p>{libraryItem.attributes.size.height} mm</p>
|
||||
<p>
|
||||
{convertMmToInch(libraryItem.attributes.size.height)} in
|
||||
</p>
|
||||
</div>
|
||||
<div className="grid place-items-center">
|
||||
<p className="font-bold">Thickness</p>
|
||||
<p>{libraryItem.attributes.size.thickness} mm</p>
|
||||
<p>
|
||||
{convertMmToInch(libraryItem.attributes.size.thickness)} in
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
{item.size ? (
|
||||
<>
|
||||
<h3 className="text-xl">Physical Size</h3>
|
||||
<div className="grid grid-flow-col w-full place-content-between">
|
||||
<div className="grid place-items-start grid-flow-col gap-4">
|
||||
<p className="font-bold">Width:</p>
|
||||
<div>
|
||||
<p>{item.size.width} mm</p>
|
||||
<p>{convertMmToInch(item.size.width)} in</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid place-items-start grid-flow-col gap-4">
|
||||
<p className="font-bold">Height:</p>
|
||||
<div>
|
||||
<p>{item.size.height} mm</p>
|
||||
<p>{convertMmToInch(item.size.height)} in</p>
|
||||
</div>
|
||||
</div>
|
||||
{item.size.thickness ? (
|
||||
<div className="grid place-items-start grid-flow-col gap-4">
|
||||
<p className="font-bold">Thickness:</p>
|
||||
<div>
|
||||
<p>{item.size.thickness} mm</p>
|
||||
<p>{convertMmToInch(item.size.thickness)} in</p>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
""
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
) : (
|
||||
""
|
||||
)}
|
||||
|
||||
{item.metadata.length > 0 ? (
|
||||
<>
|
||||
<h3 className="text-xl">Type Information</h3>
|
||||
<div className="grid grid-cols-2 w-full place-content-between">
|
||||
{item.metadata[0].__typename ===
|
||||
"ComponentMetadataBooks" ? (
|
||||
<>
|
||||
<div className="grid place-content-start grid-flow-col gap-4">
|
||||
<p className="font-bold">Type:</p>
|
||||
<Chip>
|
||||
{capitalizeString(
|
||||
item.metadata[0].subtype.data.attributes.slug
|
||||
)}
|
||||
</Chip>
|
||||
</div>
|
||||
|
||||
<div className="grid place-content-start grid-flow-col gap-4">
|
||||
<p className="font-bold">Pages:</p>
|
||||
<p>{item.metadata[0].page_count}</p>
|
||||
</div>
|
||||
|
||||
<div className="grid place-content-start grid-flow-col gap-4">
|
||||
<p className="font-bold">Binding:</p>
|
||||
<p>{item.metadata[0].binding_type}</p>
|
||||
</div>
|
||||
|
||||
<div className="grid place-content-start grid-flow-col gap-4">
|
||||
<p className="font-bold">Page order:</p>
|
||||
<p>{item.metadata[0].page_order}</p>
|
||||
</div>
|
||||
|
||||
<div className="grid place-content-start grid-flow-col gap-4">
|
||||
<p className="font-bold">Languages:</p>
|
||||
{item.metadata[0].languages.data.map((lang) => (
|
||||
<p key={lang.attributes.code}>
|
||||
{lang.attributes.name}
|
||||
</p>
|
||||
))}
|
||||
</div>
|
||||
</>
|
||||
) : (
|
||||
""
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
) : (
|
||||
""
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{libraryItem.attributes.subitems.data.length > 0 ? (
|
||||
{item.subitems.data.length > 0 ? (
|
||||
<div id="subitems" className="grid place-items-center gap-8">
|
||||
<h2 className="text-2xl">Subitems</h2>
|
||||
<div className="grid gap-8 items-end grid-cols-[repeat(auto-fit,_minmax(15rem,1fr))]">
|
||||
{libraryItem.attributes.subitems.data.map((subitem) => (
|
||||
<div className="grid gap-8 items-end grid-cols-[repeat(auto-fill,minmax(15rem,1fr))]">
|
||||
{item.subitems.data.map((subitem) => (
|
||||
<LibraryItemComponent key={subitem.id} item={subitem} />
|
||||
))}
|
||||
</div>
|
||||
@ -229,11 +291,11 @@ export default function Library(props: Props): JSX.Element {
|
||||
""
|
||||
)}
|
||||
|
||||
{libraryItem.attributes.contents.data.length > 0 ? (
|
||||
<div id="content" className="w-full grid place-items-center">
|
||||
{item.contents.data.length > 0 ? (
|
||||
<div id="content" className="w-full grid place-items-center gap-8">
|
||||
<h2 className="text-2xl">Content</h2>
|
||||
<div className="grid gap-4 w-full">
|
||||
{libraryItem.attributes.contents.data.map((content) => (
|
||||
{item.contents.data.map((content) => (
|
||||
<div
|
||||
id={content.attributes.slug}
|
||||
key={content.id}
|
||||
@ -245,10 +307,7 @@ export default function Library(props: Props): JSX.Element {
|
||||
{content.attributes.content.data
|
||||
? content.attributes.content.data.attributes
|
||||
.titles[0].title
|
||||
: prettySlug(
|
||||
content.attributes.slug,
|
||||
libraryItem.attributes.slug
|
||||
)}
|
||||
: prettySlug(content.attributes.slug, item.slug)}
|
||||
</h3>
|
||||
</a>
|
||||
<div className="grid grid-flow-col gap-1">
|
||||
|
||||
@ -30,7 +30,7 @@ export default function Library(props: Props): JSX.Element {
|
||||
</SubPanel>
|
||||
|
||||
<ContentPanel width={ContentPanelWidthSizes.large}>
|
||||
<div className="grid gap-8 items-end grid-cols-[repeat(auto-fit,_minmax(15rem,1fr))]">
|
||||
<div className="grid gap-8 items-end grid-cols-[repeat(auto-fill,_minmax(15rem,1fr))]">
|
||||
{props.libraryItems.libraryItems.data.map((item) => (
|
||||
<LibraryItemComponent key={item.id} item={item} />
|
||||
))}
|
||||
|
||||
@ -1,4 +1,7 @@
|
||||
import { GetLibraryItemsPreviewQuery } from "graphql/operations-types";
|
||||
import {
|
||||
GetLibraryItemQuery,
|
||||
GetLibraryItemsPreviewQuery,
|
||||
} from "graphql/operations-types";
|
||||
|
||||
export function getAssetURL(url: string): string {
|
||||
return process.env.NEXT_PUBLIC_URL_CMS + url;
|
||||
@ -27,10 +30,19 @@ export function prettyPrice(
|
||||
|
||||
export function prettySlug(slug: string, parentSlug?: string): string {
|
||||
if (parentSlug && slug.startsWith(parentSlug))
|
||||
slug = slug.substring(parentSlug.length + 1);
|
||||
let words = slug.split("-");
|
||||
slug = slug.substring(parentSlug.length + 1);
|
||||
return capitalizeString(slug.replace(new RegExp("-", 'g'), " "))
|
||||
return slug;
|
||||
}
|
||||
|
||||
export function capitalizeString(string:string):string {
|
||||
function capitalizeWord(word: string): string {
|
||||
return word.charAt(0).toUpperCase() + word.substring(1);
|
||||
}
|
||||
|
||||
let words = string.split(" ");
|
||||
words = words.map(
|
||||
(word) => (word = word.charAt(0).toUpperCase() + word.substring(1))
|
||||
(word) => (word = capitalizeWord(word))
|
||||
);
|
||||
return words.join(" ");
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user