Library item show their content and more components

src/components/Button.tsx

@@ -0,0 +1,18 @@
+type ButtonProps = {
+  className?: string;
+  children: React.ReactChild | React.ReactChild[];
+};
+
+export default function Button(props: ButtonProps): JSX.Element {
+  return (
+    <div
+      className={
+        "grid place-content-center place-items-center border-[1px] border-dark text-dark rounded-full cursor-pointer px-4 py-2 transition-colors hover:text-light hover:bg-dark" +
+        " " +
+        props.className
+      }
+    >
+      {props.children}
+    </div>
+  );
+}

src/components/Chip.tsx

@@ -0,0 +1,18 @@
+type ChipProps = {
+  className?: string;
+  children: React.ReactChild | React.ReactChild[];
+};
+
+export default function Chip(props: ChipProps): JSX.Element {
+  return (
+    <div
+      className={
+        "grid place-content-center place-items-center text-xs py-0.5 px-1.5 border-[1px] rounded-full opacity-70" +
+        " " +
+        props.className
+      }
+    >
+      {props.children}
+    </div>
+  );
+}

src/components/HorizontalLine.tsx

@@ -0,0 +1,17 @@
+type HorizontalLineProps = {
+  className?: string;
+};
+
+export default function HorizontalLine(
+  props: HorizontalLineProps
+): JSX.Element {
+  return (
+    <div
+      className={
+        "h-0 w-full my-8 border-t-[3px] border-dotted border-black" +
+        " " +
+        props.className
+      }
+    ></div>
+  );
+}

src/components/PanelComponents/PanelHeader.tsx

@@ -1,3 +1,5 @@
+import HorizontalLine from "components/HorizontalLine";
+
 type NavOptionProps = {
   icon?: string;
   title: string;
@@ -14,7 +16,7 @@ export default function PanelHeader(props: NavOptionProps): JSX.Element {
       )}
       <h2 className="text-2xl">{props.title}</h2>
       {props.description ? <p>{props.description}</p> : ""}
-      <hr />
+      <HorizontalLine />
     </div>
   );
 }

src/components/PanelComponents/ReturnButton.tsx

@@ -1,3 +1,4 @@
+import Button from "components/Button";
 import Link from "next/link";
 
 type ReturnButtonProps = {
@@ -8,7 +9,7 @@ type ReturnButtonProps = {
 export default function ReturnButton(props: ReturnButtonProps): JSX.Element {
   return (
     <Link href={props.url} passHref>
-      <button>❮&emsp;Return to {props.title}</button>
+      <Button>❮&emsp;Return to {props.title}</Button>
     </Link>
   );
 }

src/components/Panels/MainPanel.tsx

@@ -2,31 +2,37 @@ import Link from "next/link";
 import NavOption from "components/PanelComponents/NavOption";
 import SVG from "components/SVG";
 import { useRouter } from "next/router";
+import Button from "components/Button";
+import HorizontalLine from "components/HorizontalLine";
 
 export default function MainPanel(): JSX.Element {
   const router = useRouter();
   return (
-    <div className="grid webkit-scrollbar:w-0 [scrollbar-width:none] overflow-y-scroll border-r-[1px] border-black w-80 max-h-screen h-screen justify-center content-start p-8 gap-y-2 justify-items-center text-center">
+    <div className="grid webkit-scrollbar:w-0 [scrollbar-width:none] overflow-y-scroll border-r-[1px] border-black max-h-screen h-screen justify-center content-start p-8 gap-y-2 justify-items-center text-center">
       <div className="">
         <div className="grid place-items-center">
-          <div className="w-1/2 cursor-pointer transition-[filter] hover:colorize-dark">
+          <Link href="/" passHref>
-            <Link href="/" passHref>
+            <div className="w-1/2 cursor-pointer transition-[filter] hover:colorize-dark">
               <SVG
                 src={"/icons/accords.svg"}
                 alt={"Logo of Accord's Library"}
               />
-            </Link>
+            </div>
-          </div>
+          </Link>
           <div className="relative mt-5">
-            <button className="absolute right-0 top-[-1em] text-xs py-0">
+            {router.locale ? (
-              {router.locale?.toUpperCase()}
+              <Button className="absolute right-0 top-[-1.3em] text-xs py-0.5 px-2.5">
-            </button>
+                {router.locale.toUpperCase()}
+              </Button>
+            ) : (
+              ""
+            )}
             <h2 className="text-3xl">Accord&rsquo;s Library</h2>
           </div>
         </div>
       </div>
 
-      <hr />
+      <HorizontalLine />
 
       <NavOption
         url="/library"
@@ -49,7 +55,7 @@ export default function MainPanel(): JSX.Element {
         subtitle="Follow all events in chronological order"
       />
 
-      <hr />
+      <HorizontalLine />
 
       <NavOption url="/news" icon="feed" title="News" />
       <NavOption url="/data" icon="travel_explore" title="Data" />
@@ -57,7 +63,7 @@ export default function MainPanel(): JSX.Element {
       <NavOption url="/archive" icon="inventory" title="Archive" />
       <NavOption url="/about-us" icon="info" title="About us" />
 
-      <hr />
+      <HorizontalLine />
 
       <div className="text-center">
         <p>

src/components/Panels/SubPanel.tsx

@@ -4,7 +4,7 @@ type SubPanelProps = {
 
 export default function SubPanel(props: SubPanelProps): JSX.Element {
   return (
-    <div className="grid webkit-scrollbar:w-0 [scrollbar-width:none] border-r-[1px] overflow-y-scroll border-black w-80 max-h-screen h-screen justify-center content-start p-8 gap-y-2 justify-items-center text-center">
+    <div className="grid webkit-scrollbar:w-0 [scrollbar-width:none] overflow-y-scroll border-r-[1px] border-black max-h-screen h-screen justify-center content-start p-8 gap-y-2 justify-items-center text-center">
       {props.children}
     </div>
   );

src/graphql/operation.graphql

@@ -103,9 +103,7 @@ query getLibraryItemsPreview($language_code: String) {
 }
 
 query getLibraryItemsSlugs {
-  libraryItems(
+  libraryItems(pagination: { limit: -1 }) {
-    pagination: { limit: -1 }
-  ) {
     data {
       attributes {
         slug
@@ -114,7 +112,6 @@ query getLibraryItemsSlugs {
   }
 }
 
-
 query getLibraryItem($slug: String, $language_code: String) {
   libraryItems(filters: { slug: { eq: $slug } }) {
     data {
@@ -305,12 +302,45 @@ query getLibraryItem($slug: String, $language_code: String) {
               }
               categories {
                 data {
+                  id
                   attributes {
                     name
                     short
                   }
                 }
               }
+              scan_set {
+                data {
+                  id
+                  attributes {
+                    slug
+                  }
+                }
+              }
+              text_set {
+                data {
+                  id
+                  attributes {
+                    slug
+                  }
+                }
+              }
+              audio_set {
+                data {
+                  id
+                  attributes {
+                    slug
+                  }
+                }
+              }
+              video_set {
+                data {
+                  id
+                  attributes {
+                    slug
+                  }
+                }
+              }
               range {
                 __typename
                 ... on ComponentRangePageRange {

src/graphql/operations-types.ts

@@ -460,6 +460,7 @@ export type GetLibraryItemQuery = {
                 __typename: "CategoryRelationResponseCollection";
                 data: Array<{
                   __typename: "CategoryEntity";
+                  id: string;
                   attributes: {
                     __typename: "Category";
                     name: string;
@@ -467,6 +468,38 @@ export type GetLibraryItemQuery = {
                   };
                 }>;
               };
+              scan_set: {
+                __typename: "ScanSetEntityResponse";
+                data: {
+                  __typename: "ScanSetEntity";
+                  id: string;
+                  attributes: { __typename: "ScanSet"; slug: string };
+                };
+              };
+              text_set: {
+                __typename: "TextSetEntityResponse";
+                data: {
+                  __typename: "TextSetEntity";
+                  id: string;
+                  attributes: { __typename: "TextSet"; slug: string };
+                };
+              };
+              audio_set: {
+                __typename: "AudioSetEntityResponse";
+                data: {
+                  __typename: "AudioSetEntity";
+                  id: string;
+                  attributes: { __typename: "AudioSet"; slug: string };
+                };
+              };
+              video_set: {
+                __typename: "VideoSetEntityResponse";
+                data: {
+                  __typename: "VideoSetEntity";
+                  id: string;
+                  attributes: { __typename: "VideoSet"; slug: string };
+                };
+              };
               range: Array<
                 | {
                     __typename: "ComponentRangePageRange";
@@ -488,4 +521,4 @@ export type GetLibraryItemQuery = {
       };
     }>;
   };
-};
+};

src/graphql/operations.ts

@@ -5,6 +5,10 @@ import {
   GetChronologyItemsQueryVariables,
   GetErasQuery,
   GetErasQueryVariables,
+  GetLibraryContentQuery,
+  GetLibraryContentQueryVariables,
+  GetLibraryContentsSlugsQuery,
+  GetLibraryContentsSlugsQueryVariables,
   GetLibraryItemQuery,
   GetLibraryItemQueryVariables,
   GetLibraryItemsPreviewQuery,
@@ -77,4 +81,4 @@ export async function getLibraryItem(
 ): Promise<GetLibraryItemQuery> {
   const query = getQueryFromOperations("getLibraryItem");
   return await graphQL(query, JSON.stringify(variables));
-}
+}

src/pages/chronology/overview.tsx

@@ -10,6 +10,7 @@ import {
 import { getEras, getChronologyItems } from "graphql/operations";
 import NavOption from "components/PanelComponents/NavOption";
 import ReturnButton from "components/PanelComponents/ReturnButton";
+import HorizontalLine from "components/HorizontalLine";
 
 interface Props {
   chronologyItems: GetChronologyItemsQuery;
@@ -41,7 +42,7 @@ export default function ChronologyOverview(props: Props): JSX.Element {
     <>
       <SubPanel>
         <ReturnButton url="/chronology" title="Chronology" />
-        <hr />
+        <HorizontalLine />
 
         {props.chronologyEras.chronologyEras.data.map((era) => (
           <NavOption

src/pages/library/[slug].tsx

@@ -1,4 +1,3 @@
-import { useRouter } from "next/router";
 import ContentPanel, {
   ContentPanelWidthSizes,
 } from "components/Panels/ContentPanel";
@@ -18,6 +17,9 @@ import SubPanel from "components/Panels/SubPanel";
 import ReturnButton from "components/PanelComponents/ReturnButton";
 import NavOption from "components/PanelComponents/NavOption";
 import LibraryItemComponent from "components/Library/LibraryItemComponent";
+import Chip from "components/Chip";
+import Button from "components/Button";
+import HorizontalLine from "components/HorizontalLine";
 
 type Props = {
   libraryItem: GetLibraryItemQuery;
@@ -31,11 +33,24 @@ applyCustomAppProps(Library, {
 export default function Library(props: Props): JSX.Element {
   const libraryItem = props.libraryItem.libraryItems.data[0];
 
+  libraryItem.attributes.contents.data.sort((a, b) => {
+    if (
+      a.attributes.range[0].__typename === "ComponentRangePageRange" &&
+      b.attributes.range[0].__typename === "ComponentRangePageRange"
+    ) {
+      return (
+        a.attributes.range[0].starting_page -
+        b.attributes.range[0].starting_page
+      );
+    }
+    return 0;
+  });
+
   return (
     <>
       <SubPanel>
         <ReturnButton title="Library" url="/library" />
-        <hr />
+        <HorizontalLine />
 
         <NavOption title="Summary" url="#summary" border={true} />
 
@@ -92,7 +107,7 @@ export default function Library(props: Props): JSX.Element {
                     href={`/library/${libraryItem.attributes.subitem_of.data[0].attributes.slug}`}
                     passHref
                   >
-                    <button>
+                    <Button>
                       {
                         libraryItem.attributes.subitem_of.data[0].attributes
                           .title
@@ -101,13 +116,13 @@ export default function Library(props: Props): JSX.Element {
                         .subtitle
                         ? ` - ${libraryItem.attributes.subitem_of.data[0].attributes.subtitle}`
                         : ""}
-                    </button>
+                    </Button>
                   </Link>
                 </div>
               ) : (
                 ""
               )}
-              <div>
+              <div className="grid place-items-center">
                 <h1 className="text-3xl">{libraryItem.attributes.title}</h1>
                 {libraryItem.attributes.subtitle ? (
                   <h2 className="text-2xl">
@@ -225,21 +240,42 @@ export default function Library(props: Props): JSX.Element {
               <div className="grid gap-4 w-full">
                 {libraryItem.attributes.contents.data.map((content) => (
                   <div
+                    id={content.attributes.slug}
                     key={content.id}
-                    className="grid grid-flow-col gap-4 place-items-center grid-cols-[auto_auto_1fr_auto_auto]"
+                    className=" grid gap-2 h-6 overflow-hidden px-4 rounded-lg target:bg-mid target:h-auto target:py-3 target:my-2"
                   >
-                    <h3>{content.attributes.title[0].title}</h3>
+                    <div className="grid gap-4 place-items-center grid-cols-[auto_auto_1fr_auto_9em] ">
-                    <p></p>
+                      <a href={`#${content.attributes.slug}`}>
-                    <p className="border-b-2 h-4 w-full border-dark border-dotted"></p>
+                        <h3>{content.attributes.title[0].title}</h3>
-                    <p>
+                      </a>
-                      {content.attributes.range[0].__typename ===
+                      <div className="grid grid-flow-col gap-1">
-                      "ComponentRangePageRange"
+                        {content.attributes.categories.data.map((category) => (
-                        ? content.attributes.range[0].starting_page
+                          <Chip key={category.id}>
-                        : ""}
+                            {category.attributes.short}
-                    </p>
+                          </Chip>
-                    <button className="text-xs">
+                        ))}
-                      <p>{content.attributes.type.data.attributes.slug}</p>
+                      </div>
-                    </button>
+                      <p className="border-b-2 h-4 w-full border-black border-dotted opacity-30"></p>
+                      <p>
+                        {content.attributes.range[0].__typename ===
+                        "ComponentRangePageRange"
+                          ? content.attributes.range[0].starting_page
+                          : ""}
+                      </p>
+                      <Chip className="place-self-end">
+                        {content.attributes.type.data.attributes.slug}
+                      </Chip>
+                    </div>
+                    <div className="grid grid-flow-col place-content-start place-items-center gap-2">
+                      <span className="material-icons text-dark">
+                        subdirectory_arrow_right
+                      </span>
+
+                      <Button>View scan</Button>
+                      <Button>Read content</Button>
+                      <Button>Listen content</Button>
+                      <Button>View content</Button>
+                    </div>
                   </div>
                 ))}
               </div>
@@ -279,7 +315,6 @@ export const getStaticPaths: GetStaticPaths = async () => {
   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 {

src/tailwind.css

@@ -8,14 +8,6 @@
     @apply p-0 m-0 bg-light text-black;
   }
 
-  hr {
-    @apply h-0 w-full my-8 border-t-[3px] border-dotted border-black;
-  }
-
-  button {
-    @apply grid place-content-center place-items-center border-[1px] border-dark text-dark rounded-full cursor-pointer px-4 py-2 transition-colors hover:text-light hover:bg-dark;
-  }
-
   * {
     @apply box-border font-body font-medium scroll-smooth;
   }