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

Library item show their content and more components

Browse Source
This commit is contained in:
DrMint 2022-01-29 17:52:47 +01:00
parent c4f2ab31a3
commit d3197b32bd
13 changed files with 205 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
src/components/Button.tsx Normal file
View File

@ -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>
);
}

18
src/components/Chip.tsx Normal file
View File

@ -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>
);
}

17
src/components/HorizontalLine.tsx Normal file
View File

@ -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>
);
}

4
src/components/PanelComponents/PanelHeader.tsx
View File

@ -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>
);
}

3
src/components/PanelComponents/ReturnButton.tsx
View File

@ -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>
);
}

28
src/components/Panels/MainPanel.tsx
View File

@ -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?.toUpperCase()}
</button>
{router.locale ? (
<Button className="absolute right-0 top-[-1.3em] text-xs py-0.5 px-2.5">
{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>

2
src/components/Panels/SubPanel.tsx
View File

@ -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>
);

38
src/graphql/operation.graphql
View File

@ -103,9 +103,7 @@ query getLibraryItemsPreview($language_code: String) {
}
query getLibraryItemsSlugs {
libraryItems(
pagination: { limit: -1 }
) {
libraryItems(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 {

35
src/graphql/operations-types.ts
View File

@ -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 = {
};
}>;
};
};
};

6
src/graphql/operations.ts
View File

@ -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));
}
}

3
src/pages/chronology/overview.tsx
View File

@ -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

73
src/pages/library/[slug].tsx
View File

@ -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>
<p></p>
<p className="border-b-2 h-4 w-full border-dark border-dotted"></p>
<p>
{content.attributes.range[0].__typename ===
"ComponentRangePageRange"
? content.attributes.range[0].starting_page
: ""}
</p>
<button className="text-xs">
<p>{content.attributes.type.data.attributes.slug}</p>
</button>
<div className="grid gap-4 place-items-center grid-cols-[auto_auto_1fr_auto_9em] ">
<a href={`#${content.attributes.slug}`}>
<h3>{content.attributes.title[0].title}</h3>
</a>
<div className="grid grid-flow-col gap-1">
{content.attributes.categories.data.map((category) => (
<Chip key={category.id}>
{category.attributes.short}
</Chip>
))}
</div>
<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 {

8
src/tailwind.css
View File

@ -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;
}