Display library item's categories on its page

src/components/Library/LibraryItemsPreview.tsx

@@ -63,8 +63,7 @@ export default function LibraryItemsPreview(
             ))}
           </div>
 
-          {item.release_date ||
-            (item.price && (
+          {(item.release_date || item.price) && (
             <div className="grid grid-flow-col w-full">
               {item.release_date && (
                 <p className="mobile:text-xs text-sm">
@@ -87,7 +86,7 @@ export default function LibraryItemsPreview(
                 </p>
               )}
             </div>
-            ))}
+          )}
         </div>
       </div>
     </Link>

src/graphql/operation.graphql

@@ -363,6 +363,15 @@ query getLibraryItem($slug: String, $language_code: String) {
             }
           }
         }
+        categories {
+          data {
+            id
+            attributes {
+              name
+              short
+            }
+          }
+        }
         size {
           width
           height
@@ -532,6 +541,15 @@ query getLibraryItem($slug: String, $language_code: String) {
                   }
                 }
               }
+              categories {
+                data {
+                  id
+                  attributes {
+                    name
+                    short
+                  }
+                }
+              }
               metadata {
                 __typename
                 ... on ComponentMetadataBooks {

src/graphql/operations-types.ts

@@ -522,6 +522,18 @@ export type GetLibraryItemQuery = {
             };
           };
         };
+        categories: {
+          __typename: "CategoryRelationResponseCollection";
+          data: Array<{
+            __typename: "CategoryEntity";
+            id: string;
+            attributes: {
+              __typename: "Category";
+              name: string;
+              short: string;
+            };
+          }>;
+        };
         size: {
           __typename: "ComponentBasicsSize";
           width: number;
@@ -738,6 +750,18 @@ export type GetLibraryItemQuery = {
                   };
                 };
               };
+              categories: {
+                __typename: "CategoryRelationResponseCollection";
+                data: Array<{
+                  __typename: "CategoryEntity";
+                  id: string;
+                  attributes: {
+                    __typename: "Category";
+                    name: string;
+                    short: string;
+                  };
+                }>;
+              };
               metadata: Array<
                 | {
                     __typename: "ComponentMetadataAudio";

src/pages/library/[slug].tsx

@@ -216,6 +216,20 @@ export default function LibrarySlug(props: LibrarySlugProps): JSX.Element {
                 </div>
               )}
             </div>
+
+            {item.categories.data.length > 0 && (
+              <div>
+                <h3 className="text-xl">{langui.categories}</h3>
+                <div className="flex flex-row flex-wrap place-items-center place-content-start gap-2">
+                  {item.categories.data.map((category) => (
+                    <Chip key={category.id}>
+                      {category.attributes.short}
+                    </Chip>
+                  ))}
+                </div>
+              </div>
+            )}
+
             {item.size && (
               <>
                 <h3 className="text-xl">{langui.size}</h3>