141 lines
4.1 KiB
TypeScript
141 lines
4.1 KiB
TypeScript
import { type InferGetStaticPropsType, type GetStaticPropsContext } from "next";
|
|
import { GlobeAltIcon, DocumentIcon } from '@heroicons/react/24/solid';
|
|
import { createProxySSGHelpers } from '@trpc/react-query/ssg';
|
|
import { appRouter } from "~/server/api/root";
|
|
import { prisma } from "~/server/db";
|
|
import { api } from "~/utils/api";
|
|
import { ResourceInfo } from "~/components/ResourceTable";
|
|
import { type PlatformLink } from "@prisma/client";
|
|
import Image from 'next/image';
|
|
import Link from "next/link";
|
|
|
|
export const getStaticPaths = async () => {
|
|
const resources = (await prisma.auditoryResource.findMany({
|
|
select: {
|
|
id: true,
|
|
}
|
|
}));
|
|
|
|
return {
|
|
paths: resources.map((resource) => ({
|
|
params: {
|
|
id: resource.id,
|
|
}
|
|
})),
|
|
fallback: 'blocking',
|
|
}
|
|
};
|
|
|
|
export async function getStaticProps(
|
|
context: GetStaticPropsContext<{ id: string }>,
|
|
) {
|
|
const ssg = createProxySSGHelpers({
|
|
router: appRouter,
|
|
ctx: {
|
|
prisma,
|
|
session: null,
|
|
},
|
|
});
|
|
const id = context.params?.id as string;
|
|
|
|
await ssg.auditoryResource.byId.prefetch({id});
|
|
|
|
return {
|
|
props: {
|
|
trpcState: ssg.dehydrate(),
|
|
id,
|
|
},
|
|
revalidate: 1,
|
|
};
|
|
}
|
|
|
|
const PlatformLinkButton = ({platformLink}: {platformLink: PlatformLink}) => {
|
|
const Inner = () => {
|
|
switch (platformLink.platform) {
|
|
case "APP_ANDROID": {
|
|
return (
|
|
<Image className="w-full" src={`/google-play-badge.png`} alt={`Download on the Apple AppStore`} width={512} height={216}/>
|
|
)
|
|
}
|
|
case "APP_IOS": {
|
|
return (
|
|
<Image className="w-full" src={`/app-store-badge.png`} alt={`Download on the Apple AppStore`} width={512} height={216}/>
|
|
)
|
|
}
|
|
case "PDF": {
|
|
return (
|
|
<div className="hover:bg-amber-200 bg-amber-300 border-2 px-2 h-16 align-middle border-neutral-900 rounded-lg flex flex-row space-x-2">
|
|
<DocumentIcon className="w-6" />
|
|
<span className="font-bold text-sm my-auto">
|
|
Document
|
|
</span>
|
|
</div>
|
|
)
|
|
}
|
|
case "WEBSITE": {
|
|
return (
|
|
<div className="hover:bg-amber-200 bg-amber-300 border-2 px-2 h-14 align-middle border-neutral-900 rounded-lg flex flex-row space-x-2">
|
|
<GlobeAltIcon className="w-6" />
|
|
<span className="font-bold text-sm my-auto">
|
|
Website
|
|
</span>
|
|
</div>
|
|
)
|
|
}
|
|
}
|
|
}
|
|
|
|
return (
|
|
<Link href={platformLink.link} target="_blank" rel="noopener noreferrer">
|
|
<Inner />
|
|
</Link>
|
|
)
|
|
}
|
|
|
|
const DownloadButtons = ({platformLinks}: {platformLinks: PlatformLink[]}) => {
|
|
const buttons = platformLinks.map((paltformLink, index) => {
|
|
return (
|
|
<PlatformLinkButton key={index} platformLink={paltformLink} />
|
|
)
|
|
});
|
|
|
|
return (
|
|
<div className="w-48 mx-auto flex flex-col space-y-2">
|
|
{buttons}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
const ResourceViewPage = (props: InferGetStaticPropsType<typeof getStaticProps>) => {
|
|
const { id } = props;
|
|
const resourceQuery = api.auditoryResource.byId.useQuery({ id });
|
|
|
|
if (!resourceQuery.data) {
|
|
return <>
|
|
</>
|
|
}
|
|
|
|
return <>
|
|
<div className="flex py-4 flex-col flex-col-reverse sm:flex-row divide-x max-w-2xl mx-auto">
|
|
<div className="text-lg flex flex-col justify-end font-bold my-5 mr-4">
|
|
<div className="mx-4">
|
|
<h1 className="border-b mb-2 border-neutral-400">Links</h1>
|
|
<DownloadButtons platformLinks={resourceQuery.data.platform_links} />
|
|
</div>
|
|
</div>
|
|
<div className="flex pb-5 flex-col justify-left">
|
|
<ResourceInfo resource={resourceQuery.data} />
|
|
<div className="mx-4 text-left border border-neutral-400 rounded-xl p-4 bg-neutral-200 shadow">
|
|
<p>
|
|
{resourceQuery.data.description}
|
|
</p>
|
|
</div>
|
|
<div className="ml-4 mt-4 mr-auto border-2 border-neutral-900 rounded-lg bg-neutral-600">
|
|
<span className="text-neutral-200 text-sm px-2 py-2">Ages {resourceQuery.data.ages.min}{resourceQuery.data.ages.max >= 100 ? "+" : `-${resourceQuery.data.ages.max}`}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</>
|
|
};
|
|
|
|
export default ResourceViewPage |