Added more fields to the course list display

pookmish · Mar 13, 2024 · 4712aa0 · 4712aa0
1 parent b765c74
commit 4712aa0
Showing 1 changed file with 25 additions and 9 deletions.
diff --git a/src/components/nodes/list-item/stanford-course/stanford-course-list-item.tsx b/src/components/nodes/list-item/stanford-course/stanford-course-list-item.tsx
@@ -10,24 +10,40 @@ type Props = HtmlHTMLAttributes<HTMLDivElement> & {
 
 const StanfordCourseListItem = ({node, headingLevel, ...props}: Props) => {
   const Heading = headingLevel === 'h3' ? H3 : H2;
+  const body = node.body?.processed.replace(/<\/?[^>]+(>|$)/g, ' ').replace(/ +/, ' ').replace('&nbsp;', ' ').split(' ');
+
   return (
     <article
-      aria-labelledby={node.id}
       {...props}
+      aria-labelledby={node.id}
     >
-      <Heading className="text-m2" id={node.id}>
-        <Link href={node.path}>
-          {node.title}
-        </Link>
-      </Heading>
+      <div className="flex flex-col">
+        <Heading className="text-m2 order-last" id={node.id}>
+          <Link href={node.path}>
+            {node.title}
+          </Link>
+        </Heading>
+
+        <div>
+          {(node.suCourseSubject?.name || node.suCourseCode) &&
+            <strong>{node.suCourseSubject?.name}{node.suCourseCode}</strong>
+          }
+
+          {((node.suCourseSubject || node.suCourseCode) && (node.suCourseQuarters || node.suCourseAcademicYear)) && <>&nbsp;|&nbsp;</>}
+
+          {node.suCourseAcademicYear} {node.suCourseQuarters?.map(quarter => quarter.name).join(', ')}
+        </div>
+      </div>
+
       {node.suCourseInstructors &&
         <div>
           <span className="font-bold">Instructor{node.suCourseInstructors.length > 1 ? "s" : ""}: </span>
-          {node.suCourseInstructors.map((instructor, i) =>
-            <span key={`${node.id}-instructor-${i}`}>{instructor}</span>
-          )}
+          {node.suCourseInstructors.join(',')}
         </div>
+      }
 
+      {body &&
+        <p>{body.slice(0, 50).join(' ')}{body.length > 50 && <>&hellip;</>}</p>
       }
     </article>
   )