Accords-Library-Archive
/
accords-library.com
1
0
Fork 0
Code Issues Pull Requests 5 Packages Projects Releases Wiki Activity

ContentPanel can now have different widths

This commit is contained in:
DrMint 2022-01-02 17:33:35 +01:00
parent 57d9013aa7
commit 58a868a2ff
3 changed files with 21 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/components/Library/LibraryItemComponent.tsx
View File

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

34
src/components/Panels/ContentPanel.tsx
View File

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

4
src/pages/library/index.tsx
View File

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