From 58a868a2ff1a851fe20942c8e1b92c01ca3951d7 Mon Sep 17 00:00:00 2001
From: DrMint <thomas.barillot@etu.u-bordeaux.fr>
Date: Sun, 2 Jan 2022 17:33:35 +0100
Subject: [PATCH] ContentPanel can now have different widths

---
 .../Library/LibraryItemComponent.tsx          |  3 +-
 src/components/Panels/ContentPanel.tsx        | 34 ++++++++++---------
 src/pages/library/index.tsx                   |  4 +--
 3 files changed, 21 insertions(+), 20 deletions(-)

diff --git a/src/components/Library/LibraryItemComponent.tsx b/src/components/Library/LibraryItemComponent.tsx
index 6c992ee..f5d514d 100644
--- a/src/components/Library/LibraryItemComponent.tsx
+++ b/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,
diff --git a/src/components/Panels/ContentPanel.tsx b/src/components/Panels/ContentPanel.tsx
index 279f132..5385545 100644
--- a/src/components/Panels/ContentPanel.tsx
+++ b/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>
+  );
 }
diff --git a/src/pages/library/index.tsx b/src/pages/library/index.tsx
index ae282bf..d8d0a9d 100644
--- a/src/pages/library/index.tsx
+++ b/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} />
         ))}