From 6768f15212af205ea3841a52f269c46dc06fe840 Mon Sep 17 00:00:00 2001
From: Sam Becker <sam@sambecker.com>
Date: Sat, 8 Mar 2025 16:00:01 -0600
Subject: [PATCH] Prepare for og tailwind use

---
 src/image-response/CameraImageResponse.tsx       |  6 +-----
 .../FilmSimulationImageResponse.tsx              |  6 +-----
 src/image-response/FocalLengthImageResponse.tsx  |  6 +-----
 src/image-response/HomeImageResponse.tsx         |  2 +-
 src/image-response/PhotoImageResponse.tsx        |  2 +-
 src/image-response/RecipeImageResponse.tsx       |  6 +-----
 src/image-response/TagImageResponse.tsx          |  6 +-----
 src/image-response/components/ImageContainer.tsx | 16 ++++++----------
 8 files changed, 13 insertions(+), 37 deletions(-)

diff --git a/src/image-response/CameraImageResponse.tsx b/src/image-response/CameraImageResponse.tsx
index 8ff9fcb9..a86193cd 100644
--- a/src/image-response/CameraImageResponse.tsx
+++ b/src/image-response/CameraImageResponse.tsx
@@ -27,11 +27,7 @@ export default function CameraImageResponse({
 }) {
   const camera = cameraFromPhoto(photos[0], cameraProp);
   return (
-    <ImageContainer {...{
-      width,
-      height,
-      ...photos.length === 0 && { background: 'black' },
-    }}>
+    <ImageContainer solidBackground={photos.length === 0}>
       <ImagePhotoGrid
         {...{
           photos,
diff --git a/src/image-response/FilmSimulationImageResponse.tsx b/src/image-response/FilmSimulationImageResponse.tsx
index f83af711..21776a3b 100644
--- a/src/image-response/FilmSimulationImageResponse.tsx
+++ b/src/image-response/FilmSimulationImageResponse.tsx
@@ -24,11 +24,7 @@ export default function FilmSimulationImageResponse({
   fontFamily: string
 }) {  
   return (
-    <ImageContainer {...{
-      width,
-      height,
-      ...photos.length === 0 && { background: 'black' },
-    }}>
+    <ImageContainer solidBackground={photos.length === 0}>
       <ImagePhotoGrid
         {...{
           photos,
diff --git a/src/image-response/FocalLengthImageResponse.tsx b/src/image-response/FocalLengthImageResponse.tsx
index ae43c17d..7a9abf2d 100644
--- a/src/image-response/FocalLengthImageResponse.tsx
+++ b/src/image-response/FocalLengthImageResponse.tsx
@@ -20,11 +20,7 @@ export default function FocalLengthImageResponse({
   fontFamily: string
 }) {  
   return (
-    <ImageContainer {...{
-      width,
-      height,
-      ...photos.length === 0 && { background: 'black' },
-    }}>
+    <ImageContainer solidBackground={photos.length === 0}>
       <ImagePhotoGrid
         {...{
           photos,
diff --git a/src/image-response/HomeImageResponse.tsx b/src/image-response/HomeImageResponse.tsx
index c0aea4c7..42baf1d4 100644
--- a/src/image-response/HomeImageResponse.tsx
+++ b/src/image-response/HomeImageResponse.tsx
@@ -17,7 +17,7 @@ export default function HomeImageResponse({
   fontFamily: string
 }) {
   return (
-    <ImageContainer {...{ width, height }} >
+    <ImageContainer>
       <ImagePhotoGrid
         {...{
           photos,
diff --git a/src/image-response/PhotoImageResponse.tsx b/src/image-response/PhotoImageResponse.tsx
index 99711732..4a454959 100644
--- a/src/image-response/PhotoImageResponse.tsx
+++ b/src/image-response/PhotoImageResponse.tsx
@@ -32,7 +32,7 @@ export default function PhotoImageResponse({
     .trim();
 
   return (
-    <ImageContainer {...{ width, height }}>
+    <ImageContainer>
       <ImagePhotoGrid {...{
         photos: isNextImageReady ? [photo] : [],
         width,
diff --git a/src/image-response/RecipeImageResponse.tsx b/src/image-response/RecipeImageResponse.tsx
index c14f3280..0ceada91 100644
--- a/src/image-response/RecipeImageResponse.tsx
+++ b/src/image-response/RecipeImageResponse.tsx
@@ -20,11 +20,7 @@ export default function RecipeImageResponse({
   fontFamily: string
 }) {  
   return (
-    <ImageContainer {...{
-      width,
-      height,
-      ...photos.length === 0 && { background: 'black' },
-    }}>
+    <ImageContainer solidBackground={photos.length === 0}>
       <ImagePhotoGrid
         {...{
           photos,
diff --git a/src/image-response/TagImageResponse.tsx b/src/image-response/TagImageResponse.tsx
index b9e8c2c7..17df28de 100644
--- a/src/image-response/TagImageResponse.tsx
+++ b/src/image-response/TagImageResponse.tsx
@@ -20,11 +20,7 @@ export default function TagImageResponse({
   fontFamily: string
 }) {  
   return (
-    <ImageContainer {...{
-      width,
-      height,
-      ...photos.length === 0 && { background: 'black' },
-    }}>
+    <ImageContainer solidBackground={photos.length === 0}>
       <ImagePhotoGrid
         {...{
           photos,
diff --git a/src/image-response/components/ImageContainer.tsx b/src/image-response/components/ImageContainer.tsx
index ac37446e..1f9b82f9 100644
--- a/src/image-response/components/ImageContainer.tsx
+++ b/src/image-response/components/ImageContainer.tsx
@@ -1,25 +1,21 @@
 import { ReactNode } from 'react';
 
 export default function ImageContainer({
-  width,
-  height,
-  background = 'transparent',
+  solidBackground,
   children,
 }: {
-  width: number
-  height: number
-  background?: 'transparent' | 'black'
+  solidBackground?: boolean
   children: ReactNode
 }) {
   return (
     <div style={{
-      position: 'relative',
+      height: '100%',
+      width: '100%',
       display: 'flex',
+      flexDirection: 'column',
       alignItems: 'center',
       justifyContent: 'center',
-      background,
-      width,
-      height,
+      backgroundColor: solidBackground ? 'black' : 'transparent',
     }}>
       {children}
     </div>