Fixed share page. Updated data tables to be responsive.

src/app/share/[...id]/Footer.js

@@ -1,3 +1,4 @@
+'use client';
 import { CURRENT_VERSION, HOMEPAGE_URL } from 'lib/constants';
 import styles from './Footer.module.css';
 

src/app/share/[...id]/Footer.module.css

@@ -1,10 +1,10 @@
 .footer {
   display: flex;
   flex-direction: row;
+  align-items: center;
   justify-content: flex-end;
   font-size: var(--font-size-sm);
-  line-height: 30px;
-  margin: 40px 0;
+  height: 100px;
 }
 
 .footer a {

src/app/share/[...id]/Header.js

@@ -1,3 +1,4 @@
+'use client';
 import { Icon, Text } from 'react-basics';
 import Link from 'next/link';
 import LanguageButton from 'components/input/LanguageButton';

src/app/share/[...id]/Header.module.css

@@ -2,6 +2,7 @@
   display: flex;
   flex-direction: row;
   align-items: center;
+  justify-content: space-between;
   width: 100%;
   height: 100px;
 }
@@ -38,10 +39,3 @@
     min-width: 100%;
   }
 }
-
-@media only screen and (max-width: 768px) {
-  .buttons,
-  .links {
-    display: none;
-  }
-}

src/app/share/[...id]/Share.js

@@ -1,13 +1,25 @@
 'use client';
-import WebsiteDetails from '../../(main)/websites/[id]/WebsiteDetails';
+import WebsiteDetails from 'app/(main)/websites/[id]/WebsiteDetails';
 import useShareToken from 'components/hooks/useShareToken';
+import styles from './Share.module.css';
+import Page from 'components/layout/Page';
+import Header from './Header';
+import Footer from './Footer';
 
-export default function ({ shareId }) {
-  const shareToken = useShareToken(shareId);
+export default function Share({ shareId }) {
+  const { shareToken, isLoading } = useShareToken(shareId);
 
-  if (!shareToken) {
+  if (isLoading || !shareToken) {
     return null;
   }
 
-  return <WebsiteDetails websiteId={shareToken.websiteId} />;
+  return (
+    <div className={styles.container}>
+      <Page>
+        <Header />
+        <WebsiteDetails websiteId={shareToken.websiteId} />
+        <Footer />
+      </Page>
+    </div>
+  );
 }

src/app/share/[...id]/Share.module.css

@@ -0,0 +1,4 @@
+.container {
+  flex: 1;
+  min-height: calc(100vh - 200px);
+}

src/app/share/[...id]/page.tsx

@@ -1,5 +1,5 @@
 import Share from './Share';
 
 export default function ({ params: { id } }) {
-  return <Share shareId={id} />;
+  return <Share shareId={id[0]} />;
 }