Link component, Card component, Course Popup component styling, and wrangling with the serialization type"

src/views/components/common/Link/Link.module.scss

@@ -0,0 +1,5 @@
+.link {
+    font-family: 'Inter', sans-serif;
+    text-decoration: underline;
+    cursor: pointer;
+}

src/views/components/common/Link/Link.tsx

@@ -0,0 +1,25 @@
+import classNames from 'classnames';
+import React, { PropsWithChildren } from 'react';
+import { bMessenger } from 'src/shared/messages';
+import Text, { TextProps } from '../Text/Text';
+import styles from './Link.module.scss';
+
+type Props = TextProps & {
+    url?: string;
+};
+
+/**
+ * A reusable Text component with props that build on top of the design system for the extension
+ */
+export default function Link(props: PropsWithChildren<Props>) {
+    let passedProps = {
+        ...props,
+    };
+    const { url } = props;
+
+    if (url && !props.onClick) {
+        passedProps.onClick = () => bMessenger.openNewTab({ url });
+    }
+
+    return <Text {...passedProps} className={classNames(styles.link, props.className)} />;
+}