ContentPanel can now have different widths

src/components/Library/LibraryItemComponent.tsx

@@ -1,4 +1,3 @@
-import styles from "styles/Library/LibraryItemComponent.module.css";
 import Link from "next/link";
 import Image from "next/image";
 import { GetLibraryItemsPreviewQuery } from "graphql/operations-types";
@@ -31,7 +30,7 @@ export default function LibraryItemComponent(
 
   return (
     <Link href={"/library/" + props.item.attributes.slug} passHref>
-      <div className={styles.libraryItem}>
+      <div className="">
         <h2>
           {prettyTitleSubtitle(
             props.item.attributes.title,

src/components/Panels/ContentPanel.tsx

@@ -1,22 +1,24 @@
 type ContentPanelProps = {
   children: React.ReactNode;
   autoformat?: boolean;
+  width?: ContentPanelWidthSizes;
 };
 
-export default function ContentPanel(props: ContentPanelProps): JSX.Element {
-  if (props.autoformat) {
-    return (
-      <div className="w-full grid overflow-y-scroll max-h-screen py-20 px-10">
-        <main className="prose place-self-center text-justify">
-          {props.children}
-        </main>
-      </div>
-    );
-  } else {
-    return (
-      <div className="w-full grid overflow-y-scroll max-h-screen py-20 px-10">
-        <main className="place-self-center text-justify">{props.children}</main>
-      </div>
-    );
-  }
+export enum ContentPanelWidthSizes {
+  default,
+  large,
+}
+
+export default function ContentPanel(props: ContentPanelProps): JSX.Element {
+  const width = props.width ? props.width : ContentPanelWidthSizes.default;
+  const widthCSS = width === ContentPanelWidthSizes.default ? "w-[45rem]" : "w-full";
+  const prose = props.autoformat ? "prose" : "";
+
+  return (
+    <div className={`grid overflow-y-scroll max-h-screen py-20 px-10`}>
+      <main className={`${prose} ${widthCSS} place-self-center text-justify`}>
+        {props.children}
+      </main>
+    </div>
+  );
 }

src/pages/library/index.tsx

@@ -1,6 +1,6 @@
 import { GetStaticProps } from "next";
 import SubPanel from "components/Panels/SubPanel";
-import ContentPanel from "components/Panels/ContentPanel";
+import ContentPanel, { ContentPanelWidthSizes } from "components/Panels/ContentPanel";
 import LibraryItemComponent from "components/Library/LibraryItemComponent";
 import { applyCustomAppProps } from "pages/_app";
 import { GetLibraryItemsPreviewQuery } from "graphql/operations-types";
@@ -30,7 +30,7 @@ export default function Library(props: Props): JSX.Element {
         <hr />
       </SubPanel>
 
-      <ContentPanel>
+      <ContentPanel width={ContentPanelWidthSizes.large}>
         {props.libraryItems.libraryItems.data.map((item) => (
           <LibraryItemComponent key={item.id} item={item} />
         ))}