89 lines
2.1 KiB
TypeScript
89 lines
2.1 KiB
TypeScript
import { useRouter } from "next/router";
|
|
import SubPanel from "components/Panels/SubPanel";
|
|
import ContentPanel from "components/Panels/ContentPanel";
|
|
import { getAssetURL } from "queries/helpers";
|
|
import {
|
|
getLibraryItem,
|
|
getRecursiveSlugs,
|
|
LibraryItem,
|
|
Subitem,
|
|
} from "queries/library/[...slug]";
|
|
import Image from "next/image";
|
|
import Link from "next/link";
|
|
|
|
type Props = {
|
|
libraryItem: LibraryItem;
|
|
};
|
|
|
|
export default function Library(props: Props): JSX.Element {
|
|
const router = useRouter();
|
|
return (
|
|
<>
|
|
<ContentPanel>
|
|
<h1>{props.libraryItem.title}</h1>
|
|
<h2>{props.libraryItem.subtitle}</h2>
|
|
<Image
|
|
src={getAssetURL(props.libraryItem.thumbnail.id)}
|
|
alt={props.libraryItem.thumbnail.title}
|
|
width={props.libraryItem.thumbnail.width}
|
|
height={props.libraryItem.thumbnail.height}
|
|
/>
|
|
|
|
{props.libraryItem.subitems.map((subitem: Subitem) => (
|
|
<Link
|
|
href={router.asPath + "/" + subitem.subitem_id.slug}
|
|
key={subitem.subitem_id.id}
|
|
passHref
|
|
>
|
|
<div>
|
|
{subitem.subitem_id.thumbnail ? (
|
|
<Image
|
|
src={getAssetURL(subitem.subitem_id.thumbnail.id)}
|
|
alt={subitem.subitem_id.thumbnail.title}
|
|
width={subitem.subitem_id.thumbnail.width}
|
|
height={subitem.subitem_id.thumbnail.height}
|
|
/>
|
|
) : (
|
|
""
|
|
)}
|
|
</div>
|
|
</Link>
|
|
))}
|
|
</ContentPanel>
|
|
</>
|
|
);
|
|
}
|
|
|
|
export async function getStaticProps({ params }) {
|
|
return {
|
|
props: {
|
|
libraryItem: await getLibraryItem(params.slug),
|
|
},
|
|
};
|
|
}
|
|
|
|
export async function getStaticPaths() {
|
|
const paths = await getAllSlugs();
|
|
|
|
/*
|
|
paths.map((item) => {
|
|
console.log(item.params.slug);
|
|
});
|
|
*/
|
|
|
|
return {
|
|
paths,
|
|
fallback: false,
|
|
};
|
|
}
|
|
|
|
async function getAllSlugs() {
|
|
return (await getRecursiveSlugs()).map((item) => {
|
|
return {
|
|
params: {
|
|
slug: item,
|
|
},
|
|
};
|
|
});
|
|
}
|