From 9281df3658566181f329fc942c32342bb742296f Mon Sep 17 00:00:00 2001
From: Oliver Bryan <04oliverbryan@gmail.com>
Date: Mon, 29 Sep 2025 20:58:23 +0100
Subject: [PATCH] use demo box component

---
 src/pages/projects/factor-e.astro    | 37 +++++++--------------
 src/pages/projects/glimpse.astro     | 49 ++++++++++++++--------------
 src/pages/projects/watercooler.astro | 37 +++++++--------------
 src/styles/global.css                |  8 +++++
 4 files changed, 55 insertions(+), 76 deletions(-)

diff --git a/src/pages/projects/factor-e.astro b/src/pages/projects/factor-e.astro
index 0d9259d6..edb3a8d6 100644
--- a/src/pages/projects/factor-e.astro
+++ b/src/pages/projects/factor-e.astro
@@ -1,5 +1,6 @@
----
+ ---
 import ProjectPage from "../../components/ProjectPage.astro";
+import Demo from "../../components/Demo.astro";
 
 export const metadata = {
     title: "factor-e",
@@ -75,29 +76,13 @@ export const metadata = {
         </div>
     </div>
 
-    <div class="mt-4">
-        <h2 class="text-2xl text-ayu-accent mb-3">Screenshots</h2>
-        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
-            <img
-                src="/images/factor-e/world-gen.gif"
-                alt="World gen (GIF)"
-                class="w-full h-full object-cover demo-border"
-            />
-            <img
-                src="/images/factor-e/pixel-art.png"
-                alt="Pixel art"
-                class="w-full h-full object-cover demo-border"
-            />
-            <img
-                src="/images/factor-e/place-destroy.gif"
-                alt="Place/destroy loop (GIF)"
-                class="w-full h-full object-cover demo-border"
-            />
-            <img
-                src="/images/factor-e/debug-overlay.gif"
-                alt="Dev/debug overlay"
-                class="w-full h-full object-cover demo-border"
-            />
-        </div>
-    </div>
+     <div class="mt-4">
+         <h2 class="text-2xl text-ayu-accent mb-3">Demo</h2>
+         <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+             <Demo image="/images/factor-e/world-gen.gif" title="World generation" type="boxed" />
+             <Demo image="/images/factor-e/pixel-art.png" title="Pixel art" type="boxed" />
+             <Demo image="/images/factor-e/place-destroy.gif" title="Place/destroy loop" type="boxed" />
+             <Demo image="/images/factor-e/debug-overlay.gif" title="Dev/debug overlay" type="boxed" />
+         </div>
+     </div>
 </ProjectPage>
diff --git a/src/pages/projects/glimpse.astro b/src/pages/projects/glimpse.astro
index fc789349..494d5f60 100644
--- a/src/pages/projects/glimpse.astro
+++ b/src/pages/projects/glimpse.astro
@@ -1,5 +1,6 @@
 ---
 import ProjectPage from "../../components/ProjectPage.astro";
+import Demo from "../../components/Demo.astro";
 
 export const metadata = {
     title: "glimpse",
@@ -54,35 +55,35 @@ export const metadata = {
         <div
             class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4"
         >
-            <img
-                src="/images/glimpse/feed.png"
-                alt="Feed view"
-                class="w-full h-full object-cover demo-border"
+            <Demo
+                image="/images/glimpse/feed.png"
+                title="Feed view"
+                type="boxed"
             />
-            <img
-                src="/images/glimpse/crop.png"
-                alt="Composer + cropping"
-                class="w-full h-full object-cover demo-border"
+            <Demo
+                image="/images/glimpse/crop.png"
+                title="Share - write a caption + crop"
+                type="boxed"
             />
-            <img
-                src="/images/glimpse/profile.png"
-                alt="Profile (custom colours)"
-                class="w-full h-full object-cover demo-border"
+            <Demo
+                image="/images/glimpse/comments.png"
+                title="Comments & interactions"
+                type="boxed"
             />
-            <img
-                src="/images/glimpse/settings.png"
-                alt="Settings"
-                class="w-full h-full object-cover demo-border"
+            <Demo
+                image="/images/glimpse/profile.png"
+                title="Profile (custom colours)"
+                type="boxed"
             />
-            <img
-                src="/images/glimpse/comments.png"
-                alt="Comments & interactions"
-                class="w-full h-full object-cover demo-border"
+            <Demo
+                image="/images/glimpse/settings.png"
+                title="Settings"
+                type="boxed"
             />
-            <img
-                src="/images/glimpse/search.png"
-                alt="User search/discovery"
-                class="w-full h-full object-cover demo-border"
+            <Demo
+                image="/images/glimpse/search.png"
+                title="User search/discovery"
+                type="boxed"
             />
         </div>
     </div>
diff --git a/src/pages/projects/watercooler.astro b/src/pages/projects/watercooler.astro
index 4f08f4f6..c957a105 100644
--- a/src/pages/projects/watercooler.astro
+++ b/src/pages/projects/watercooler.astro
@@ -1,5 +1,6 @@
----
+ ---
 import ProjectPage from "../../components/ProjectPage.astro";
+import Demo from "../../components/Demo.astro";
 
 export const metadata = {
     title: "Watercooler",
@@ -58,29 +59,13 @@ export const metadata = {
         </div>
     </div>
 
-    <div class="mt-4">
-        <h2 class="text-2xl text-ayu-accent mb-3">Screenshots</h2>
-        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
-            <img
-                src="/images/watercooler/office.png"
-                alt="Office space"
-                class="w-full h-full object-cover demo-border"
-            />
-            <img
-                src="/images/watercooler/idk.png"
-                alt="idk"
-                class="w-full h-full object-cover demo-border"
-            />
-            <img
-                src="/images/watercooler/idk.png"
-                alt="idk"
-                class="w-full h-full object-cover demo-border"
-            />
-            <img
-                src="/images/watercooler/idk.png"
-                alt="idk"
-                class="w-full h-full object-cover demo-border"
-            />
-        </div>
-    </div>
+     <div class="mt-4">
+         <h2 class="text-2xl text-ayu-accent mb-3">Screenshots</h2>
+         <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+             <Demo image="/images/watercooler/office.png" title="Office space" />
+             <Demo image="/images/watercooler/idk.png" title="idk" />
+             <Demo image="/images/watercooler/idk.png" title="idk" />
+             <Demo image="/images/watercooler/idk.png" title="idk" />
+         </div>
+     </div>
 </ProjectPage>
diff --git a/src/styles/global.css b/src/styles/global.css
index 271e9272..a6cb8895 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -236,4 +236,12 @@ body {
 .demo-border {
     border: 2px dotted var(--ayu-gutter);
     border-radius: 15px;
+    overflow: hidden;
+}
+
+.demo-border span {
+    display: block;
+    background-color: var(--ayu-popup);
+    padding: 5px;
+    text-align: center;
 }