diff --git a/src/components/ResourceTable.tsx b/src/components/ResourceTable.tsx index 79197ad..636ced6 100644 --- a/src/components/ResourceTable.tsx +++ b/src/components/ResourceTable.tsx @@ -1,4 +1,4 @@ -import { type PlatformLink, type PaymentType, type AuditoryResource, type Skill, type SkillLevel } from '@prisma/client'; +import { type PlatformLink, type PaymentType, type AuditoryResource, type Skill, type SkillLevel, Manufacturer } from '@prisma/client'; import { CurrencyDollarIcon, ArrowPathRoundedSquareIcon } from '@heroicons/react/24/solid'; import { ClipboardDocumentListIcon } from '@heroicons/react/24/outline'; import Image from 'next/image'; @@ -78,15 +78,25 @@ export const ResourceInfo = ({resource, showMoreInfo}: {resource: AuditoryResour ) } -const ResourceEntry = ({resource}: {resource: AuditoryResource}) => { - const ResourceDescription = ({description}: {description: string}) => { - return ( - <div className="flex flex-col p-2"> +export const ResourceDescription = ({manufacturer, description}: {manufacturer: null | Manufacturer, description: string}) => { + return ( + <div className="flex flex-col"> + <div className="p-2"> <p>{description}</p> </div> - ) - } - + { manufacturer?.required ? + <div className="bg-neutral-600 border-t-[2px] border-neutral-700 p-2"> + <h3 className="text-sm font-bold text-neutral-100">IMPORTANT</h3> + <p className="text-sm text-neutral-300"> + This resource requires additional hardware from the manufacturer. + </p> + </div> + : undefined} + </div> + ) +} + +const ResourceEntry = ({resource}: {resource: AuditoryResource}) => { const ResourceSkills = ({skills, skillLevels}: {skills: Skill[], skillLevels: SkillLevel[]}) => { const SkillRanking = ({skillLevels}: {skillLevels: SkillLevel[]}) => { return ( @@ -148,7 +158,7 @@ const ResourceEntry = ({resource}: {resource: AuditoryResource}) => { <ResourceSkills skills={resource.skills} skillLevels={resource.skill_levels} /> </td> <td className="align-top hidden sm:table-cell"> - <ResourceDescription description={resource.description} /> + <ResourceDescription manufacturer={resource.manufacturer} description={resource.description} /> </td> </tr> ) diff --git a/src/pages/resources/[id].tsx b/src/pages/resources/[id].tsx index 5f9b1b3..fb3b71b 100644 --- a/src/pages/resources/[id].tsx +++ b/src/pages/resources/[id].tsx @@ -4,7 +4,7 @@ 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 { ResourceDescription, ResourceInfo } from "~/components/ResourceTable"; import { type PlatformLink } from "@prisma/client"; import Image from 'next/image'; import Link from "next/link"; @@ -125,10 +125,8 @@ const ResourceViewPage = (props: InferGetStaticPropsType<typeof getStaticProps>) </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 className="mx-4 text-left border border-neutral-400 rounded-xl overflow-hidden bg-neutral-200 shadow"> + <ResourceDescription manufacturer={resourceQuery.data.manufacturer} description={resourceQuery.data.description} /> </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>