Merge branch 'ConflictsWithWarningComponent' into hackathon

src/stories/components/ConflictsWithWarning.stories.tsx

@@ -0,0 +1,25 @@
+import { Meta, StoryObj } from '@storybook/react';
+import ConflictsWithWarning from '@views/components/common/ConflictsWithWarning/ConflictsWithWarning';
+
+const meta = {
+    title: 'Components/Common/ConflictsWithWarning',
+    component: ConflictsWithWarning,
+    parameters: {
+        layout: 'centered',
+    },
+    tags: ['autodocs'],
+    argTypes: {
+        ConflictingCourse: { control: 'string' },
+        SectionNumber: { control: 'string' },
+    },
+} satisfies Meta<typeof ConflictsWithWarning>;
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+    args: {
+        ConflictingCourse: 'BVO 311C',
+        SectionNumber: '47280',
+    },
+};

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

@@ -0,0 +1,43 @@
+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="flex w-21 min-w-21 p-2.5 flex-col items-start gap-2.5 rounded bg-[#AF2E2D]">
+            <ConflictsWithoutWarningText>
+               Conflicts With:
+            </ConflictsWithoutWarningText>
+            <ConflictsWithoutWarningText>
+                {UniqueCourseConflictText}
+            </ConflictsWithoutWarningText>
+        </div>
+    );
+}
+
+function ConflictsWithoutWarningText( {children}: {children: string} ) {
+    return (
+        <Text
+            variant='mini'
+            as='span'
+            className='text-white'
+        >
+            {children}
+        </Text>
+    );
+}