From ad8b5a5f9864ce9f105e59fec36bd4dbeae97cd2 Mon Sep 17 00:00:00 2001
From: Rutik Wankhade <rutikwankhade2@gmail.com>
Date: Mon, 7 Oct 2024 21:52:02 +0530
Subject: [PATCH 1/3] refactor: create reusable search component for unsplash

---
 src/components/Themes/BackgroundTheme.js | 102 ++-------------------
 src/components/UnsplashSearch.js         | 107 +++++++++++++++++++++++
 2 files changed, 114 insertions(+), 95 deletions(-)
 create mode 100644 src/components/UnsplashSearch.js

diff --git a/src/components/Themes/BackgroundTheme.js b/src/components/Themes/BackgroundTheme.js
index 22b76ec..70dca69 100644
--- a/src/components/Themes/BackgroundTheme.js
+++ b/src/components/Themes/BackgroundTheme.js
@@ -1,83 +1,24 @@
-import React, { useState, useEffect, useContext } from 'react';
-import unsplash from "../../utils/unsplashConfig";
+import React, { useContext } from 'react';
 import { ImgContext } from '../../utils/ImgContext';
+import UnsplashSearch from '../UnsplashSearch';
 
 const BackgroundTheme = ({ config }) => {
-    const { title, author, font, icon, customIcon, platform, bgColor } = config;
-
-    // const [image, setImage] = useState({})
-
-    const [imageList, setImageList] = useState([]);
-    const [searchText, setSearchText] = useState('dev');
-
+    const { title, author, font, icon, customIcon, bgColor } = config;
     const { unsplashImage, setUnsplashImage } = useContext(ImgContext);
 
-    const searchImages = () => {
-
-        unsplash.search
-            .getPhotos({
-                query: searchText,
-                page: 1,
-                per_page: 30,
-                // orientation:'portrait'
-
-
-            })
-            .then(response => {
-                // console.log(response.response.results);
-                setImageList(response.response.results)
-            });
-    }
-
-    useEffect(() => {
-
-        unsplash.search
-            .getPhotos({
-                query: 'setup',
-                page: 1,
-                per_page: 30
-
-            })
-            .then(response => {
-                // console.log(response.response.results);
-                setImageList(response.response.results)
-            });
-    }, [])
-
-    const selectImage = (image) => {
-        setUnsplashImage({
-            url: image.urls.regular,
-            name: image.user.name,
-            avatar: image.user.profile_image.small,
-            profile: `${image.user.links.html}?utm_source=https://coverview.vercel.app&utm_medium=referral`,
-            downloadLink: image.links.download_location
-
-        })
-
-
-    }
-
-    const handleSearchSubmit = (e) => {
-        e.preventDefault();
-        searchImages(searchText);
-
-    }
-
 
     return (
-        <div className=" bg-white rounded">
+        <div className=" bg-white ">
 
 
-            <div className={` overflow-y-hidden flex flex-col rounded ${platform}`}
+            <div className={` overflow-y-hidden flex flex-col`}
                 style={{ backgroundColor: bgColor }}
             >
 
-                <div className="flex flex-row  items-center bg-white  justify-center  ">
-
+                <div className="flex flex-row  items-center bg-white  justify-center ">
 
                     <div className="w-full">
 
-
                         {unsplashImage ?
                             <div className='relative flex group'>
 
@@ -131,37 +72,8 @@ const BackgroundTheme = ({ config }) => {
                             :
                             <div className="flex flex-col p-2  bg-white items-center justify-center">
 
-                                <div className="flex items-center w-full px-6 ">
-                                    <div className="text-lg font-semibold text-gray-700">Click on any image to select</div>
-                                <form onSubmit={(e) => handleSearchSubmit(e)} className=" ml-auto mr-2 w-1/2 flex bg-gray-50 rounded-full border mb-2">
-                                    <input type="text"
-                                        value={searchText}
-                                        placeholder="Search image"
-                                        className="focus:outline-none w-full text-lg bg-gray-50  p-1 px-4  rounded-full border border-gray-50"
-                                        onChange={(e) => setSearchText(e.target.value)}
-                                    />
+                                <UnsplashSearch />
 
-                                    <button type="submit" onClick={() => searchImages(searchText)}>
-                                        <svg className="w-9 h-9 ml-auto mr-1 p-2 bg-gray-700 hover:bg-gray-800 text-white rounded-full" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg>
-                                    </button>
-                                </form>
-
-                                    </div>
-
-
-                                <div className="overflow-y-scroll overflow-x-hidden h-96 justify-center flex flex-wrap">
-                                    {
-                                        imageList.map(image => {
-                                            return <img src={image.urls.regular}
-                                                key={image.id}
-                                                alt={image.alt_description}
-                                                className="rounded m-2 cursor-pointer w-5/12 object-cover h-40"
-                                                onClick={() => selectImage(image)
-                                                }
-                                            />
-                                        })
-                                    }
-                                </div>
                             </div>
 
                         }
diff --git a/src/components/UnsplashSearch.js b/src/components/UnsplashSearch.js
new file mode 100644
index 0000000..5d62ff3
--- /dev/null
+++ b/src/components/UnsplashSearch.js
@@ -0,0 +1,107 @@
+import React, { useState, useEffect, useContext } from 'react';
+import unsplash from '../utils/unsplashConfig';
+import { ImgContext } from '../utils/ImgContext';
+
+const UnsplashSearch = () => {
+
+    const [imageList, setImageList] = useState([]);
+    const [searchText, setSearchText] = useState('setup');
+    const { unsplashImage, setUnsplashImage } = useContext(ImgContext);
+
+
+    const searchImages = () => {
+
+        unsplash.search
+            .getPhotos({
+                query: searchText,
+                page: 1,
+                per_page: 30,
+                // orientation:'portrait'
+
+
+            })
+            .then(response => {
+                // console.log(response.response.results);
+                setImageList(response.response.results)
+            });
+    }
+
+
+    const selectImage = (image) => {
+        setUnsplashImage({
+            url: image.urls.regular,
+            name: image.user.name,
+            avatar: image.user.profile_image.small,
+            profile: `${image.user.links.html}?utm_source=https://coverview.vercel.app&utm_medium=referral`,
+            downloadLink: image.links.download_location
+
+        })
+
+
+    }
+
+    const handleSearchSubmit = (e) => {
+        e.preventDefault();
+        searchImages(searchText);
+
+    }
+
+    useEffect(() => {
+
+        unsplash.search
+            .getPhotos({
+                query: 'setup',
+                page: 1,
+                per_page: 30
+
+            })
+            .then(response => {
+                // console.log(response.response.results);
+                setImageList(response.response.results)
+            });
+    }, [])
+
+    return (
+        <div className='w-full h-full'>
+            <div className="flex flex-col p-2  bg-white items-center justify-center">
+
+                <div className="flex items-center w-full px-6 ">
+                    <form onSubmit={(e) => handleSearchSubmit(e)} className=" mx-auto w-full flex bg-gray-50 rounded-full border border-gray-50 mb-2">
+                        <input type="text"
+                            value={searchText}
+                            placeholder="Search photos"
+                            className="focus:outline-none w-full text-lg bg-gray-50  p-1 px-4  rounded-full  "
+                            onChange={(e) => setSearchText(e.target.value)}
+                        />
+
+                        <button type="submit" onClick={() => searchImages(searchText)}>
+                            <svg className="w-9 h-9 ml-auto  p-2 bg-gray-700 hover:bg-gray-800 text-white rounded-full" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg>
+                        </button>
+                    </form>
+
+                </div>
+
+
+                <div className="overflow-y-scroll w-full overflow-x-hidden h-max justify-center flex flex-wrap">
+                    {
+                        imageList.map(image => {
+                            return <div className="rounded-lg relative cursor-pointer m-1  w-60 "
+                            >
+                                <span className="font-Inter top-2 left-2 absolute text-sm font-semibold text-white opacity-50 ">Click to Select</span>
+                                <img src={image.urls.regular}
+                                    key={image.id}
+                                    alt={image.alt_description}
+                                    onClick={() => selectImage(image)
+                                    }
+                                    className="rounded-lg object-cover h-44 w-full"
+                                />
+                            </div>
+                        })
+                    }
+                </div>
+            </div>
+        </div>
+    );
+}
+
+export default UnsplashSearch;
\ No newline at end of file

From e2ce7e5f6197ad7c74f7b134025b0589df67864a Mon Sep 17 00:00:00 2001
From: Rutik Wankhade <rutikwankhade2@gmail.com>
Date: Mon, 7 Oct 2024 22:16:43 +0530
Subject: [PATCH 2/3] refactor: use unsplash search component in both themes

---
 src/components/Editor.js                 |   4 +-
 src/components/Themes/BackgroundTheme.js |   2 +-
 src/components/Themes/StylishTheme.js    | 100 ++---------------------
 src/components/UnsplashSearch.js         |   9 +-
 src/utils/constants.js                   |   8 +-
 5 files changed, 19 insertions(+), 104 deletions(-)

diff --git a/src/components/Editor.js b/src/components/Editor.js
index f3d0f7a..7a93d03 100644
--- a/src/components/Editor.js
+++ b/src/components/Editor.js
@@ -157,7 +157,7 @@ class Editor extends React.Component {
 
 
 											<div className="flex items-center">
-												<div className="flex flex-col m-2 w-1/2">
+												{/* <div className="flex flex-col m-2 w-1/2">
 													<span className="font-medium text-sm pb-1">Pattern</span>
 													<select
 														onChange={(e) => this.setState({ pattern: e.target.value })}
@@ -184,7 +184,7 @@ class Editor extends React.Component {
 														<option>jupiter</option>
 														<option>sun</option>
 													</select>
-												</div>
+												</div> */}
 
 												<div className="flex flex-col m-2 w-full">
 													<span className="font-medium text-sm pb-1">Platform</span>
diff --git a/src/components/Themes/BackgroundTheme.js b/src/components/Themes/BackgroundTheme.js
index 70dca69..597ffbf 100644
--- a/src/components/Themes/BackgroundTheme.js
+++ b/src/components/Themes/BackgroundTheme.js
@@ -72,7 +72,7 @@ const BackgroundTheme = ({ config }) => {
                             :
                             <div className="flex flex-col p-2  bg-white items-center justify-center">
 
-                                <UnsplashSearch />
+                                <UnsplashSearch largeImgPreview />
 
                             </div>
 
diff --git a/src/components/Themes/StylishTheme.js b/src/components/Themes/StylishTheme.js
index 56615bf..3cc81ff 100644
--- a/src/components/Themes/StylishTheme.js
+++ b/src/components/Themes/StylishTheme.js
@@ -1,68 +1,11 @@
-import React, { useState, useEffect, useContext } from 'react';
-import unsplash from "../../utils/unsplashConfig";
+import React, { useContext } from 'react';
 import { ImgContext } from '../../utils/ImgContext';
+import UnsplashSearch from '../UnsplashSearch';
 
 const StylishTheme = ({ config }) => {
     const { title, author, font, icon, customIcon, bgColor } = config;
-
-    // const [image, setImage] = useState({})
-
-    const [imageList, setImageList] = useState([]);
-    const [searchText, setSearchText] = useState('dev');
-
     const { unsplashImage, setUnsplashImage } = useContext(ImgContext);
 
-    const searchImages = () => {
-
-        unsplash.search
-            .getPhotos({
-                query: searchText,
-                page: 1,
-                per_page: 30,
-                // orientation:'portrait'
-
-
-            })
-            .then(response => {
-                // console.log(response.response.results);
-                setImageList(response.response.results)
-            });
-    }
-
-    useEffect(() => {
-
-        unsplash.search
-            .getPhotos({
-                query: 'setup',
-                page: 1,
-                per_page: 25
-
-            })
-            .then(response => {
-                // console.log(response.response.results);
-                setImageList(response.response.results)
-            });
-    }, [])
-
-    const selectImage = (image) => {
-        setUnsplashImage({
-            url: image.urls.regular,
-            name: image.user.name,
-            avatar: image.user.profile_image.small,
-            profile: `${image.user.links.html}?utm_source=https://coverview.vercel.app&utm_medium=referral`,
-            downloadLink: image.links.download_location
-
-        })
-
-
-    }
-
-    const handleSearchSubmit = (e) => {
-        e.preventDefault();
-        searchImages(searchText);
-
-    }
-
 
     return (
         <div className=" bg-white w-full h-full">
@@ -94,18 +37,15 @@ const StylishTheme = ({ config }) => {
                             </div>
                         </div>
                     </div>
-                    <div className="w-1/2">
+                    <div className="w-1/2 h-full">
 
 
                         {unsplashImage ?
-                            <div className='relative flex group'>
+                            <div className='relative w-full h-max flex group'>
 
-                                <div className="h-96 w-96 ">
+                                <img src={unsplashImage.url && unsplashImage.url} className=" object-cover w-full h-full  " alt="preview" />
 
 
-                                    <img src={unsplashImage.url && unsplashImage.url} className=" object-cover h-96 w-96  " alt="preview" />
-                                </div>
-
                                 <button
                                     onClick={() => setUnsplashImage('')}
                                     className="absolute  top-4 right-2 cursor-pointer">
@@ -128,35 +68,9 @@ const StylishTheme = ({ config }) => {
                                 </div>
                             </div>
                             :
-                            <div className="flex flex-col p-2  bg-white items-center justify-center">
+                            <div className="flex h-max w-full flex-col bg-white items-center justify-center">
 
-                                <form onSubmit={(e) => handleSearchSubmit(e)} className="flex bg-gray-50 rounded-full border mb-2">
-                                    <input type="text"
-                                        value={searchText}
-                                        placeholder="Search image"
-                                        className="focus:outline-none w-max text-lg bg-gray-50  p-1 px-4  rounded-full border border-gray-50"
-                                        onChange={(e) => setSearchText(e.target.value)}
-                                    />
-
-                                    <button type="submit" onClick={() => searchImages(searchText)}>
-                                        <svg className="w-9 h-9 p-2 bg-gray-700 hover:bg-gray-800 text-white rounded-full" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg>
-                                    </button>
-                                </form>
-
-
-                                <div className="overflow-y-scroll overflow-x-hidden h-80">
-                                    {
-                                        imageList.map(image => {
-                                            return <img src={image.urls.regular}
-                                                key={image.id}
-                                                alt={image.alt_description}
-                                                className="rounded m-2 cursor-pointer"
-                                                onClick={() => selectImage(image)
-                                                }
-                                            />
-                                        })
-                                    }
-                                </div>
+                                <UnsplashSearch />
                             </div>
 
                         }
diff --git a/src/components/UnsplashSearch.js b/src/components/UnsplashSearch.js
index 5d62ff3..d28a56d 100644
--- a/src/components/UnsplashSearch.js
+++ b/src/components/UnsplashSearch.js
@@ -2,7 +2,7 @@ import React, { useState, useEffect, useContext } from 'react';
 import unsplash from '../utils/unsplashConfig';
 import { ImgContext } from '../utils/ImgContext';
 
-const UnsplashSearch = () => {
+const UnsplashSearch = ({ largeImgPreview }) => {
 
     const [imageList, setImageList] = useState([]);
     const [searchText, setSearchText] = useState('setup');
@@ -85,15 +85,16 @@ const UnsplashSearch = () => {
                 <div className="overflow-y-scroll w-full overflow-x-hidden h-max justify-center flex flex-wrap">
                     {
                         imageList.map(image => {
-                            return <div className="rounded-lg relative cursor-pointer m-1  w-60 "
+                            return <div key={image.id}
+                                className={`rounded-lg relative cursor-pointer m-1 ${largeImgPreview ? ' h-44 w-60' : 'h-24 w-40'
+                                    }`}
                             >
                                 <span className="font-Inter top-2 left-2 absolute text-sm font-semibold text-white opacity-50 ">Click to Select</span>
                                 <img src={image.urls.regular}
-                                    key={image.id}
                                     alt={image.alt_description}
                                     onClick={() => selectImage(image)
                                     }
-                                    className="rounded-lg object-cover h-44 w-full"
+                                    className="rounded-lg object-cover h-full w-full"
                                 />
                             </div>
                         })
diff --git a/src/utils/constants.js b/src/utils/constants.js
index 550c61a..1dae0fb 100644
--- a/src/utils/constants.js
+++ b/src/utils/constants.js
@@ -14,6 +14,10 @@ export const THEMES = [
         label: 'background',
         preview: backgroundThemePlaceholder
     },
+    {
+        label: 'stylish',
+        preview: stylishThemePlaceholder
+    },
     {
         label: 'basic',
         preview: basicThemePlaceholder
@@ -22,10 +26,6 @@ export const THEMES = [
         label: 'modern',
         preview: modernThemePlaceholder
     },
-    {
-        label: 'stylish',
-        preview: stylishThemePlaceholder
-    },
     {
         label: 'outline',
         preview: outlineThemePlaceholder

From 5f924efdef0ae7a84e86f7ea776a9db2b748da1d Mon Sep 17 00:00:00 2001
From: Rutik Wankhade <rutikwankhade2@gmail.com>
Date: Mon, 7 Oct 2024 22:19:21 +0530
Subject: [PATCH 3/3] fix: fix bakdrop blur inconsistancy issue

---
 src/components/Themes/BackgroundTheme.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Themes/BackgroundTheme.js b/src/components/Themes/BackgroundTheme.js
index 597ffbf..1725e9d 100644
--- a/src/components/Themes/BackgroundTheme.js
+++ b/src/components/Themes/BackgroundTheme.js
@@ -27,7 +27,7 @@ const BackgroundTheme = ({ config }) => {
                                 </div>
 
 
-                                <div className=" backdrop-blur-sm h-full bg-gray-800/60 absolute top-0 right-0 left-0 ">
+                                <div className="h-full bg-gray-800/60 absolute top-0 right-0 left-0 ">
                                     <button
                                         onClick={() => setUnsplashImage('')}
                                         className="absolute  top-2 right-2 cursor-pointer">