fix: ConflictsWithWarning

src/views/components/common/ConflictsWithWarning/ConflictsWithWarning.tsx

@@ -1,43 +1,37 @@
 import React from 'react';
+import { Course } from 'src/shared/types/Course';
+import clsx from 'clsx';
 import Text from '../Text/Text';
 
 /**
  * Props for ConflictWithWarningProps
  */
 export interface ConflictsWithWarningProps {
-    ConflictingCourse: string;
-    SectionNumber: string;
+    className?: string;
+    conflicts: Course[];
 }
 
 /**
- * The ConflictsWithWarning component is used to display a warning message when a course conflicts 
+ * The ConflictsWithWarning component is used to display a warning message when a course conflicts
  * with another course as part of the labels and details section
  *
  * @param props ConflictsWithWarningProps
  */
-export default function ConflictsWithWarning( { ConflictingCourse, SectionNumber }: ConflictsWithWarningProps): JSX.Element {
-    const UniqueCourseConflictText = `${ConflictingCourse} (${SectionNumber})`;
-
-    return (
-        <div className="min-w-21 w-21 flex flex-col items-start gap-2.5 rounded bg-[#AF2E2D] p-2.5">
-            <ConflictsWithoutWarningText>
-               Conflicts With:
-            </ConflictsWithoutWarningText>
-            <ConflictsWithoutWarningText>
-                {UniqueCourseConflictText}
-            </ConflictsWithoutWarningText>
-        </div>
-    );
-}
-
-function ConflictsWithoutWarningText( {children}: {children: string} ) {
+export default function ConflictsWithWarning({ className, conflicts }: ConflictsWithWarningProps): JSX.Element {
     return (
         <Text
             variant='mini'
-            as='span'
-            className='text-white'
+            className={clsx(
+                className,
+                'min-w-21 w-21 flex flex-col items-start gap-2.5 rounded bg-[#AF2E2D] p-2.5 text-white'
+            )}
         >
-            {children}
+            <div>Conflicts With:</div>
+            {conflicts.map(course => (
+                <div>
+                    {`${course.department} ${course.number} (${course.uniqueId})`}
+                </div>
+            ))}
         </Text>
     );
 }