diff --git a/src/components/ResourceTable.tsx b/src/components/ResourceTable.tsx index e420cb0..d65f04f 100644 --- a/src/components/ResourceTable.tsx +++ b/src/components/ResourceTable.tsx @@ -1,4 +1,4 @@ -import { type Platform, type PaymentType, type AuditoryResource, type Skill, type SkillLevel } from '@prisma/client'; +import { type PlatformLink, type PaymentType, type AuditoryResource, type Skill, type SkillLevel } from '@prisma/client'; import { CurrencyDollarIcon, ArrowPathRoundedSquareIcon } from '@heroicons/react/24/solid'; import { ClipboardDocumentListIcon } from '@heroicons/react/24/outline'; import Image from 'next/image'; @@ -17,9 +17,9 @@ const ResourceEntry = ({resource}: {resource: AuditoryResource}) => { ) } - const PlatformInfo = ({platforms}: {platforms: Platform[]}) => { - const platformsStr = platforms.map((platform) => { - return translateEnumPlatform(platform); + const PlatformInfo = ({platformLinks}: {platformLinks: PlatformLink[]}) => { + const platformsStr = platformLinks.map((platformLink) => { + return translateEnumPlatform(platformLink.platform); }).join(', '); return ( @@ -32,7 +32,7 @@ const ResourceEntry = ({resource}: {resource: AuditoryResource}) => { <div className="h-full my-auto"> <Link href="https://google.com"> <div className="w-20 sm:w-28 flex space-y-2 flex-col justify-center"> - <Image className="w-full rounded-xl drop-shadow-lg border border-neutral-400" src="/resource_logos/word_success.png" alt="Word Success logo" width={512} height={512}/> + <Image className="w-full rounded-xl drop-shadow-lg border border-neutral-400" src={resource.icon} alt={`${resource.name} logo`} width={512} height={512}/> <span className="block bg-neutral-900 hover:bg-neutral-500 border border-neutral-900 text-center py-[1px] text-white rounded-lg"> more info @@ -44,7 +44,7 @@ const ResourceEntry = ({resource}: {resource: AuditoryResource}) => { <div className=""> <h2 className="text-xs italic text-gray-600">{resource.manufacturer}</h2> <h1 className="font-bold text-xl">{resource.name}</h1> - <PlatformInfo platforms={resource.platforms}/> + <PlatformInfo platformLinks={resource.platform_links}/> <PriceIcons type={resource?.payment_options[0] ?? 'FREE'} /> </div> </div> diff --git a/src/pages/resources/[id].tsx b/src/pages/resources/[id].tsx new file mode 100644 index 0000000..9e0b814 --- /dev/null +++ b/src/pages/resources/[id].tsx @@ -0,0 +1,17 @@ +// GOOD TUTORIAL + +export default function Resource() { + return ( + <> + Hello + </> + ); + } + +export async function getStaticPaths() { + // Return a list of possible value for id +} + +export async function getStaticProps({ params }) { + // Fetch necessary data for the blog post using params.id +}