feat: migration update showing (#293)

* feat: update component!!!

* feat: made stories

* feat: whoops named props wrong

* feat: props for stories

* style: text styling

* feat: an underline

* feat: key change

* chore: small ui and arg updates

* chore: fix lint, format, and jsdoc

---------

Co-authored-by: doprz <52579214+doprz@users.noreply.github.com>

src/stories/components/UpdateText.stories.tsx

@@ -0,0 +1,32 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import type { UpdateTextProps } from '@views/components/common/UpdateText';
+import UpdateText from '@views/components/common/UpdateText';
+import React from 'react';
+
+const meta = {
+    title: 'Components/Common/UpdateText',
+    component: UpdateText,
+    parameters: {
+        layout: 'centered',
+    },
+    tags: ['autodocs'],
+    argTypes: {
+        courses: { control: 'object' },
+    },
+} satisfies Meta<typeof UpdateText>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+const Template = (args: React.JSX.IntrinsicAttributes & UpdateTextProps) => <UpdateText {...args} />;
+
+export const Default: Story = {
+    render: Template,
+    args: {
+        courses: ['12345', '23456', '34567', '45678', '56789'],
+    },
+};
+Default.args = {
+    courses: ['12345', '23456', '34567', '45678', '56789'],
+};

src/views/components/common/UpdateText.tsx

@@ -0,0 +1,40 @@
+import Text from '@views/components/common/Text/Text';
+import React from 'react';
+
+/**
+ * Props for the Update Text
+ */
+export type UpdateTextProps = {
+    courses: string[];
+};
+
+/**
+ * UpdateText component displays a message indicating that the extension has been updated
+ * and lists the unique course numbers from the old version.
+ *
+ * @param props - The properties object.
+ * @param props.courses - An array of course unique numbers to be displayed.
+ * @returns The rendered UpdateText component.
+ */
+export default function UpdateText({ courses }: UpdateTextProps): JSX.Element {
+    return (
+        <div className='max-w-64 flex flex-col justify-center gap-2'>
+            <div className='flex flex-col gap-0 text-center'>
+                <Text variant='h4' className='text-ut-burntorange'>
+                    This extension has updated!
+                </Text>
+                <Text variant='p' className='text-ut-black'>
+                    You may have already began planning your Spring 2025 schedule. Here are the Unique Numbers you had
+                    from the old version: (Please open each link and re-add course to your new schedule)
+                </Text>
+            </div>
+            <div className='flex flex-col gap-1 text-center'>
+                {courses.map(course => (
+                    <Text key={course} variant='p' className='text-ut-orange underline'>
+                        {course}
+                    </Text>
+                ))}
+            </div>
+        </div>
+    );
+}