From f30eec8f9e2d4984acef35ee58136e0987ada7fd Mon Sep 17 00:00:00 2001
From: SethBurkart123 <seth.burkart@hills.adventist.edu.au>
Date: Fri, 5 Apr 2024 13:16:03 +1100
Subject: [PATCH] add cover image upload

---
 src/interface/pages/ThemeCreator.tsx | 26 +++++++++++++++++++++++++-
 src/interface/types/CustomThemes.ts  |  3 +++
 2 files changed, 28 insertions(+), 1 deletion(-)

diff --git a/src/interface/pages/ThemeCreator.tsx b/src/interface/pages/ThemeCreator.tsx
index faa6652b..47e99007 100644
--- a/src/interface/pages/ThemeCreator.tsx
+++ b/src/interface/pages/ThemeCreator.tsx
@@ -19,6 +19,8 @@ function ThemeCreator() {
     allowBackgrounds: true,
     CustomCSS: '',
     CustomImages: [],
+    coverImage: null,
+    isEditable: true
   });
 
   useEffect(() => {
@@ -154,7 +156,7 @@ function ThemeCreator() {
         </div>
 
         <div>
-          <div className='pb-2 text-sm'>Description <span className='italic opacity-80'>(optional)</span></div>
+          <div className='pb-2 text-sm'>Description <span className='italic font-light opacity-80'>(optional)</span></div>
           <textarea
           id='themeDescription'
           placeholder="Don't worry, this one's optional!"
@@ -163,6 +165,28 @@ function ThemeCreator() {
           className='w-full p-2 rounded-lg focus:outline-none ring-0 focus:ring-1 ring-zinc-100 dark:ring-zinc-700 dark:bg-zinc-900 dark:text-white' />
         </div>
 
+        <Divider />
+
+        <p className='pr-2 text-sm font-semibold'>Cover Image <span className='italic font-light opacity-80'>(optional)</span></p>
+        <p className='pb-3 text-sm'>Upload an image to use as the cover image for your theme. <span className='italic font-light'>Recommended resolution: 348x64</span></p>
+
+        <div className="relative flex justify-center w-full h-32 gap-1 overflow-hidden transition rounded-lg place-items-center bg-zinc-100 dark:bg-zinc-900">
+          <PlusIcon height={18} />
+          <span className='dark:text-white'>Add cover image</span>
+          <input type="file" accept='image/*' onChange={(e) => {
+            const file = e.target.files?.[0];
+            e.target.value = '';
+            if (file) {
+              const reader = new FileReader();
+              reader.onload = async () => {
+                const imageBlob = await fetch(reader.result as string).then(res => res.blob());
+                setTheme({ ...theme, coverImage: imageBlob });
+              };
+              reader.readAsDataURL(file);
+            }
+          }} className="absolute inset-0 w-full h-full opacity-0 cursor-pointer" />
+        </div>
+
         <div className='flex items-center justify-between pt-4'>
           <div>
             <div className='pr-2 text-sm font-semibold'>Custom Theme Colour</div>
diff --git a/src/interface/types/CustomThemes.ts b/src/interface/types/CustomThemes.ts
index 52ba0d69..b88c6771 100644
--- a/src/interface/types/CustomThemes.ts
+++ b/src/interface/types/CustomThemes.ts
@@ -7,6 +7,8 @@ export type CustomTheme = {
   allowBackgrounds: boolean;
   CustomCSS: string;
   CustomImages: CustomImage[];
+  coverImage: Blob | null;
+  isEditable: boolean;
 }
 
 export type CustomImage = {
@@ -23,6 +25,7 @@ export type CustomImageBase64 = {
 
 export type CustomThemeBase64 = Omit<CustomTheme, 'CustomImages'> & {
   CustomImages: CustomImageBase64[];
+  coverImage: string | null;
 }
 
 export type ThemeList = {