refactor: use unsplash search component in both themes

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>

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>
 

src/components/Themes/StylishTheme.js

@@ -1,68 +1,11 @@
-import React, { useState, useEffect, useContext } from 'react';
+import React, { useContext } from 'react';
-import unsplash from "../../utils/unsplashConfig";
 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">
+                                <UnsplashSearch />
-                                    <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>
                             </div>
 
                         }

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>
                         })

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