Display library item's categories on its page

src/components/Library/LibraryItemsPreview.tsx

@@ -63,31 +63,30 @@ export default function LibraryItemsPreview(
             ))}
           </div>
 
-          {item.release_date ||
-            (item.price && (
-              <div className="grid grid-flow-col w-full">
-                {item.release_date && (
-                  <p className="mobile:text-xs text-sm">
-                    <span className="material-icons !text-base translate-y-[.15em] mr-1">
-                      event
-                    </span>
-                    {prettyDate(item.release_date)}
-                  </p>
-                )}
-                {item.price && props.currencies && (
-                  <p className="mobile:text-xs text-sm justify-self-end">
-                    <span className="material-icons !text-base translate-y-[.15em] mr-1">
-                      shopping_cart
-                    </span>
-                    {prettyPrice(
-                      item.price,
-                      props.currencies,
-                      appLayout.currency
-                    )}
-                  </p>
-                )}
-              </div>
-            ))}
+          {(item.release_date || item.price) && (
+            <div className="grid grid-flow-col w-full">
+              {item.release_date && (
+                <p className="mobile:text-xs text-sm">
+                  <span className="material-icons !text-base translate-y-[.15em] mr-1">
+                    event
+                  </span>
+                  {prettyDate(item.release_date)}
+                </p>
+              )}
+              {item.price && props.currencies && (
+                <p className="mobile:text-xs text-sm justify-self-end">
+                  <span className="material-icons !text-base translate-y-[.15em] mr-1">
+                    shopping_cart
+                  </span>
+                  {prettyPrice(
+                    item.price,
+                    props.currencies,
+                    appLayout.currency
+                  )}
+                </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>