Add site footer

src/components/site/SiteFooter.tsx

@@ -0,0 +1,24 @@
+import { APP_NAME, OUR_DOMAIN } from "~/lib/env"
+import { UniLink } from "../ui/UniLink"
+
+export const SiteFooter: React.FC<{ site: { name: string } }> = ({ site }) => {
+  return (
+    <footer className="bg-indigo-50/50 text-zinc-500">
+      <div className="max-w-screen-md mx-auto px-5 py-32">
+        <span className="font-medium">
+          &copy;{" "}
+          <UniLink href="/" className="hover:text-indigo-500">
+            {site.name}
+          </UniLink>{" "}
+          · Published on{" "}
+          <UniLink
+            href={`https://${OUR_DOMAIN}`}
+            className="hover:text-indigo-500"
+          >
+            {APP_NAME}
+          </UniLink>
+        </span>
+      </div>
+    </footer>
+  )
+}

src/components/site/SiteLayout.tsx

@@ -13,6 +13,7 @@ import { OUR_DOMAIN } from "~/lib/env"
 import { useRouter } from "next/router"
 import { SEOHead } from "../common/SEOHead"
 import { SiteNavigationItem } from "~/lib/types"
+import { SiteFooter } from "./SiteFooter"
 
 type MenuLink = {
   label: string
@@ -169,18 +170,17 @@ export const SiteLayout: React.FC<SiteLayoutProps> = ({
         description={site.description}
         image={getUserContentsUrl(site.icon)}
       />
-      <div>
-        <Header
-          links={links}
-          siteName={site?.name}
-          description={site?.description}
-          avatars={avatars}
-          subscribed={!!subscription}
-        />
-        <div className={clsx(`max-w-screen-md mx-auto px-5 pb-12`, `pt-12`)}>
-          {children}
-        </div>
+      <Header
+        links={links}
+        siteName={site!.name}
+        description={site?.description}
+        avatars={avatars}
+        subscribed={!!subscription}
+      />
+      <div className={clsx(`max-w-screen-md mx-auto px-5 pb-12`, `pt-12`)}>
+        {children}
       </div>
+      <SiteFooter site={{ name: site!.name }} />
       {site.id && (
         <SubscribeModal
           siteId={site.id}