Fixed bug: Button couldn't be clicked

src/components/Button.tsx

@@ -1,10 +1,13 @@
+import Link from "next/link";
+
 type ButtonProps = {
   className?: string;
+  href?: string;
   children: React.ReactChild | React.ReactChild[];
 };
 
 export default function Button(props: ButtonProps): JSX.Element {
-  return (
+  const button = (
     <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" +
@@ -15,4 +18,13 @@ export default function Button(props: ButtonProps): JSX.Element {
       {props.children}
     </div>
   );
+
+  const result = props.href ? (
+    <Link href={props.href} passHref>
+      {button}
+    </Link>
+  ) : (
+    button
+  );
+  return result;
 }

src/components/PanelComponents/ReturnButton.tsx

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

src/pages/chronology/overview.tsx

@@ -41,7 +41,7 @@ export default function ChronologyOverview(props: Props): JSX.Element {
   return (
     <>
       <SubPanel>
-        <ReturnButton url="/chronology" title="Chronology" />
+        <ReturnButton href="/chronology" title="Chronology" />
         <HorizontalLine />
 
         {props.chronologyEras.chronologyEras.data.map((era) => (

src/pages/library/[slug].tsx

@@ -49,7 +49,7 @@ export default function Library(props: Props): JSX.Element {
   return (
     <>
       <SubPanel>
-        <ReturnButton title="Library" url="/library" />
+        <ReturnButton title="Library" href="/library" />
         <HorizontalLine />
 
         <NavOption title="Summary" url="#summary" border={true} />
@@ -103,21 +103,15 @@ export default function Library(props: Props): JSX.Element {
               {libraryItem.attributes.subitem_of.data.length > 0 ? (
                 <div className="grid place-items-center">
                   <p>Subitem of</p>
-                  <Link
+                  <Button
                     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
-                        libraryItem.attributes.subitem_of.data[0].attributes
+                      .subtitle
-                          .title
+                      ? ` - ${libraryItem.attributes.subitem_of.data[0].attributes.subtitle}`
-                      }
+                      : ""}
-                      {libraryItem.attributes.subitem_of.data[0].attributes
+                  </Button>
-                        .subtitle
-                        ? ` - ${libraryItem.attributes.subitem_of.data[0].attributes.subtitle}`
-                        : ""}
-                    </Button>
-                  </Link>
                 </div>
               ) : (
                 ""
@@ -271,10 +265,52 @@ export default function Library(props: Props): JSX.Element {
                         subdirectory_arrow_right
                       </span>
 
-                      <Button>View scan</Button>
+                      {content.attributes.scan_set.data ? (
-                      <Button>Read content</Button>
+                        <Button
-                      <Button>Listen content</Button>
+                          href={`/scans/${content.attributes.scan_set.data.attributes.slug}`}
-                      <Button>View content</Button>
+                        >
+                          View scan
+                        </Button>
+                      ) : (
+                        ""
+                      )}
+
+                      {content.attributes.text_set.data ? (
+                        <Button
+                          href={`/read/${content.attributes.text_set.data.attributes.slug}`}
+                        >
+                          Read content
+                        </Button>
+                      ) : (
+                        ""
+                      )}
+
+                      {content.attributes.audio_set.data ? (
+                        <Button
+                          href={`/listen/${content.attributes.audio_set.data.attributes.slug}`}
+                        >
+                          Listen content
+                        </Button>
+                      ) : (
+                        ""
+                      )}
+
+                      {content.attributes.video_set.data ? (
+                        <Button
+                          href={`/watch/${content.attributes.video_set.data.attributes.slug}`}
+                        >
+                          View content
+                        </Button>
+                      ) : (
+                        ""
+                      )}
+
+                      {!content.attributes.scan_set.data &&
+                      !content.attributes.text_set.data &&
+                      !content.attributes.audio_set.data &&
+                      !content.attributes.video_set.data
+                        ? "The content is not available"
+                        : ""}
                     </div>
                   </div>
                 ))}