More content displayed on the library item pages

src/components/Library/LibraryItemComponent.tsx

@@ -1,6 +1,6 @@
 import Link from "next/link";
 import { GetLibraryItemsPreviewQuery } from "graphql/operations-types";
-import { getAssetURL } from "queries/helpers";
+import { getAssetURL, prettyDate, prettyPrice } from "queries/helpers";
 import Image from "next/image";
 
 export type LibraryItemComponentProps = {
@@ -10,17 +10,6 @@ export type LibraryItemComponentProps = {
 export default function LibraryItemComponent(
   props: LibraryItemComponentProps
 ): JSX.Element {
-  function prettyDate(
-    date: GetLibraryItemsPreviewQuery["libraryItems"]["data"][number]["attributes"]["release_date"]
-  ): string {
-    return (
-      date.year +
-      "/" +
-      date.month.toString().padStart(2, "0") +
-      "/" +
-      date.day.toString().padStart(2, "0")
-    );
-  }
 
   return (
     <Link href={"/library/" + props.item.attributes.slug} passHref>
@@ -31,7 +20,9 @@ export default function LibraryItemComponent(
             src={getAssetURL(
               props.item.attributes.thumbnail.data.attributes.url
             )}
-            alt={props.item.attributes.thumbnail.data.attributes.alternativeText}
+            alt={
+              props.item.attributes.thumbnail.data.attributes.alternativeText
+            }
             height={props.item.attributes.thumbnail.data.attributes.height}
             width={props.item.attributes.thumbnail.data.attributes.width}
           />
@@ -44,19 +35,22 @@ export default function LibraryItemComponent(
             <h3 className="leading-3">{props.item.attributes.subtitle}</h3>
           </div>
           <div className="grid grid-flow-col">
+            {props.item.attributes.price ? (
               <p className="text-sm">
                 <span className="material-icons !text-base translate-y-[.15em] mr-1">
                   event
                 </span>
                 {prettyDate(props.item.attributes.release_date)}
               </p>
+            ) : (
+              ""
+            )}
             {props.item.attributes.price ? (
               <p className="text-sm justify-self-end">
                 <span className="material-icons !text-base translate-y-[.15em] mr-1">
                   shopping_cart
                 </span>
-                {props.item.attributes.price.currency.data.attributes.symbol}
+                {prettyPrice(props.item.attributes.price)}
-                {props.item.attributes.price.amount}
               </p>
             ) : (
               ""

src/graphql/operation.graphql

@@ -135,6 +135,19 @@ query getLibraryItem($slug: String, $language_code: String) {
             }
           }
         }
+        gallery {
+          data {
+            id
+            attributes {
+              name
+              alternativeText
+              caption
+              width
+              height
+              url
+            }
+          }
+        }
         release_date {
           year
           month

src/graphql/operations-types.ts

@@ -231,6 +231,22 @@ export type GetLibraryItemQuery = {
             };
           };
         };
+        gallery: {
+          __typename: "UploadFileRelationResponseCollection";
+          data: Array<{
+            __typename: "UploadFileEntity";
+            id: string;
+            attributes: {
+              __typename: "UploadFile";
+              name: string;
+              alternativeText: string;
+              caption: string;
+              width: number;
+              height: number;
+              url: string;
+            };
+          }>;
+        };
         release_date: {
           __typename: "ComponentBasicsDatepicker";
           year: number;

src/graphql/schema.graphql

@@ -1762,6 +1762,7 @@ input LibraryItemInput {
   contents: [ID]
   release_date: ComponentBasicsDatepickerInput
   descriptions: [ComponentTranslationsLibraryItemsInput]
+  gallery: [ID]
 }
 
 type LibraryItem {
@@ -1795,6 +1796,11 @@ type LibraryItem {
     pagination: PaginationArg = {}
     sort: [String] = []
   ): [ComponentTranslationsLibraryItems]
+  gallery(
+    filters: UploadFileFiltersInput
+    pagination: PaginationArg = {}
+    sort: [String] = []
+  ): UploadFileRelationResponseCollection
   createdAt: DateTime
   updatedAt: DateTime
 }

src/pages/library/[slug].tsx

@@ -8,10 +8,16 @@ import { GetStaticPaths, GetStaticProps } from "next";
 import { applyCustomAppProps } from "pages/_app";
 import { getLibraryItem, getLibraryItemsSlugs } from "graphql/operations";
 import { GetLibraryItemQuery } from "graphql/operations-types";
-import { getAssetURL } from "queries/helpers";
+import {
+  convertMmToInch,
+  getAssetURL,
+  prettyDate,
+  prettyPrice,
+} from "queries/helpers";
 import SubPanel from "components/Panels/SubPanel";
 import ReturnButton from "components/PanelComponents/ReturnButton";
 import NavOption from "components/PanelComponents/NavOption";
+import LibraryItemComponent from "components/Library/LibraryItemComponent";
 
 type Props = {
   libraryItem: GetLibraryItemQuery;
@@ -63,13 +69,29 @@ export default function Library(props: Props): JSX.Element {
         <hr />
 
         <NavOption title="Summary" url="#summary" border={true} />
+
+        {libraryItem.attributes.gallery.data.length > 0 ? (
           <NavOption title="Gallery" url="#gallery" border={true} />
+        ) : (
+          ""
+        )}
+
         <NavOption title="Details" url="#details" border={true} />
+
+        {libraryItem.attributes.subitems.data.length > 0 ? (
           <NavOption title="Subitems" url="#subitems" border={true} />
+        ) : (
+          ""
+        )}
+
+        {libraryItem.attributes.contents.data.length > 0 ? (
           <NavOption title="Content" url="#content" border={true} />
+        ) : (
+          ""
+        )}
       </SubPanel>
       <ContentPanel width={ContentPanelWidthSizes.large}>
-        <div className="grid place-items-center gap-8">
+        <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 ? (
@@ -134,7 +156,25 @@ export default function Library(props: Props): JSX.Element {
             </div>
           </div>
 
-          <div id="gallery"></div>
+          {libraryItem.attributes.gallery.data.length > 0 ? (
+            <div id="gallery" className="grid place-items-center gap-8">
+              <h2 className="text-2xl">Gallery</h2>
+              <div className="grid grid-flow-col place-items-center gap-4">
+                {libraryItem.attributes.gallery.data.map((galleryItem) => (
+                  <Image
+                    key={galleryItem.id}
+                    className="rounded-lg"
+                    src={getAssetURL(galleryItem.attributes.url)}
+                    alt={galleryItem.attributes.alternativeText}
+                    width={galleryItem.attributes.width}
+                    height={galleryItem.attributes.height}
+                  />
+                ))}
+              </div>
+            </div>
+          ) : (
+            ""
+          )}
 
           <div
             id="details"
@@ -142,61 +182,95 @@ export default function Library(props: Props): JSX.Element {
           >
             <div className="max-w-2xl grid place-items-center gap-8">
               <h2 className="text-2xl">Details</h2>
-              <div className="grid grid-cols-3 place-items-center">
+              <div className="grid grid-flow-col place-items-center gap-8">
-                <p>Type</p>
+                <div className="grid place-items-center">
-                <p>Release date</p>
+                  <h3>Type</h3>
-                <p>Price</p>
-              </div>
-            </div>
                 </div>
 
-          <div id="subitems">
+                {libraryItem.attributes.release_date ? (
-            {libraryItem.attributes.subitems.data.map((subitem) => (
+                  <div className="grid place-items-center">
-              <Link
+                    <h3>Release date</h3>
-                href={`/library/${subitem.attributes.slug}`}
+                    <p>{prettyDate(libraryItem.attributes.release_date)}</p>
-                key={subitem.id}
+                  </div>
-                passHref
+                ) : (
-              >
+                  ""
-                <div>
-                  {subitem.attributes.thumbnail.data ? (
-                    <Image
-                      src={getAssetURL(
-                        subitem.attributes.thumbnail.data.attributes.url
                 )}
-                      alt={
+
-                        subitem.attributes.thumbnail.data.attributes
+                {libraryItem.attributes.release_date ? (
-                          .alternativeText
+                  <div className="grid place-items-center">
-                      }
+                    <h3>Price</h3>
-                      width={subitem.attributes.thumbnail.data.attributes.width}
+                    <p>{prettyPrice(libraryItem.attributes.price)}</p>
-                      height={
+                  </div>
-                        subitem.attributes.thumbnail.data.attributes.height
-                      }
-                    />
                 ) : (
                   ""
                 )}
               </div>
-              </Link>
+              <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>
+            </div>
+          </div>
 
-            <div id="content">
+          {libraryItem.attributes.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) => (
+                  <LibraryItemComponent key={subitem.id} item={subitem} />
+                ))}
+              </div>
+            </div>
+          ) : (
+            ""
+          )}
+
+          {libraryItem.attributes.contents.data.length > 0 ? (
+            <div id="content" className="w-full grid place-items-center">
+              <h2 className="text-2xl">Content</h2>
+              <div className="grid gap-4 w-full">
                 {libraryItem.attributes.contents.data.map((content) => (
                   <div
                     key={content.id}
-                  className="grid grid-flow-col gap-4 w-full"
+                    className="grid grid-flow-col gap-4 place-items-center grid-cols-[auto_auto_1fr_auto_auto]"
                   >
                     <h3>{content.attributes.title[0].title}</h3>
+                    <p></p>
+                    <p className="border-b-2 h-4 w-full border-dark border-dotted"></p>
                     <p>
                       {content.attributes.range[0].__typename ===
                       "ComponentRangePageRange"
                         ? content.attributes.range[0].starting_page
                         : ""}
                     </p>
+                    <button className="text-xs">
                       <p>{content.attributes.type.data.attributes.slug}</p>
+                    </button>
                   </div>
                 ))}
               </div>
             </div>
+          ) : (
+            ""
+          )}
         </div>
       </ContentPanel>
     </>

src/queries/helpers.ts

@@ -1,3 +1,29 @@
+import { GetLibraryItemsPreviewQuery } from "graphql/operations-types";
+
 export function getAssetURL(url: string): string {
   return process.env.NEXT_PUBLIC_URL_CMS + url;
 }
+
+export function prettyDate(
+  datePicker: GetLibraryItemsPreviewQuery["libraryItems"]["data"][number]["attributes"]["release_date"]
+): string {
+  return (
+    datePicker.year +
+    "/" +
+    datePicker.month.toString().padStart(2, "0") +
+    "/" +
+    datePicker.day.toString().padStart(2, "0")
+  );
+}
+
+export function prettyPrice(
+  pricePicker: GetLibraryItemsPreviewQuery["libraryItems"]["data"][number]["attributes"]["price"]
+): string {
+  return (
+    pricePicker.currency.data.attributes.symbol + pricePicker.amount.toLocaleString()
+  );
+}
+
+export function convertMmToInch(mm: number): string {
+  return (mm * 0.03937008).toPrecision(3);
+}