From eea6984e6400fe49f326b10374b9e07a6734449c Mon Sep 17 00:00:00 2001
From: Matt Isenhower <matt@isenhower.com>
Date: Fri, 9 Sep 2022 08:39:10 -0700
Subject: [PATCH] Add screenshot layout

---
 src/layouts/ScreenshotLayout.vue        | 65 +++++++++++++++++++++++++
 src/views/screenshots/CountdownView.vue |  5 +-
 2 files changed, 68 insertions(+), 2 deletions(-)
 create mode 100644 src/layouts/ScreenshotLayout.vue

diff --git a/src/layouts/ScreenshotLayout.vue b/src/layouts/ScreenshotLayout.vue
new file mode 100644
index 0000000..77d04b9
--- /dev/null
+++ b/src/layouts/ScreenshotLayout.vue
@@ -0,0 +1,65 @@
+<template>
+  <main class="min-h-screen flex flex-col overflow-hidden">
+    <slot />
+
+    <div class="h-12 m-4 bg-black bg-opacity-50 rounded-full">
+      <div class="flex justify-between h-full font-splatoon2 text-sm text-gray-300">
+        <div class="flex justify-start items-center space-x-6 ml-4">
+          <div>
+            <img src="@/assets/img/favicon.svg" class="h-16 -my-8" />
+          </div>
+          <div class="flex items-center space-x-8">
+            <div class="text-3xl text-gray-50">
+              {{ header }}
+            </div>
+            <div>
+              <img src="@/assets/img/twitter-white.png" width="20" height="20" class="inline" />
+              @splatoon3ink
+            </div>
+            <div>
+              splatoon3.ink
+            </div>
+          </div>
+        </div>
+        <div class="flex justify-end items-center mr-6">
+          {{ formatDateTime(time.now) }}
+        </div>
+      </div>
+    </div>
+  </main>
+</template>
+
+<script setup>
+import { onMounted, onUnmounted } from 'vue';
+import { useTimeStore } from '../stores/time';
+
+const props = defineProps({
+  header: {
+    type: String,
+  },
+})
+
+const time = useTimeStore();
+
+onMounted(() => time.startUpdatingNow());
+onUnmounted(() => time.stopUpdatingNow());
+
+function formatDateTime(date) {
+  date = new Date(date);
+
+  return date.toLocaleString(undefined, {
+    dateStyle: 'long',
+    timeStyle: 'short',
+  })
+}
+</script>
+
+<style scoped>
+.footer-links a span {
+  @apply text-gray-300;
+}
+
+.footer-links a:hover span {
+  @apply text-white underline;
+}
+</style>
diff --git a/src/views/screenshots/CountdownView.vue b/src/views/screenshots/CountdownView.vue
index 9bd98b0..22c62a5 100644
--- a/src/views/screenshots/CountdownView.vue
+++ b/src/views/screenshots/CountdownView.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="min-h-screen grow flex items-center justify-center overflow-hidden">
+  <ScreenshotLayout header="Countdown">
     <div class="grow flex items-center justify-center">
       <div class="relative w-full max-w-2xl m-4 scale-[1.55]">
         <Splat3 class="absolute w-48 -bottom-16 left-28" fill="fill-splatoon-red" />
@@ -14,7 +14,7 @@
         </div>
       </div>
     </div>
-  </div>
+  </ScreenshotLayout>
 </template>
 
 <script setup>
@@ -23,4 +23,5 @@ import Splat2 from '@/components/splats/Splat2.vue';
 import Splat3 from '@/components/splats/Splat3.vue';
 import Splat4 from '@/components/splats/Splat4.vue';
 import Splat1 from '@/components/splats/Splat1.vue';
+import ScreenshotLayout from '../../layouts/ScreenshotLayout.vue';
 </script>