From e78f985a120301f95238a3be89892bf8c6e27391 Mon Sep 17 00:00:00 2001
From: Brandon Egger <brandonegger64@gmail.com>
Date: Wed, 29 Mar 2023 00:31:53 -0500
Subject: [PATCH] add additional hardware flag in resource and table view

---
 src/components/ResourceTable.tsx | 28 +++++++++++++++++++---------
 src/pages/resources/[id].tsx     |  8 +++-----
 2 files changed, 22 insertions(+), 14 deletions(-)

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>