About: add Navlinks to about pages footer

src/components/navlinks.tsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+
+import { Text } from 'soapbox/components/ui';
+import { useSettings, useSoapboxConfig } from 'soapbox/hooks';
+
+interface INavlinks {
+  type: string
+}
+
+const Navlinks: React.FC<INavlinks> = ({ type }) => {
+  const settings = useSettings();
+  const { copyright, navlinks } = useSoapboxConfig();
+  const locale = settings.get('locale') as string;
+
+  return (
+    <footer className='relative mx-auto mt-auto max-w-7xl py-8'>
+      <div className='flex flex-wrap justify-center'>
+        {navlinks.get(type)?.map((link, idx) => {
+          const url = link.url;
+          const isExternal = url.startsWith('http');
+          const Comp = (isExternal ? 'a' : Link) as 'a';
+          const compProps = isExternal ? { href: url, target: '_blank' } : { to: url };
+
+          return (
+            <div key={idx} className='px-5 py-2'>
+              <Comp {...compProps} className='text-primary-600 hover:underline dark:text-primary-400'>
+                <Text tag='span' theme='inherit' size='sm'>
+                  {(link.getIn(['titleLocales', locale]) || link.get('title')) as string}
+                </Text>
+              </Comp>
+            </div>
+          );
+        })}
+      </div>
+
+      <div className='mt-6'>
+        <Text theme='muted' align='center' size='sm'>{copyright}</Text>
+      </div>
+    </footer>
+  );
+};
+
+export { Navlinks };

src/features/about/index.tsx

@@ -3,6 +3,7 @@ import { FormattedMessage } from 'react-intl';
 import { useParams } from 'react-router-dom';
 
 import { fetchAboutPage } from 'soapbox/actions/about';
+import { Navlinks } from 'soapbox/components/navlinks';
 import { Card } from 'soapbox/components/ui';
 import { useSoapboxConfig, useSettings, useAppDispatch } from 'soapbox/hooks';
 
@@ -61,12 +62,16 @@ const AboutPage: React.FC = () => {
   );
 
   return (
-    <Card variant='rounded'>
+    <div>
-      <div className='prose mx-auto py-4 dark:prose-invert sm:p-6'>
+      <Card variant='rounded'>
-        <div dangerouslySetInnerHTML={{ __html: pageHtml }} />
+        <div className='prose mx-auto py-4 dark:prose-invert sm:p-6'>
-        {alsoAvailable}
+          <div dangerouslySetInnerHTML={{ __html: pageHtml }} />
-      </div>
+          {alsoAvailable}
-    </Card>
+        </div>
+      </Card>
+
+      <Navlinks type='homeFooter' />
+    </div>
   );
 };