44 lines
1.2 KiB
TypeScript
44 lines
1.2 KiB
TypeScript
import React from 'react';
|
|
import Text from '../Text/Text';
|
|
|
|
/**
|
|
* Props for ConflictWithWarningProps
|
|
*/
|
|
export interface ConflictsWithWarningProps {
|
|
ConflictingCourse: string;
|
|
SectionNumber: string;
|
|
}
|
|
|
|
/**
|
|
* 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} ) {
|
|
return (
|
|
<Text
|
|
variant='mini'
|
|
as='span'
|
|
className='text-white'
|
|
>
|
|
{children}
|
|
</Text>
|
|
);
|
|
}
|