From 25f7771c9303ef69e9c04efdb741dd16f9a9a52d Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Wed, 20 Sep 2023 11:21:08 -0500
Subject: [PATCH] About: add Navlinks to about pages footer

---
 src/components/navlinks.tsx  | 44 ++++++++++++++++++++++++++++++++++++
 src/features/about/index.tsx | 17 +++++++++-----
 2 files changed, 55 insertions(+), 6 deletions(-)
 create mode 100644 src/components/navlinks.tsx

diff --git a/src/components/navlinks.tsx b/src/components/navlinks.tsx
new file mode 100644
index 0000000000..4e08043266
--- /dev/null
+++ b/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 };
diff --git a/src/features/about/index.tsx b/src/features/about/index.tsx
index 0112c786a8..d2aa40aafc 100644
--- a/src/features/about/index.tsx
+++ b/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 className='prose mx-auto py-4 dark:prose-invert sm:p-6'>
-        <div dangerouslySetInnerHTML={{ __html: pageHtml }} />
-        {alsoAvailable}
-      </div>
-    </Card>
+    <div>
+      <Card variant='rounded'>
+        <div className='prose mx-auto py-4 dark:prose-invert sm:p-6'>
+          <div dangerouslySetInnerHTML={{ __html: pageHtml }} />
+          {alsoAvailable}
+        </div>
+      </Card>
+
+      <Navlinks type='homeFooter' />
+    </div>
   );
 };