Added more details in the item pages

src/components/Library/LibraryItemComponent.tsx

@@ -1,6 +1,7 @@
 import Link from "next/link";
 import { GetLibraryItemsPreviewQuery } from "graphql/operations-types";
 import { getAssetURL } from "queries/helpers";
+import Image from "next/image";
 
 export type LibraryItemComponentProps = {
   item: GetLibraryItemsPreviewQuery["libraryItems"]["data"][number];
@@ -26,16 +27,18 @@ export default function LibraryItemComponent(
       <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 ? (
-          <img
+          <Image
-            className="z-10"
             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}
           />
         ) : (
           <div className="w-full aspect-[21/29.7]"></div>
         )}
-        <div className="[background:linear-gradient(to_right,_#f0d1b3,_#ffedd8_3%,_#ffedd8_97%,_#f0d1b3)] 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 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>

src/components/PanelComponents/PanelHeader.tsx

@@ -4,7 +4,7 @@ type NavOptionProps = {
   description?: string;
 };
 
-export default function NavOption(props: NavOptionProps): JSX.Element {
+export default function PanelHeader(props: NavOptionProps): JSX.Element {
   return (
     <div className="w-full grid place-items-center">
       {props.icon ? (

src/graphql/operation.graphql

@@ -102,37 +102,19 @@ query getLibraryItemsPreview($language_code: String) {
   }
 }
 
-query getLibraryItemsSkeleton {
+query getLibraryItemsSlugs {
-  libraryItems(filters: { root_item: { eq: true } }) {
+  libraryItems(
+    pagination: { limit: -1 }
+  ) {
     data {
       attributes {
         slug
-        subitems {
-          data {
-            attributes {
-              slug
-              subitems {
-                data {
-                  attributes {
-                    slug
-                    subitems {
-                      data {
-                        attributes {
-                          slug
-                        }
-                      }
-                    }
-                  }
-                }
-              }
-            }
-          }
-        }
       }
     }
   }
 }
 
+
 query getLibraryItem($slug: String, $language_code: String) {
   libraryItems(filters: { slug: { eq: $slug } }) {
     data {
@@ -177,6 +159,100 @@ query getLibraryItem($slug: String, $language_code: String) {
         descriptions(filters: { language: { code: { eq: $language_code } } }) {
           description
         }
+        metadata {
+          __typename
+          ... on ComponentMetadataBooks {
+            subtype {
+              data {
+                attributes {
+                  slug
+                }
+              }
+            }
+            binding_type
+            page_count
+            page_order
+            languages {
+              data {
+                attributes {
+                  code
+                  name
+                }
+              }
+            }
+          }
+          ... on ComponentMetadataVideo {
+            resolution
+            audio_languages {
+              data {
+                attributes {
+                  code
+                  name
+                }
+              }
+            }
+          }
+          ... on ComponentMetadataGame {
+            platform {
+              data {
+                attributes {
+                  short
+                }
+              }
+            }
+            audio_languages {
+              data {
+                attributes {
+                  code
+                  name
+                }
+              }
+            }
+            sub_languages {
+              data {
+                attributes {
+                  code
+                  name
+                }
+              }
+            }
+            interface_languages {
+              data {
+                attributes {
+                  code
+                  name
+                }
+              }
+            }
+          }
+          ... on ComponentMetadataAudio {
+            subtype {
+              data {
+                attributes {
+                  slug
+                }
+              }
+            }
+            languages {
+              data {
+                attributes {
+                  code
+                  name
+                }
+              }
+            }
+          }
+        }
+        subitem_of {
+          data {
+            id
+            attributes {
+              title
+              subtitle
+              slug
+            }
+          }
+        }
         subitems {
           data {
             id
@@ -199,6 +275,43 @@ query getLibraryItem($slug: String, $language_code: String) {
             }
           }
         }
+        contents {
+          data {
+            id
+            attributes {
+              slug
+              title(filters: { language: { code: { eq: $language_code } } }) {
+                title
+              }
+              type {
+                data {
+                  attributes {
+                    slug
+                  }
+                }
+              }
+              categories {
+                data {
+                  attributes {
+                    name
+                    short
+                  }
+                }
+              }
+              range {
+                __typename
+                ... on ComponentRangePageRange {
+                  starting_page
+                  ending_page
+                }
+                ... on ComponentRangeTimeRange {
+                  starting_time
+                  ending_time
+                }
+              }
+            }
+          }
+        }
       }
     }
   }

src/graphql/operations-types.ts

@@ -32,6 +32,23 @@ export type Scalars = {
     - Removed | undefined
 */
 
+export enum Enum_Componentmetadatabooks_Binding_Type {
+  Paperback = "Paperback",
+  Hardcover = "Hardcover",
+}
+
+export enum Enum_Componentmetadatabooks_Page_Order {
+  LeftToRight = "Left_to_Right",
+  RightToLeft = "Right_to_Left",
+}
+
+export enum Enum_Componentmetadatavideo_Resolution {
+  Sd_480p = "SD_480p",
+  Hd_720p = "HD_720p",
+  FullHd_1080p = "FullHD_1080p",
+  QuadHd_2160p = "QuadHD_2160p",
+}
+
 export type GetErasQueryVariables = Exact<{
   language_code: InputMaybe<Scalars["String"]>;
 }>;
@@ -167,50 +184,17 @@ export type GetLibraryItemsPreviewQuery = {
   };
 };
 
-export type GetLibraryItemsSkeletonQueryVariables = Exact<{
+export type GetLibraryItemsSlugsQueryVariables = Exact<{
   [key: string]: never;
 }>;
 
-export type GetLibraryItemsSkeletonQuery = {
+export type GetLibraryItemsSlugsQuery = {
   __typename: "Query";
   libraryItems: {
     __typename: "LibraryItemEntityResponseCollection";
     data: Array<{
       __typename: "LibraryItemEntity";
-      attributes: {
+      attributes: { __typename: "LibraryItem"; slug: string };
-        __typename: "LibraryItem";
-        slug: string;
-        subitems: {
-          __typename: "LibraryItemRelationResponseCollection";
-          data: Array<{
-            __typename: "LibraryItemEntity";
-            attributes: {
-              __typename: "LibraryItem";
-              slug: string;
-              subitems: {
-                __typename: "LibraryItemRelationResponseCollection";
-                data: Array<{
-                  __typename: "LibraryItemEntity";
-                  attributes: {
-                    __typename: "LibraryItem";
-                    slug: string;
-                    subitems: {
-                      __typename: "LibraryItemRelationResponseCollection";
-                      data: Array<{
-                        __typename: "LibraryItemEntity";
-                        attributes: {
-                          __typename: "LibraryItem";
-                          slug: string;
-                        };
-                      }>;
-                    };
-                  };
-                }>;
-              };
-            };
-          }>;
-        };
-      };
     }>;
   };
 };
@@ -278,6 +262,134 @@ export type GetLibraryItemQuery = {
           __typename: "ComponentTranslationsLibraryItems";
           description: string;
         }>;
+        metadata: Array<
+          | {
+              __typename: "ComponentMetadataBooks";
+              binding_type: Enum_Componentmetadatabooks_Binding_Type;
+              page_count: number;
+              page_order: Enum_Componentmetadatabooks_Page_Order;
+              subtype: {
+                __typename: "TextualSubtypeEntityResponse";
+                data: {
+                  __typename: "TextualSubtypeEntity";
+                  attributes: {
+                    __typename: "TextualSubtype";
+                    slug: string;
+                  };
+                };
+              };
+              languages: {
+                __typename: "LanguageRelationResponseCollection";
+                data: Array<{
+                  __typename: "LanguageEntity";
+                  attributes: {
+                    __typename: "Language";
+                    code: string;
+                    name: string;
+                  };
+                }>;
+              };
+            }
+          | {
+              __typename: "ComponentMetadataVideo";
+              resolution: Enum_Componentmetadatavideo_Resolution;
+              audio_languages: {
+                __typename: "LanguageRelationResponseCollection";
+                data: Array<{
+                  __typename: "LanguageEntity";
+                  attributes: {
+                    __typename: "Language";
+                    code: string;
+                    name: string;
+                  };
+                }>;
+              };
+            }
+          | {
+              __typename: "ComponentMetadataGame";
+              platform: {
+                __typename: "GamePlatformEntityResponse";
+                data: {
+                  __typename: "GamePlatformEntity";
+                  attributes: {
+                    __typename: "GamePlatform";
+                    short: string;
+                  };
+                };
+              };
+              audio_languages: {
+                __typename: "LanguageRelationResponseCollection";
+                data: Array<{
+                  __typename: "LanguageEntity";
+                  attributes: {
+                    __typename: "Language";
+                    code: string;
+                    name: string;
+                  };
+                }>;
+              };
+              sub_languages: {
+                __typename: "LanguageRelationResponseCollection";
+                data: Array<{
+                  __typename: "LanguageEntity";
+                  attributes: {
+                    __typename: "Language";
+                    code: string;
+                    name: string;
+                  };
+                }>;
+              };
+              interface_languages: {
+                __typename: "LanguageRelationResponseCollection";
+                data: Array<{
+                  __typename: "LanguageEntity";
+                  attributes: {
+                    __typename: "Language";
+                    code: string;
+                    name: string;
+                  };
+                }>;
+              };
+            }
+          | {
+              __typename: "ComponentMetadataAudio";
+              subtype: {
+                __typename: "AudioSubtypeEntityResponse";
+                data: {
+                  __typename: "AudioSubtypeEntity";
+                  attributes: {
+                    __typename: "AudioSubtype";
+                    slug: string;
+                  };
+                };
+              };
+              languages: {
+                __typename: "LanguageRelationResponseCollection";
+                data: Array<{
+                  __typename: "LanguageEntity";
+                  attributes: {
+                    __typename: "Language";
+                    code: string;
+                    name: string;
+                  };
+                }>;
+              };
+            }
+          | { __typename: "Error" }
+        >;
+        subitem_of: {
+          __typename: "LibraryItemRelationResponseCollection";
+          data: Array<{
+            __typename: "LibraryItemEntity";
+            id: string;
+            attributes: {
+              __typename: "LibraryItem";
+              title: string;
+              subtitle: string;
+              slug: string;
+            };
+          }>;
+        };
         subitems: {
           __typename: "LibraryItemRelationResponseCollection";
           data: Array<{
@@ -306,6 +418,57 @@ export type GetLibraryItemQuery = {
             };
           }>;
         };
+        contents: {
+          __typename: "LibraryContentRelationResponseCollection";
+          data: Array<{
+            __typename: "LibraryContentEntity";
+            id: string;
+            attributes: {
+              __typename: "LibraryContent";
+              slug: string;
+              title: Array<{
+                __typename: "ComponentTranslationsLibraryContent";
+                title: string;
+              }>;
+              type: {
+                __typename: "ContentTypeEntityResponse";
+                data: {
+                  __typename: "ContentTypeEntity";
+                  attributes: {
+                    __typename: "ContentType";
+                    slug: string;
+                  };
+                };
+              };
+              categories: {
+                __typename: "CategoryRelationResponseCollection";
+                data: Array<{
+                  __typename: "CategoryEntity";
+                  attributes: {
+                    __typename: "Category";
+                    name: string;
+                    short: string;
+                  };
+                }>;
+              };
+              range: Array<
+                | {
+                    __typename: "ComponentRangePageRange";
+                    starting_page: number;
+                    ending_page: number;
+                  }
+                | {
+                    __typename: "ComponentRangeTimeRange";
+                    starting_time: any;
+                    ending_time: any;
+                  }
+                | { __typename: "ComponentRangeGameAspect" }
+                | { __typename: "ComponentRangeOther" }
+                | { __typename: "Error" }
+              >;
+            };
+          }>;
+        };
       };
     }>;
   };

src/graphql/operations.ts

@@ -1,3 +1,5 @@
+import { readFileSync } from "fs";
+
 import {
   GetChronologyItemsQuery,
   GetChronologyItemsQueryVariables,
@@ -7,8 +9,8 @@ import {
   GetLibraryItemQueryVariables,
   GetLibraryItemsPreviewQuery,
   GetLibraryItemsPreviewQueryVariables,
-  GetLibraryItemsSkeletonQuery,
+  GetLibraryItemsSlugsQuery,
-  GetLibraryItemsSkeletonQueryVariables,
+  GetLibraryItemsSlugsQueryVariables,
 } from "graphql/operations-types";
 
 const graphQL = async (query: string, variables?: string) => {
@@ -27,11 +29,7 @@ const graphQL = async (query: string, variables?: string) => {
 };
 
 function getQueryFromOperations(queryName: string): string {
-  const fs = require("fs");
+  const operations = readFileSync("./src/graphql/operation.graphql", "utf8");
-  const operations: string = fs.readFileSync(
-    "./src/graphql/operation.graphql",
-    "utf8"
-  );
   let startingIndex = -1;
   let endingIndex = -1;
   const lines = operations.split("\n");
@@ -67,10 +65,10 @@ export async function getLibraryItemsPreview(
   return await graphQL(query, JSON.stringify(variables));
 }
 
-export async function getLibraryItemsSkeleton(
+export async function getLibraryItemsSlugs(
-  variables: GetLibraryItemsSkeletonQueryVariables
+  variables: GetLibraryItemsSlugsQueryVariables
-): Promise<GetLibraryItemsSkeletonQuery> {
+): Promise<GetLibraryItemsSlugsQuery> {
-  const query = getQueryFromOperations("getLibraryItemsSkeleton");
+  const query = getQueryFromOperations("getLibraryItemsSlugs");
   return await graphQL(query, JSON.stringify(variables));
 }
 
@@ -80,4 +78,3 @@ export async function getLibraryItem(
   const query = getQueryFromOperations("getLibraryItem");
   return await graphQL(query, JSON.stringify(variables));
 }
-

src/graphql/schema.graphql

@@ -379,16 +379,26 @@ type ComponentMetadataAudio {
   subtype: AudioSubtypeEntityResponse
 }
 
+enum ENUM_COMPONENTMETADATABOOKS_BINDING_TYPE {
+  Paperback
+  Hardcover
+}
+
+enum ENUM_COMPONENTMETADATABOOKS_PAGE_ORDER {
+  Left_to_Right
+  Right_to_Left
+}
+
 type ComponentMetadataBooks {
   id: ID!
-  binding_type: String
+  binding_type: ENUM_COMPONENTMETADATABOOKS_BINDING_TYPE
   page_count: Int
   languages(
     filters: LanguageFiltersInput
     pagination: PaginationArg = {}
     sort: [String] = []
   ): LanguageRelationResponseCollection
-  page_order: String!
+  page_order: ENUM_COMPONENTMETADATABOOKS_PAGE_ORDER!
   subtype: TextualSubtypeEntityResponse
 }
 
@@ -413,9 +423,16 @@ type ComponentMetadataGame {
   ): LanguageRelationResponseCollection
 }
 
+enum ENUM_COMPONENTMETADATAVIDEO_RESOLUTION {
+  SD_480p
+  HD_720p
+  FullHD_1080p
+  QuadHD_2160p
+}
+
 type ComponentMetadataVideo {
   id: ID!
-  resolution: String
+  resolution: ENUM_COMPONENTMETADATAVIDEO_RESOLUTION
   audio_languages(
     filters: LanguageFiltersInput
     pagination: PaginationArg = {}
@@ -516,6 +533,13 @@ type ComponentSourceUrlSource {
   credits: ComponentBasicsCredits!
 }
 
+enum ENUM_COMPONENTTRANSLATIONSAUDIOSETS_STATUS {
+  Incomplete
+  Draft
+  Review
+  Done
+}
+
 input ComponentTranslationsAudioSetsFiltersInput {
   language: LanguageFiltersInput
   status: StringFilterInput
@@ -528,7 +552,7 @@ input ComponentTranslationsAudioSetsInput {
   id: ID
   language: ID
   audiofile: ID
-  status: String
+  status: ENUM_COMPONENTTRANSLATIONSAUDIOSETS_STATUS
   credits: ComponentBasicsCreditsInput
 }
 
@@ -536,7 +560,7 @@ type ComponentTranslationsAudioSets {
   id: ID!
   language: LanguageEntityResponse
   audiofile: UploadFileEntityResponse!
-  status: String!
+  status: ENUM_COMPONENTTRANSLATIONSAUDIOSETS_STATUS!
   credits: ComponentBasicsCredits!
 }
 
@@ -560,6 +584,13 @@ type ComponentTranslationsChronologyEra {
   language: LanguageEntityResponse
 }
 
+enum ENUM_COMPONENTTRANSLATIONSCHRONOLOGYITEM_STATUS {
+  Incomplete
+  Draft
+  Review
+  Done
+}
+
 input ComponentTranslationsChronologyItemFiltersInput {
   language: LanguageFiltersInput
   title: StringFilterInput
@@ -577,7 +608,7 @@ input ComponentTranslationsChronologyItemInput {
   title: String
   description: String
   note: String
-  status: String
+  status: ENUM_COMPONENTTRANSLATIONSCHRONOLOGYITEM_STATUS
 }
 
 type ComponentTranslationsChronologyItem {
@@ -586,7 +617,14 @@ type ComponentTranslationsChronologyItem {
   title: String
   description: String
   note: String
-  status: String!
+  status: ENUM_COMPONENTTRANSLATIONSCHRONOLOGYITEM_STATUS!
+}
+
+enum ENUM_COMPONENTTRANSLATIONSGLOSSARYDEFINITION_STATUS {
+  Incomplete
+  Draft
+  Review
+  Done
 }
 
 input ComponentTranslationsGlossaryDefinitionFiltersInput {
@@ -602,14 +640,14 @@ input ComponentTranslationsGlossaryDefinitionInput {
   id: ID
   definition: String
   language: ID
-  status: String
+  status: ENUM_COMPONENTTRANSLATIONSGLOSSARYDEFINITION_STATUS
 }
 
 type ComponentTranslationsGlossaryDefinition {
   id: ID!
   definition: String
   language: LanguageEntityResponse
-  status: String!
+  status: ENUM_COMPONENTTRANSLATIONSGLOSSARYDEFINITION_STATUS!
 }
 
 input ComponentTranslationsGlossaryItemFiltersInput {
@@ -672,6 +710,13 @@ type ComponentTranslationsLibraryItems {
   language: LanguageEntityResponse
 }
 
+enum ENUM_COMPONENTTRANSLATIONSPOSTS_STATUS {
+  Incomplete
+  Draft
+  Review
+  Done
+}
+
 input ComponentTranslationsPostsFiltersInput {
   Status: StringFilterInput
   title: StringFilterInput
@@ -683,7 +728,7 @@ input ComponentTranslationsPostsFiltersInput {
 
 input ComponentTranslationsPostsInput {
   id: ID
-  Status: String
+  Status: ENUM_COMPONENTTRANSLATIONSPOSTS_STATUS
   title: String
   excerpt: String
   thumbnail: ID
@@ -691,12 +736,19 @@ input ComponentTranslationsPostsInput {
 
 type ComponentTranslationsPosts {
   id: ID!
-  Status: String!
+  Status: ENUM_COMPONENTTRANSLATIONSPOSTS_STATUS!
   title: String!
   excerpt: String
   thumbnail: UploadFileEntityResponse
 }
 
+enum ENUM_COMPONENTTRANSLATIONSSCANSET_STATUS {
+  Incomplete
+  Draft
+  Review
+  Done
+}
+
 input ComponentTranslationsScanSetFiltersInput {
   language: LanguageFiltersInput
   status: StringFilterInput
@@ -709,7 +761,7 @@ input ComponentTranslationsScanSetInput {
   id: ID
   language: ID
   pages: [ID]
-  status: String
+  status: ENUM_COMPONENTTRANSLATIONSSCANSET_STATUS
   credits: ComponentBasicsCreditsInput
 }
 
@@ -721,10 +773,17 @@ type ComponentTranslationsScanSet {
     pagination: PaginationArg = {}
     sort: [String] = []
   ): UploadFileRelationResponseCollection!
-  status: String!
+  status: ENUM_COMPONENTTRANSLATIONSSCANSET_STATUS!
   credits: ComponentBasicsCredits!
 }
 
+enum ENUM_COMPONENTTRANSLATIONSTEXTSET_STATUS {
+  Incomplete
+  Draft
+  Review
+  Done
+}
+
 input ComponentTranslationsTextSetFiltersInput {
   text: StringFilterInput
   language: LanguageFiltersInput
@@ -738,7 +797,7 @@ input ComponentTranslationsTextSetInput {
   id: ID
   text: String
   language: ID
-  status: String
+  status: ENUM_COMPONENTTRANSLATIONSTEXTSET_STATUS
   credits: ComponentBasicsCreditsInput
 }
 
@@ -746,10 +805,17 @@ type ComponentTranslationsTextSet {
   id: ID!
   text: String
   language: LanguageEntityResponse
-  status: String!
+  status: ENUM_COMPONENTTRANSLATIONSTEXTSET_STATUS!
   credits: ComponentBasicsCredits!
 }
 
+enum ENUM_COMPONENTTRANSLATIONSVIDEOSETS_STATUS {
+  Incomplete
+  Draft
+  Review
+  Done
+}
+
 input ComponentTranslationsVideoSetsFiltersInput {
   language: LanguageFiltersInput
   video_url: StringFilterInput
@@ -766,7 +832,7 @@ input ComponentTranslationsVideoSetsInput {
   video_url: String
   video_embed: String
   subfile: ID
-  status: String
+  status: ENUM_COMPONENTTRANSLATIONSVIDEOSETS_STATUS
   credits: ComponentBasicsCreditsInput
 }
 
@@ -776,10 +842,17 @@ type ComponentTranslationsVideoSets {
   video_url: String!
   video_embed: String
   subfile: UploadFileEntityResponse
-  status: String!
+  status: ENUM_COMPONENTTRANSLATIONSVIDEOSETS_STATUS!
   credits: ComponentBasicsCredits!
 }
 
+enum ENUM_COMPONENTTRANSLATIONSWEAPONSTORYSTORY_STATUS {
+  Incomplete
+  Draft
+  Review
+  Done
+}
+
 input ComponentTranslationsWeaponStoryStoryFiltersInput {
   description: StringFilterInput
   level_1: StringFilterInput
@@ -801,7 +874,7 @@ input ComponentTranslationsWeaponStoryStoryInput {
   level_3: String
   level_4: String
   language: ID
-  status: String
+  status: ENUM_COMPONENTTRANSLATIONSWEAPONSTORYSTORY_STATUS
 }
 
 type ComponentTranslationsWeaponStoryStory {
@@ -812,7 +885,7 @@ type ComponentTranslationsWeaponStoryStory {
   level_3: String
   level_4: String
   language: LanguageEntityResponse
-  status: String!
+  status: ENUM_COMPONENTTRANSLATIONSWEAPONSTORYSTORY_STATUS!
 }
 
 input ComponentTranslationsWeaponStoryTypeFiltersInput {
@@ -1186,6 +1259,12 @@ type AudioSubtypeEntityResponseCollection {
   meta: ResponseCollectionMeta!
 }
 
+enum ENUM_CATEGORY_SERIES {
+  Drakengard
+  NieR
+  YoRHa
+}
+
 input CategoryFiltersInput {
   id: IDFilterInput
   name: StringFilterInput
@@ -1201,13 +1280,13 @@ input CategoryFiltersInput {
 input CategoryInput {
   name: String
   short: String
-  series: String
+  series: ENUM_CATEGORY_SERIES
 }
 
 type Category {
   name: String!
   short: String!
-  series: String
+  series: ENUM_CATEGORY_SERIES
   createdAt: DateTime
   updatedAt: DateTime
 }
@@ -1580,6 +1659,7 @@ input LibraryContentFiltersInput {
   audio_set: AudioSetFiltersInput
   video_set: VideoSetFiltersInput
   type: ContentTypeFiltersInput
+  categories: CategoryFiltersInput
   createdAt: DateTimeFilterInput
   updatedAt: DateTimeFilterInput
   and: [LibraryContentFiltersInput]
@@ -1597,6 +1677,7 @@ input LibraryContentInput {
   audio_set: ID
   video_set: ID
   type: ID
+  categories: [ID]
 }
 
 type LibraryContent {
@@ -1613,6 +1694,11 @@ type LibraryContent {
   audio_set: AudioSetEntityResponse
   video_set: VideoSetEntityResponse
   type: ContentTypeEntityResponse
+  categories(
+    filters: CategoryFiltersInput
+    pagination: PaginationArg = {}
+    sort: [String] = []
+  ): CategoryRelationResponseCollection
   createdAt: DateTime
   updatedAt: DateTime
 }

src/pages/gallery/index.tsx

@@ -0,0 +1,14 @@
+import { applyCustomAppProps } from "pages/_app";
+
+applyCustomAppProps(Chronology, {
+  useSubPanel: false,
+  useContentPanel: true,
+});
+
+export default function Chronology(): JSX.Element {
+  return (
+    <>
+    <iframe className="w-full h-screen" src="https://gallery.accords-library.com/posts"></iframe>
+    </>
+  );
+}

src/pages/library/[...slug].tsx

@@ -1,134 +0,0 @@
-import { useRouter } from "next/router";
-import ContentPanel 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, getLibraryItemsSkeleton } from "graphql/operations";
-import { GetLibraryItemQuery } from "graphql/operations-types";
-import { getAssetURL } from "queries/helpers";
-
-type Props = {
-  libraryItem: GetLibraryItemQuery;
-};
-
-applyCustomAppProps(Library, {
-  useSubPanel: false,
-  useContentPanel: true,
-});
-
-export default function Library(props: Props): JSX.Element {
-  const router = useRouter();
-  const libraryItem = props.libraryItem.libraryItems.data[0];
-  return (
-    <>
-      <ContentPanel>
-        <h1>{libraryItem.attributes.title}</h1>
-        <h2>{libraryItem.attributes.subtitle}</h2>
-        {libraryItem.attributes.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}
-          />
-        ) : (
-          ""
-        )}
-
-        {libraryItem.attributes.subitems.data.map((subitem) => (
-          <Link
-            href={router.asPath + "/" + subitem.attributes.slug}
-            key={subitem.id}
-            passHref
-          >
-            <div>
-              {subitem.attributes.thumbnail.data ? (
-                <Image
-                  src={getAssetURL(
-                    subitem.attributes.thumbnail.data.attributes.url
-                  )}
-                  alt={
-                    subitem.attributes.thumbnail.data.attributes.alternativeText
-                  }
-                  width={subitem.attributes.thumbnail.data.attributes.width}
-                  height={subitem.attributes.thumbnail.data.attributes.height}
-                />
-              ) : (
-                ""
-              )}
-            </div>
-          </Link>
-        ))}
-      </ContentPanel>
-    </>
-  );
-}
-
-export const getStaticProps: GetStaticProps = async (context) => {
-  if (context.params && Array.isArray(context.params.slug)) {
-    const slug = context.params.slug.pop();
-    if (slug && context.locale) {
-      return {
-        props: {
-          libraryItem: await getLibraryItem({
-            slug: slug,
-            language_code: context.locale,
-          }),
-        },
-      };
-    }
-  }
-
-  return { props: {} };
-};
-
-export const getStaticPaths: GetStaticPaths = async () => {
-  const paths = await getAllSlugs();
-  return {
-    paths,
-    fallback: false,
-  };
-};
-
-async function getAllSlugs() {
-  type Path = {
-    params: {
-      slug: string[];
-    };
-  };
-
-  const data = await getLibraryItemsSkeleton({});
-  console.log(data);
-  const paths: Path[] = [];
-  data.libraryItems.data.map((item) => {
-    const breadcrumbs = getBreadcrumbs([], item);
-    breadcrumbs.map((breadcrumb) => {
-      paths.push({ params: { slug: breadcrumb } });
-    });
-  });
-  return paths;
-}
-
-export type LibraryItemSkeleton = {
-  attributes: {
-    slug: string;
-    subitems: {
-      data: LibraryItemSkeleton[];
-    };
-  };
-};
-
-function getBreadcrumbs(parentBreadcrumb: string[], data: LibraryItemSkeleton) {
-  const result: string[][] = [];
-  const itemBreadcrumb = [...parentBreadcrumb, data.attributes.slug];
-  result.push(itemBreadcrumb);
-  data.attributes.subitems.data.map((subitem) => {
-    result.push(...getBreadcrumbs(itemBreadcrumb, subitem));
-  });
-  return result;
-}

src/pages/library/[slug].tsx

@@ -0,0 +1,239 @@
+import { useRouter } from "next/router";
+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 { getAssetURL } from "queries/helpers";
+import SubPanel from "components/Panels/SubPanel";
+import ReturnButton from "components/PanelComponents/ReturnButton";
+import NavOption from "components/PanelComponents/NavOption";
+
+type Props = {
+  libraryItem: GetLibraryItemQuery;
+};
+
+applyCustomAppProps(Library, {
+  useSubPanel: true,
+  useContentPanel: true,
+});
+
+export default function Library(props: Props): JSX.Element {
+  const router = useRouter();
+  const libraryItem = props.libraryItem.libraryItems.data[0];
+
+  return (
+    <>
+      <SubPanel>
+        <ReturnButton title="Library" url="/library" />
+        <hr />
+
+        <div className="grid place-items-center">
+          <div className="cursor-pointer grid items-end relative hover:rounded-3xl w-[80%] max-w-full mb-8">
+            <div className="bg-light absolute inset-1 rounded-lg shadow-dark shadow-lg"></div>
+            {libraryItem.attributes.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}
+              />
+            ) : (
+              <div className="w-full aspect-[21/29.7]"></div>
+            )}
+          </div>
+
+          <h1 className="text-2xl">{libraryItem.attributes.title}</h1>
+          {libraryItem.attributes.subtitle ? (
+            <h2 className="text-1xl">{libraryItem.attributes.subtitle}</h2>
+          ) : (
+            ""
+          )}
+        </div>
+
+        <hr />
+
+        <NavOption title="Summary" url="#summary" border={true} />
+        <NavOption title="Gallery" url="#gallery" border={true} />
+        <NavOption title="Details" url="#details" border={true} />
+        <NavOption title="Subitems" url="#subitems" border={true} />
+        <NavOption title="Content" url="#content" border={true} />
+      </SubPanel>
+      <ContentPanel width={ContentPanelWidthSizes.large}>
+        <div className="grid place-items-center gap-8">
+          <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 ? (
+              <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}
+              />
+            ) : (
+              <div className="w-full aspect-[21/29.7]"></div>
+            )}
+          </div>
+
+          <div
+            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="grid place-items-center">
+                  <p>Subitem of</p>
+                  <Link
+                    href={`/library/${libraryItem.attributes.subitem_of.data[0].attributes.slug}`}
+                    passHref
+                  >
+                    <button>
+                      {
+                        libraryItem.attributes.subitem_of.data[0].attributes
+                          .title
+                      }
+                      {libraryItem.attributes.subitem_of.data[0].attributes
+                        .subtitle
+                        ? ` - ${libraryItem.attributes.subitem_of.data[0].attributes.subtitle}`
+                        : ""}
+                    </button>
+                  </Link>
+                </div>
+              ) : (
+                ""
+              )}
+              <div>
+                <h1 className="text-3xl">{libraryItem.attributes.title}</h1>
+                {libraryItem.attributes.subtitle ? (
+                  <h2 className="text-2xl">
+                    {libraryItem.attributes.subtitle}
+                  </h2>
+                ) : (
+                  ""
+                )}
+              </div>
+              {libraryItem.attributes.descriptions.length > 0 ? (
+                <p>{libraryItem.attributes.descriptions[0].description}</p>
+              ) : (
+                ""
+              )}
+            </div>
+          </div>
+
+          <div id="gallery"></div>
+
+          <div
+            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-cols-3 place-items-center">
+                <p>Type</p>
+                <p>Release date</p>
+                <p>Price</p>
+              </div>
+            </div>
+          </div>
+
+          <div id="subitems">
+            {libraryItem.attributes.subitems.data.map((subitem) => (
+              <Link
+                href={`/library/${subitem.attributes.slug}`}
+                key={subitem.id}
+                passHref
+              >
+                <div>
+                  {subitem.attributes.thumbnail.data ? (
+                    <Image
+                      src={getAssetURL(
+                        subitem.attributes.thumbnail.data.attributes.url
+                      )}
+                      alt={
+                        subitem.attributes.thumbnail.data.attributes
+                          .alternativeText
+                      }
+                      width={subitem.attributes.thumbnail.data.attributes.width}
+                      height={
+                        subitem.attributes.thumbnail.data.attributes.height
+                      }
+                    />
+                  ) : (
+                    ""
+                  )}
+                </div>
+              </Link>
+            ))}
+
+            <div id="content">
+              {libraryItem.attributes.contents.data.map((content) => (
+                <div
+                  key={content.id}
+                  className="grid grid-flow-col gap-4 w-full"
+                >
+                  <h3>{content.attributes.title[0].title}</h3>
+                  <p>
+                    {content.attributes.range[0].__typename ===
+                    "ComponentRangePageRange"
+                      ? content.attributes.range[0].starting_page
+                      : ""}
+                  </p>
+                  <p>{content.attributes.type.data.attributes.slug}</p>
+                </div>
+              ))}
+            </div>
+          </div>
+        </div>
+      </ContentPanel>
+    </>
+  );
+}
+
+export const getStaticProps: GetStaticProps = async (context) => {
+  if (context.params) {
+    if (context.params.slug && context.locale) {
+      return {
+        props: {
+          libraryItem: await getLibraryItem({
+            slug: context.params.slug,
+            language_code: context.locale,
+          }),
+        },
+      };
+    }
+  }
+  return { props: {} };
+};
+
+export const getStaticPaths: GetStaticPaths = async () => {
+  type Path = {
+    params: {
+      slug: string;
+    };
+  };
+
+  const data = await getLibraryItemsSlugs({});
+  const paths: Path[] = [];
+  data.libraryItems.data.map((item) => {
+    console.log(item.attributes.slug);
+    paths.push({ params: { slug: item.attributes.slug } });
+  });
+  return {
+    paths,
+    fallback: false,
+  };
+};

src/pages/library/index.tsx

@@ -19,7 +19,6 @@ applyCustomAppProps(Library, {
 });
 
 export default function Library(props: Props): JSX.Element {
-  console.log(props);
   return (
     <>
       <SubPanel>

src/tailwind.css

@@ -7,8 +7,8 @@
   body {
     padding: 0;
     margin: 0;
-    background-color: var(--color-main-light);
+    background-color: theme("colors.light");
-    color: var(--color-main-black);
+    color: theme("colors.black");
   }
 
   /* HORIZONTAL LINE */
@@ -31,7 +31,7 @@
     place-items: center;
     border: 0.1rem solid theme("colors.dark");
     color: theme("colors.dark");
-    background: theme("colors.light");
+    background: inherit;
     border-radius: 100vmax;
     padding: 0.4em 1em;
     cursor: pointer;

tailwind.config.js

@@ -44,5 +44,15 @@ module.exports = {
         },
       });
     }),
+
+    plugin(function ({ addUtilities }) {
+      addUtilities({
+        ".linearbg-1": {
+          background:
+            "linear-gradient(to right, theme('colors.mid'), theme('colors.light') 3%, theme('colors.light') 97%, theme('colors.mid'))",
+        },
+      });
+    }),
+
   ],
 };