✨ Added build info to global footer

frontend/src/app.tsx

@@ -1,15 +1,17 @@
 import Header from 'src/components/Header'
 import Router from 'src/components/Router'
 import Welcome from 'src/components/Welcome'
+import Footer from './components/Footer'
 
 export function App() {
   return (
-    <div class="min-h-screen">
+    <div class="min-h-screen flex flex-col">
       <Header />
-      <main class="container max-w-screen-md my-8">
+      <main class="container max-w-screen-md my-8 flex-1">
         <Welcome />
         <Router />
       </main>
+      <Footer />
     </div>
   )
 }

frontend/src/components/Footer.tsx

@@ -0,0 +1,33 @@
+import useSWR from 'swr'
+
+import type { FunctionalComponent } from 'preact'
+
+const fetcher = (url: string) => fetch(url).then(r => r.json())
+
+const BuildInfo: FunctionalComponent = () => {
+  const { data, error } = useSWR<{
+    version: string
+    date: string
+    commit: string
+  }>('/api/version', fetcher)
+
+  if (error) return null
+  if (!data) return null
+
+  return <div class="text-gray-700 text-sm font-mono text-right">
+    <p>{data.version}</p>
+    <p>Build date: {data.date}</p>
+    <p>Commit: {data.commit}</p>
+  </div>
+}
+
+const Footer: FunctionalComponent = () => {
+  return <footer class="border-t-1 border-gray-400 py-8">
+    <div class="container max-w-screen-md flex justify-between">
+      <p>Made with ❤ by <a class="font-semibold underline underline-dotted hover:underline-solid" href="https://github.com/lukecarr" target="_blank" rel="noopener">Luke Carr</a></p>
+      <BuildInfo />
+    </div>
+  </footer>
+}
+
+export default Footer

frontend/src/components/Welcome.tsx

@@ -10,7 +10,7 @@ const Welcome: FunctionalComponent = () => {
   return <section class="mb-8 border-l-4 border-gray-600 p-2 pl-3 font-semibold bg-gray-100">
     <h3>Welcome to tiny-todo!</h3>
     <p>A simple todo app that's: tiny 🐜, lightweight 🔦🏋️‍♀️, and performant ⚡. Built using Go &amp; Preact!</p>
-    <button class="text-sm font-semibold underline underline-dotted hover:underline-solid underline-black" onClick={() => setHidden(true)}>don't show again</button>
+    <button class="text-sm font-semibold underline underline-dotted hover:underline-solid" onClick={() => setHidden(true)}>don't show again</button>
   </section>
 }
 

internal/routes/version.go

@@ -10,6 +10,8 @@ func Version(e *env.Env, r fiber.Router) {
 	r.Get("/", func(c *fiber.Ctx) error {
 		return c.JSON(fiber.Map{
 			"version": info.Version,
+			"date":    info.Date,
+			"commit":  info.Commit,
 		})
 	})
 }