PopupMain UI integrated

src/stories/components/List.stories.tsx

@@ -9,7 +9,7 @@ import { test_colors } from './PopupCourseBlock.stories';
 
 const numberOfCourses = 5;
 
-const generateCourses = count => {
+export const generateCourses = count => {
     const courses = [];
 
     for (let i = 0; i < count; i++) {
@@ -64,7 +64,7 @@ const generateCourses = count => {
 const exampleCourses = generateCourses(numberOfCourses);
 const generateCourseBlocks = (exampleCourses, colors) =>
     exampleCourses.map((course, i) => <PopupCourseBlock key={course.uniqueId} course={course} colors={colors[i]} />);
-const exampleCourseBlocks = generateCourseBlocks(exampleCourses, test_colors);
+export const exampleCourseBlocks = generateCourseBlocks(exampleCourses, test_colors);
 
 const meta = {
     title: 'Components/Common/List',

src/stories/components/PopupMain.stories.tsx

@@ -1,5 +1,5 @@
 import { Meta, StoryObj } from '@storybook/react';
-import PopupMain from 'src/views/components/PopupMain';
+import PopupMain from '@views/components/PopupMain';
 
 const meta = {
     title: 'Components/Common/PopupMain',

src/views/components/PopupMain.tsx

@@ -7,47 +7,10 @@ import Text from './common/Text/Text';
 import Divider from './common/Divider/Divider';
 import logoImage from '../../assets/logo.png'; // Adjust the path as necessary
 import List from './common/List/List'; // Ensure this path is correctly pointing to your List component
-
+import { generateCourses } from 'src/stories/components/List.stories';
-
 
 export default function PopupMain() {
-   const courses = [
+   const courses = generateCourses(5); 
-       {
-           uniqueId: '47280',
-           department: 'BIO',
-           number: '311C',
-           instructors: [{ lastName: 'Fritz' }],
-           status: 'OPEN',
-       },
-       {
-           uniqueId: '51180',
-           department: 'C S',
-           number: '374L',
-           instructors: [{ lastName: 'Baer' }],
-           status: 'CLOSED',
-       },
-       {
-           uniqueId: '60020',
-           department: 'S W',
-           number: '310',
-           instructors: [{ lastName: 'Whalley' }],
-           status: 'WAITLISTED',
-       },
-       {
-           uniqueId: '13190',
-           department: 'PED',
-           number: '106C',
-           instructors: [{ lastName: 'Rich' }],
-           status: 'CANCELLED',
-       },
-       {
-           uniqueId: '44435',
-           department: 'WGS',
-           number: '301',
-           instructors: [{ lastName: 'RODRIGUEZ' }],
-           status: 'TEMP',
-       },
-   ];
 
 
    // Manually applying colors for the demonstration