From 808b49d7894a3a1731d8125f1df526d85ac5a8e6 Mon Sep 17 00:00:00 2001
From: "sweep-ai[bot]" <128439645+sweep-ai[bot]@users.noreply.github.com>
Date: Wed, 22 Nov 2023 03:49:53 +0000
Subject: [PATCH] feat: Updated frontend/src/components/ImageUpload.

---
 frontend/src/components/ImageUpload.tsx | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/frontend/src/components/ImageUpload.tsx b/frontend/src/components/ImageUpload.tsx
index fb81bf7..a94e791 100644
--- a/frontend/src/components/ImageUpload.tsx
+++ b/frontend/src/components/ImageUpload.tsx
@@ -2,6 +2,7 @@ import { useState, useEffect, useMemo, useCallback } from "react";
 import { useDropzone } from "react-dropzone";
 import { toast } from "react-hot-toast";
 import axios from 'axios';
+import ColorThief from 'color-thief';
 
 const baseStyle = {
   flex: 1,
@@ -59,6 +60,15 @@ type FileWithPreview = {
                   .then((response) => {
                     // Store the returned colors in the component's state
                     setColors(response.data.colors);
+                    // Extract the dominant color from the uploaded image
+                    try {
+                      const colorThief = new ColorThief();
+                      const dominantColor = colorThief.getColor(dataUrls[0]);
+                      setDominantColor(dominantColor);
+                    } catch (error) {
+                      toast.error("Error extracting dominant color: " + error);
+                      console.error("Error extracting dominant color:", error);
+                    }
                   })
                   .catch((error) => {
                     toast.error("Error extracting colors: " + error);
@@ -165,3 +175,4 @@ export default ImageUpload;
           <div key={index} style={{ backgroundColor: color, width: '50px', height: '50px' }}></div>
         ))}
       </div>
+      <div className="dominant-color" style={{ backgroundColor: `rgb(${dominantColor[0]}, ${dominantColor[1]}, ${dominantColor[2]})`, width: '50px', height: '50px' }}></div>