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

Fixed bug: Button couldn't be clicked

This commit is contained in:
DrMint 2022-01-31 13:16:30 +01:00
parent d3197b32bd
commit 7fb48b2544
4 changed files with 70 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
src/components/Button.tsx
View File

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

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

@ -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 (
<Link href={props.url} passHref>
<Button>❮&emsp;Return to {props.title}</Button>
</Link>
);
return <Button href={props.href}>❮&emsp;Return to {props.title}</Button>;
}

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

@ -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) => (

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

@ -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
.subtitle
? ` - ${libraryItem.attributes.subitem_of.data[0].attributes.subtitle}`
: ""}
</Button>
</Link>
{libraryItem.attributes.subitem_of.data[0].attributes.title}
{libraryItem.attributes.subitem_of.data[0].attributes
.subtitle
? ` - ${libraryItem.attributes.subitem_of.data[0].attributes.subtitle}`
: ""}
</Button>
</div>
) : (
""
@ -271,10 +265,52 @@ export default function Library(props: Props): JSX.Element {
subdirectory_arrow_right
</span>
<Button>View scan</Button>
<Button>Read content</Button>
<Button>Listen content</Button>
<Button>View content</Button>
{content.attributes.scan_set.data ? (
<Button
href={`/scans/${content.attributes.scan_set.data.attributes.slug}`}
>
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>
))}