feat: about page initial version

Adding something to the about page for now, including the app version to better know what versions
of the app people are running

src/components/Common/List/index.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import { withProperties } from '../../../utils/typeHelpers';
+
+interface ListItemProps {
+  title: string;
+}
+
+const ListItem: React.FC<ListItemProps> = ({ title, children }) => {
+  return (
+    <div className="py-4 sm:py-5 sm:grid sm:grid-cols-3 sm:gap-4">
+      <dt className="text-sm font-medium text-gray-200">{title}</dt>
+      <dd className="mt-1 flex text-sm text-gray-400 sm:mt-0 sm:col-span-2">
+        <span className="flex-grow">{children}</span>
+      </dd>
+    </div>
+  );
+};
+
+interface ListProps {
+  title: string;
+  subTitle?: string;
+}
+
+const List: React.FC<ListProps> = ({ title, subTitle, children }) => {
+  return (
+    <>
+      <div>
+        <h3 className="text-lg leading-6 font-medium text-gray-100">{title}</h3>
+        {subTitle && (
+          <p className="mt-1 max-w-2xl text-sm text-gray-300">{subTitle}</p>
+        )}
+      </div>
+      <div className="mt-5 border-t border-gray-800">
+        <dl className="divide-y divide-gray-800">{children}</dl>
+      </div>
+    </>
+  );
+};
+
+export default withProperties(List, { Item: ListItem });

src/components/Settings/SettingsAbout/index.tsx

@@ -0,0 +1,67 @@
+import React from 'react';
+import useSWR from 'swr';
+import Error from '../../../pages/_error';
+import List from '../../Common/List';
+import LoadingSpinner from '../../Common/LoadingSpinner';
+import { SettingsAboutResponse } from '../../../../server/interfaces/api/settingsInterfaces';
+import { FormattedNumber } from 'react-intl';
+
+const SettingsAbout: React.FC = () => {
+  const { data, error } = useSWR<SettingsAboutResponse>(
+    '/api/v1/settings/about'
+  );
+
+  if (error) {
+    return <Error statusCode={500} />;
+  }
+
+  if (!data && !error) {
+    return <LoadingSpinner />;
+  }
+
+  if (!data) {
+    return <LoadingSpinner />;
+  }
+
+  return (
+    <>
+      <div className="mb-8">
+        <List title="Overseerr Information">
+          <List.Item title="Version">{data.version}</List.Item>
+          <List.Item title="Total Media">
+            <FormattedNumber value={data.totalMediaItems} />
+          </List.Item>
+          <List.Item title="Total Requests">
+            <FormattedNumber value={data.totalRequests} />
+          </List.Item>
+        </List>
+      </div>
+      <div className="mb-8">
+        <List title="Getting Support">
+          <List.Item title="GitHub Discussions">
+            <a
+              href="https://github.com/sct/overseerr/discussions"
+              target="_blank"
+              rel="noreferrer"
+              className="text-indigo-500 hover:underline"
+            >
+              https://github.com/sct/overseerr/discussions
+            </a>
+          </List.Item>
+          <List.Item title="Discord">
+            <a
+              href="https://discord.gg/PkCWJSeCk7"
+              target="_blank"
+              rel="noreferrer"
+              className="text-indigo-500 hover:underline"
+            >
+              Click here to join our Discord server.
+            </a>
+          </List.Item>
+        </List>
+      </div>
+    </>
+  );
+};
+
+export default SettingsAbout;

src/pages/settings/about.tsx

@@ -0,0 +1,17 @@
+import { NextPage } from 'next';
+import React from 'react';
+import SettingsAbout from '../../components/Settings/SettingsAbout';
+import SettingsLayout from '../../components/Settings/SettingsLayout';
+import useRouteGuard from '../../hooks/useRouteGuard';
+import { Permission } from '../../hooks/useUser';
+
+const SettingsAboutPage: NextPage = () => {
+  useRouteGuard(Permission.MANAGE_SETTINGS);
+  return (
+    <SettingsLayout>
+      <SettingsAbout />
+    </SettingsLayout>
+  );
+};
+
+export default SettingsAboutPage;