feat: add Options/Settings menu

src/pages/options/App.tsx

@@ -1,14 +1,16 @@
+import { Fragment } from 'react';
+import React from 'react';
 import ExtensionRoot from '@views/components/common/ExtensionRoot/ExtensionRoot';
 import Link from '@views/components/common/Link';
-import React from 'react';
+import Options from 'src/views/components/options/Options';
 
-/**
- *
- */
 export default function App() {
     return (
-        <ExtensionRoot>
-            <div className='text-base'>
+        <Fragment>
+            <ExtensionRoot className='h-full w-full'>
+                <Options />
+            </ExtensionRoot>
+            <div className='text-base fixed bottom-0 w-full'>
                 <div className='font-serif'>
                     <i>&ldquo;Real powerusers modify the sourcecode instead of using settings&rdquo;</i> - doprz
                 </div>
@@ -30,6 +32,6 @@ export default function App() {
                     {import.meta.env.VITE_BETA_BUILD ? 'beta' : ''}
                 </p>
             </div>
-        </ExtensionRoot>
+        </Fragment>
     );
 }

src/views/components/common/OptionsHeaderText.tsx

@@ -0,0 +1,24 @@
+import Text from '@views/components/common/Text/Text';
+import React from 'react';
+
+/**
+ * Props for ScheduleTotalHoursAndCourses
+ */
+export interface OptionsTextProps {
+    optionsPageName: string;
+}
+
+/**
+ * The ScheduleTotalHoursAndCourses as per the Labels and Details Figma section
+ *
+ * @param props ScheduleTotalHoursAndCoursesProps
+ */
+export default function OptionsText({ optionsPageName }: OptionsTextProps): JSX.Element {
+    return (
+        <div className='min-w-full w-0 flex items-center gap-2.5 whitespace-nowrap'>
+            <Text className='truncate text-ut-burntorange uppercase' variant='h1' as='span'>
+                {`${optionsPageName}`}
+            </Text>
+        </div>
+    );
+}

src/views/components/options/Options.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import OptionsHeader from './OptionsHeader';
+
+export default function Options(): JSX.Element {
+    return (
+        <div className='h-full w-full flex flex-col'>
+            <OptionsHeader />
+        </div>
+    );
+}

src/views/components/options/OptionsHeader.tsx

@@ -0,0 +1,27 @@
+import { Status } from '@shared/types/Course';
+import { Button } from '@views/components/common/Button';
+import CourseStatus from '@views/components/common/CourseStatus';
+import Divider from '@views/components/common/Divider';
+import { LargeLogo } from '@views/components/common/LogoIcon';
+import OptionsText from '@views/components/common/OptionsHeaderText';
+import React from 'react';
+import { LDIcon } from '../common/LDIcon';
+
+/**
+ * Renders the header component for the calendar.
+ * @returns The JSX element representing the calendar header.
+ */
+export default function OptionsHeader(): JSX.Element {
+    return (
+        <div className='flex items-center gap-5 border-b border-ut-offwhite px-7 py-4'>
+            <LargeLogo />
+            <Divider className='mx-2 self-center md:mx-4' size='2.5rem' orientation='vertical' />
+            <div className='flex-1 screenshot:transform-origin-left screenshot:scale-120'>
+                <OptionsText optionsPageName={'UTRP Settings & Credits Page'} />
+            </div>
+            <div className='hidden flex-row items-center justify-end gap-6 screenshot:hidden lg:flex'>
+                <LDIcon />
+            </div>
+        </div>
+    );
+}