feat: add CalendarHeader and its Storybook, need to resize

src/stories/components/CalendarGrid.stories.tsx

@@ -2,24 +2,17 @@ import { Meta, StoryObj } from '@storybook/react';
 import CalendarGrid from 'src/views/components/common/CalendarGrid/CalendarGrid';
 
 const meta = {
-    title: 'Components/Common/CalendarGrid',
-    component: CalendarGrid,
+    title: 'Components/Common/Calendar',
+    component: Calendar,
     parameters: {
+        // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
         layout: 'centered',
+        tags: ['autodocs'],
     },
-    tags: ['autodocs'],
-    argTypes: {
-        saturday: { control: 'text' },
-        sunday: { control: 'text' },
-    },
-} satisfies Meta<typeof CalendarGrid>;
+} satisfies Meta<typeof Calendar>;
+
 export default meta;
 
 type Story = StoryObj<typeof meta>;
 
-export const Default: Story = {
-    args: {
-        saturday: true,
-        sunday: true,
-    },
-};
+export const Default: Story = {};

src/stories/components/CalendarHeader.stories.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import { Meta, StoryObj } from '@storybook/react';
+import CalendarHeader from '@views/components/common/CalendarHeader/CalenderHeader';
+
+const meta = {
+    title: 'Components/CalendarHeader',
+    component: CalendarHeader,
+    parameters: {
+        layout: 'centered',
+    },
+    tags: ['autodocs'],
+} satisfies Meta<typeof CalendarHeader>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};

src/views/components/common/CalendarHeader/CalenderHeader.tsx

@@ -0,0 +1,53 @@
+import React from 'react';
+import { Status } from '@shared/types/Course';
+import Divider from '../Divider/Divider';
+import { Button } from '../Button/Button';
+import Text from '../Text/Text';
+import MenuIcon from '~icons/material-symbols/menu';
+import LogoIcon from '~icons/material-symbols/add-circle-outline';
+import UndoIcon from '~icons/material-symbols/undo';
+import RedoIcon from '~icons/material-symbols/redo';
+import SettingsIcon from '~icons/material-symbols/settings';
+import ScheduleTotalHoursAndCourses from '../ScheduleTotalHoursAndCourses/ScheduleTotalHoursAndCourses';
+import CourseStatus from '../CourseStatus/CourseStatus';
+
+const CalendarHeader = () => (
+    <div
+        style={{
+            display: 'flex',
+            minWidth: '672px',
+            minHeight: '79px',
+            padding: '15px 0px',
+            justifyContent: 'space-between',
+            alignItems: 'center',
+            alignContent: 'center',
+            rowGap: '10px',
+            alignSelf: 'stretch',
+            flexWrap: 'wrap',
+        }}
+    >
+        <Button variant='single' icon={MenuIcon} color='ut-gray' />
+
+        <div style={{ display: 'flex', alignItems: 'center' }}>
+            <LogoIcon style={{ marginRight: '5px' }} />
+            <Text>Your Logo Text</Text>
+        </div>
+
+        <ScheduleTotalHoursAndCourses scheduleName='SCHEDULE' totalHours={22} totalCourses={8} />
+
+        <CourseStatus size='small' status={Status.WAITLISTED} />
+        <CourseStatus size='small' status={Status.CLOSED} />
+        <CourseStatus size='small' status={Status.CANCELLED} />
+
+        <div style={{ display: 'flex' }}>
+            <Button variant='outline' icon={UndoIcon} color='ut-black' />
+            <Button variant='outline' icon={RedoIcon} color='ut-black' />
+        </div>
+
+        <Button variant='outline' icon={SettingsIcon} color='ut-black' />
+
+        <Divider type='solid' />
+    </div>
+);
+
+export default CalendarHeader;

src/views/components/common/ScheduleTotalHoursAndCourses/ScheduleTotalHoursAndCourses.tsx

@@ -15,27 +15,19 @@ export interface ScheduleTotalHoursAndCoursesProps {
  *
  * @param props ScheduleTotalHoursAndCoursesProps
  */
-export default function ScheduleTotalHoursAndCoursess({ scheduleName, totalHours, totalCourses }: ScheduleTotalHoursAndCoursesProps): JSX.Element {
+export default function ScheduleTotalHoursAndCourses({
+    scheduleName,
+    totalHours,
+    totalCourses,
+}: ScheduleTotalHoursAndCoursesProps): JSX.Element {
     return (
-        <div className="min-w-64 flex flex-wrap content-center items-baseline gap-2 uppercase">
-            <Text
-                className="text-[#BF5700]"
-                variant='h1'
-                as='span'
-            >
+        <div className='min-w-64 flex flex-wrap content-center items-baseline gap-2 uppercase'>
+            <Text className='text-[#BF5700]' variant='h1' as='span'>
                 {`${scheduleName}: `}
             </Text>
-            <Text
-                variant='h3'
-                as='div'
-                className="flex flex-row items-center gap-2 text-[#1A2024]"
-            >
+            <Text variant='h3' as='div' className='flex flex-row items-center gap-2 text-[#1A2024]'>
                 {`${totalHours} HOURS`}
-                <Text
-                    variant='h4'
-                    as='span'
-                    className="text-[#333F48]"
-                >
+                <Text variant='h4' as='span' className='text-[#333F48]'>
                     {`${totalCourses} courses`}
                 </Text>
             </Text>