brandon/uiowaATR
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

add additional hardware flag in resource and table view

Browse Source
This commit is contained in:
Brandon Egger 2023-03-29 00:31:53 -05:00
parent 54eff320bf
commit e78f985a12
2 changed files with 22 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
src/components/ResourceTable.tsx
View File

@ -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 { CurrencyDollarIcon, ArrowPathRoundedSquareIcon } from '@heroicons/react/24/solid';
import { ClipboardDocumentListIcon } from '@heroicons/react/24/outline'; import { ClipboardDocumentListIcon } from '@heroicons/react/24/outline';
import Image from 'next/image'; import Image from 'next/image';
@ -78,15 +78,25 @@ export const ResourceInfo = ({resource, showMoreInfo}: {resource: AuditoryResour
) )
} }
const ResourceEntry = ({resource}: {resource: AuditoryResource}) => { export const ResourceDescription = ({manufacturer, description}: {manufacturer: null | Manufacturer, description: string}) => {
const ResourceDescription = ({description}: {description: string}) => { return (
return ( <div className="flex flex-col">
<div className="flex flex-col p-2"> <div className="p-2">
<p>{description}</p> <p>{description}</p>
</div> </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 ResourceSkills = ({skills, skillLevels}: {skills: Skill[], skillLevels: SkillLevel[]}) => {
const SkillRanking = ({skillLevels}: {skillLevels: SkillLevel[]}) => { const SkillRanking = ({skillLevels}: {skillLevels: SkillLevel[]}) => {
return ( return (
@ -148,7 +158,7 @@ const ResourceEntry = ({resource}: {resource: AuditoryResource}) => {
<ResourceSkills skills={resource.skills} skillLevels={resource.skill_levels} /> <ResourceSkills skills={resource.skills} skillLevels={resource.skill_levels} />
</td> </td>
<td className="align-top hidden sm:table-cell"> <td className="align-top hidden sm:table-cell">
<ResourceDescription description={resource.description} /> <ResourceDescription manufacturer={resource.manufacturer} description={resource.description} />
</td> </td>
</tr> </tr>
) )

8
src/pages/resources/[id].tsx
View File

@ -4,7 +4,7 @@ import { createProxySSGHelpers } from '@trpc/react-query/ssg';
import { appRouter } from "~/server/api/root"; import { appRouter } from "~/server/api/root";
import { prisma } from "~/server/db"; import { prisma } from "~/server/db";
import { api } from "~/utils/api"; import { api } from "~/utils/api";
import { ResourceInfo } from "~/components/ResourceTable"; import { ResourceDescription, ResourceInfo } from "~/components/ResourceTable";
import { type PlatformLink } from "@prisma/client"; import { type PlatformLink } from "@prisma/client";
import Image from 'next/image'; import Image from 'next/image';
import Link from "next/link"; import Link from "next/link";
@ -125,10 +125,8 @@ const ResourceViewPage = (props: InferGetStaticPropsType<typeof getStaticProps>)
</div> </div>
<div className="flex pb-5 flex-col justify-left"> <div className="flex pb-5 flex-col justify-left">
<ResourceInfo resource={resourceQuery.data} /> <ResourceInfo resource={resourceQuery.data} />
<div className="mx-4 text-left border border-neutral-400 rounded-xl p-4 bg-neutral-200 shadow"> <div className="mx-4 text-left border border-neutral-400 rounded-xl overflow-hidden bg-neutral-200 shadow">
<p> <ResourceDescription manufacturer={resourceQuery.data.manufacturer} description={resourceQuery.data.description} />
{resourceQuery.data.description}
</p>
</div> </div>
<div className="ml-4 mt-4 mr-auto border-2 border-neutral-900 rounded-lg bg-neutral-600"> <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> <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>