(feat): allow customizing the background and logo image in minting form

hypercerts-org · Mar 19, 2024 · 6d731a3 · 6d731a3
1 parent 2077e73
commit 6d731a3
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 2 deletions.
diff --git a/components/minting/hypercert-preview.tsx b/components/minting/hypercert-preview.tsx
@@ -10,11 +10,15 @@ export const HypercertPreview = ({
   imageRef,
   backgroundColor = "#73C9CC",
   textColor = "#194446",
+  backgroundImg = "https://i.imgur.com/wsM3fWd.jpeg",
+  logoImg = "https://i.imgur.com/sDQhp3Y.png",
 }: {
   imageRef?: MutableRefObject<HTMLDivElement | null>;
   values: Partial<MintingFormValues>;
   backgroundColor?: string;
   textColor?: string;
+  backgroundImg?: string;
+  logoImg?: string;
 }) => {
   return (
     <Flex
@@ -47,7 +51,7 @@ export const HypercertPreview = ({
         <Image
           alt={"background art"}
           borderTopRadius={"22px"}
-          src={"https://i.imgur.com/wsM3fWd.jpeg"}
+          src={backgroundImg}
           position={"relative"}
           objectFit={"fill"}
           maxWidth={"none"}
@@ -122,7 +126,7 @@ export const HypercertPreview = ({
           borderRadius={"2000px"}
           border={`1px solid ${textColor}`}
         >
-          <Image src="https://i.imgur.com/sDQhp3Y.png" alt={"Logo image"} />
+          <Image src={logoImg} alt={"Logo image"} />
         </Flex>
         <Flex
           position={"relative"}

diff --git a/components/minting/minting-form.tsx b/components/minting/minting-form.tsx
@@ -24,6 +24,8 @@ export interface MintingFormValues {
   contributors: string;
   backgroundColor: string;
   textColor: string;
+  logoImg?: string;
+  backgroundImg?: string;
 }
 
 // Default values minting form for testing
@@ -37,6 +39,8 @@ export const defaultMintingFormValues: MintingFormValues = {
   contributors: "Test",
   backgroundColor: "#73C9CC",
   textColor: "#194446",
+  backgroundImg: "https://i.imgur.com/wsM3fWd.jpeg",
+  logoImg: "https://i.imgur.com/sDQhp3Y.png",
 };
 
 const useMintingForm = (initialValues?: MintingFormValues) =>
@@ -120,6 +124,18 @@ export const MintingForm = ({
                 {errors.contributors?.message}
               </FormErrorMessage>
             </FormControl>
+            <FormControl isInvalid={!!errors.logoImg?.message}>
+              <FormLabel>Logo Image</FormLabel>
+              <Input isDisabled={isDisabled} {...register("logoImg")} />
+              <FormErrorMessage>{errors.logoImg?.message}</FormErrorMessage>
+            </FormControl>
+            <FormControl isInvalid={!!errors.backgroundImg?.message}>
+              <FormLabel>Background Image</FormLabel>
+              <Input isDisabled={isDisabled} {...register("backgroundImg")} />
+              <FormErrorMessage>
+                {errors.backgroundImg?.message}
+              </FormErrorMessage>
+            </FormControl>
             <FormControl isInvalid={!!errors.backgroundColor?.message}>
               <FormLabel>Background</FormLabel>
               <Input
@@ -154,6 +170,8 @@ export const MintingForm = ({
         values={values}
         backgroundColor={values.backgroundColor}
         textColor={values.textColor}
+        logoImg={values.logoImg}
+        backgroundImg={values.backgroundImg}
       />
     </HStack>
   );