feat: update dialog component to headlessui (#159)

src/views/components/injected/CourseCatalogInjectedPopup/CourseCatalogInjectedPopup.tsx

@@ -1,17 +1,17 @@
 import type { Course } from '@shared/types/Course';
 import type { UserSchedule } from '@shared/types/UserSchedule';
-import Popup from '@views/components/common/Popup/Popup';
+import type { DialogProps } from '@views/components/common/Dialog/Dialog';
+import Dialog from '@views/components/common/Dialog/Dialog';
 import React from 'react';
 
 import Description from './Description';
 import GradeDistribution from './GradeDistribution';
 import HeadingAndActions from './HeadingAndActions';
 
-interface CourseCatalogInjectedPopupProps {
+export type CourseCatalogInjectedPopupProps = DialogProps & {
     course: Course;
     activeSchedule: UserSchedule;
-    onClose: () => void;
-}
+};
 
 /**
  * CourseCatalogInjectedPopup component displays a popup with course details.
@@ -23,18 +23,17 @@ interface CourseCatalogInjectedPopupProps {
  * @param {Function} props.onClose - The function to close the popup.
  * @returns {JSX.Element} The CourseCatalogInjectedPopup component.
  */
-export default function CourseCatalogInjectedPopup({
-    course,
-    activeSchedule,
-    onClose,
-}: CourseCatalogInjectedPopupProps): JSX.Element {
+function CourseCatalogInjectedPopup({ course, activeSchedule, ...rest }: CourseCatalogInjectedPopupProps): JSX.Element {
+    const emptyRef = React.useRef<HTMLDivElement>(null);
+
     return (
-        <Popup overlay className='max-w-[780px] px-6' onClose={onClose}>
-            <div className='flex flex-col'>
-                <HeadingAndActions course={course} onClose={onClose} activeSchedule={activeSchedule} />
-                <Description course={course} />
-                <GradeDistribution course={course} />
-            </div>
-        </Popup>
+        <Dialog className='max-w-[780px] px-6' {...rest} initialFocus={emptyRef}>
+            <div className='hidden' ref={emptyRef} />
+            <HeadingAndActions course={course} onClose={rest.onClose as () => void} activeSchedule={activeSchedule} />
+            <Description course={course} />
+            <GradeDistribution course={course} />
+        </Dialog>
     );
 }
+
+export default React.memo(CourseCatalogInjectedPopup);