Merge branch 'UT-Developers:main' into master

src/stories/components/CourseStatus.stories.tsx

@@ -0,0 +1,48 @@
+import React from 'react';
+
+import { Status } from '@shared/types/Course';
+import { Meta, StoryObj } from '@storybook/react';
+import CourseStatus from '@views/components/common/CourseStatus/CourseStatus';
+
+const meta = {
+    title: 'Components/Common/CourseStatus',
+    component: CourseStatus,
+    parameters: {
+        layout: 'centered',
+    },
+    tags: ['autodocs'],
+    args: {
+        status: Status.WAITLISTED,
+        size: 'small',
+    },
+    argTypes: {
+        status: {
+            options: Object.values(Status),
+            mapping: Object.values(Status),
+            control: {
+                type: 'select',
+                labels: Object.keys(Status),
+            },
+        },
+        size: {
+            options: ['small', 'mini'],
+            control: {
+                type: 'radio',
+            },
+        },
+    },
+} satisfies Meta<typeof CourseStatus>;
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+
+export const Variants: Story = {
+    render: args => (
+        <div className='flex flex-col gap-4 items-center'>
+            <CourseStatus {...args} size='small' />
+            <CourseStatus {...args} size='mini' />
+        </div>
+    ),
+};

src/views/components/common/CourseStatus/CourseStatus.tsx

@@ -0,0 +1,36 @@
+import { Status } from '@shared/types/Course';
+import { StatusIcon } from '@shared/util/icons';
+import clsx from 'clsx';
+import React from 'react';
+import Text from '../Text/Text';
+
+type SizeType = 'small' | 'mini';
+
+/**
+ * Props for CourseStatus
+ */
+export interface CourseStatusProps {
+    status: Status;
+    size: SizeType;
+}
+
+/**
+ * The CourseStatus component as per the Labels and Details Figma section
+ *
+ * @param props CourseStatusProps
+ */
+export default function CourseStatus({ status, size }: CourseStatusProps): JSX.Element {
+    const statusIconSizeClass = clsx({
+        'h-5 w-5': size === 'small',
+        'h-4 w-4': size === 'mini',
+    });
+
+    return (
+        <div className={`inline-flex items-center ${size === 'small' ? 'gap-2' : 'gap-1.5'}`}>
+            <div className='ml-1 flex items-center justify-center rounded bg-slate-700 p-1px text-white'>
+                <StatusIcon status={status} className={statusIconSizeClass} />
+            </div>
+            <Text variant={size}>{status}</Text>
+        </div>
+    );
+}