4 files changed, 84 insertions, 0 deletions
diff --git a/src/app/share/[...shareId]/Footer.tsx b/src/app/share/[...shareId]/Footer.tsx
new file mode 100644
index 0000000..f294862
--- /dev/null
+++ b/src/app/share/[...shareId]/Footer.tsx
@@ -0,0 +1,12 @@
+import { Row, Text } from '@umami/react-zen';
+import { CURRENT_VERSION, HOMEPAGE_URL } from '@/lib/constants';
+
+export function Footer() {
+  return (
+    <Row as="footer" paddingY="6" justifyContent="flex-end">
+      <a href={HOMEPAGE_URL} target="_blank">
+        <Text weight="bold">umami</Text> {`v${CURRENT_VERSION}`}
+      </a>
+    </Row>
+  );
+}
diff --git a/src/app/share/[...shareId]/Header.tsx b/src/app/share/[...shareId]/Header.tsx
new file mode 100644
index 0000000..d7b7dcb
--- /dev/null
+++ b/src/app/share/[...shareId]/Header.tsx
@@ -0,0 +1,24 @@
+import { Icon, Row, Text, ThemeButton } from '@umami/react-zen';
+import { LanguageButton } from '@/components/input/LanguageButton';
+import { PreferencesButton } from '@/components/input/PreferencesButton';
+import { Logo } from '@/components/svg';
+
+export function Header() {
+  return (
+    <Row as="header" justifyContent="space-between" alignItems="center" paddingY="3">
+      <a href="https://umami.is" target="_blank" rel="noopener">
+        <Row alignItems="center" gap>
+          <Icon>
+            <Logo />
+          </Icon>
+          <Text weight="bold">umami</Text>
+        </Row>
+      </a>
+      <Row alignItems="center" gap>
+        <ThemeButton />
+        <LanguageButton />
+        <PreferencesButton />
+      </Row>
+    </Row>
+  );
+}
diff --git a/src/app/share/[...shareId]/SharePage.tsx b/src/app/share/[...shareId]/SharePage.tsx
new file mode 100644
index 0000000..7ed0667
--- /dev/null
+++ b/src/app/share/[...shareId]/SharePage.tsx
@@ -0,0 +1,41 @@
+'use client';
+import { Column, useTheme } from '@umami/react-zen';
+import { useEffect } from 'react';
+import { WebsiteHeader } from '@/app/(main)/websites/[websiteId]/WebsiteHeader';
+import { WebsitePage } from '@/app/(main)/websites/[websiteId]/WebsitePage';
+import { WebsiteProvider } from '@/app/(main)/websites/WebsiteProvider';
+import { PageBody } from '@/components/common/PageBody';
+import { useShareTokenQuery } from '@/components/hooks';
+import { Footer } from './Footer';
+import { Header } from './Header';
+
+export function SharePage({ shareId }) {
+  const { shareToken, isLoading } = useShareTokenQuery(shareId);
+  const { setTheme } = useTheme();
+
+  useEffect(() => {
+    const url = new URL(window?.location?.href);
+    const theme = url.searchParams.get('theme');
+
+    if (theme === 'light' || theme === 'dark') {
+      setTheme(theme);
+    }
+  }, []);
+
+  if (isLoading || !shareToken) {
+    return null;
+  }
+
+  return (
+    <Column backgroundColor="2">
+      <PageBody gap>
+        <Header />
+        <WebsiteProvider websiteId={shareToken.websiteId}>
+          <WebsiteHeader showActions={false} />
+          <WebsitePage websiteId={shareToken.websiteId} />
+        </WebsiteProvider>
+        <Footer />
+      </PageBody>
+    </Column>
+  );
+}
diff --git a/src/app/share/[...shareId]/page.tsx b/src/app/share/[...shareId]/page.tsx
new file mode 100644
index 0000000..b9900eb
--- /dev/null
+++ b/src/app/share/[...shareId]/page.tsx
@@ -0,0 +1,7 @@
+import { SharePage } from './SharePage';
+
+export default async function ({ params }: { params: Promise<{ shareId: string[] }> }) {
+  const { shareId } = await params;
+
+  return <SharePage shareId={shareId[0]} />;
+}