wood/CoverView
1
0
Fork 0
mirror of https://github.com/woodchen-ink/CoverView.git synced 2025-07-18 14:01:56 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: 在主题组件中集成 Unsplash 图片搜索功能，更新图片展示逻辑

Browse Source
This commit is contained in:
wood chen 2025-06-20 16:25:28 +08:00
parent 8f9a55ffb1
commit 45f6ecb31c
7 changed files with 292 additions and 184 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/Editor.js
View File

@ -25,7 +25,7 @@ const defaultSettings = {
platform: 'hashnode' platform: 'hashnode'
}; };
const devIconsUrl = "https://mirror.20200511.xyz/https://raw.githubusercontent.com/devicons/devicon/master/devicon.json" const devIconsUrl = "https://raw.githubusercontent.com/devicons/devicon/master/devicon.json"
class Editor extends React.Component { class Editor extends React.Component {

52
src/components/Themes/BasicTheme.js
View File

@ -1,23 +1,37 @@
import React from 'react'; import React, { useContext } from 'react';
import { ImgContext } from '../../utils/ImgContext';
import UnsplashSearch from '../UnsplashSearch';
const BasicTheme = ({ config }) => { const BasicTheme = ({ config }) => {
const { title, bgColor, pattern, author, icon, font, customIcon } = config; const { title, bgColor, pattern, author, icon, font, customIcon } = config;
const { unsplashImage, setUnsplashImage } = useContext(ImgContext);
return ( return (
<div className="bg-white w-full h-full"> <div className="bg-white w-full h-full">
<div className={`overflow-y-hidden flex text-gray-800 items-center h-full ${pattern} `} <div className={`overflow-y-hidden flex flex-col h-full`}
style={{ backgroundColor: bgColor }} style={{ backgroundColor: bgColor }}
> >
<div className="flex flex-row items-center bg-white justify-center h-full">
<div className="w-full h-full">
{unsplashImage ?
<div className='relative flex group h-full'>
<div className="h-full w-full">
<img src={unsplashImage.url && unsplashImage.url} className="object-cover h-full w-full" alt="preview" />
</div>
<div className={`${font} bg-white md:w-10/12 m-auto flex flex-col pt-12 rounded-xl`}> <div className="h-full bg-gray-800/60 absolute top-0 right-0 left-0 flex items-center justify-center">
<div className="px-12"> <button
onClick={() => setUnsplashImage('')}
className="absolute top-2 right-2 cursor-pointer">
<svg className="group-hover:inline-block hidden w-8 h-8 text-gray-800 bg-white p-2 rounded-full z-10" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M6 18L18 6M6 6l12 12"></path></svg>
</button>
<div className={`${font} bg-white/90 md:w-10/12 mx-auto flex flex-col py-12 px-12 rounded-xl ${pattern}`}>
<div> <div>
<h1 className="text-3xl md:text-5xl text-gray-800 font-bold text-center">{title}</h1> <h1 className="text-3xl md:text-5xl text-gray-800 font-bold text-center">{title}</h1>
</div> </div>
</div>
<div className=" flex mx-4 p-4 rounded-xl items-center bg-white"> <div className="flex mx-4 mt-8 p-4 rounded-xl items-center bg-white/80">
{ {
customIcon ? customIcon ?
<div className="w-12 h-12"> <div className="w-12 h-12">
@ -28,16 +42,30 @@ const BasicTheme = ({ config }) => {
<i className={`devicon-${icon.value}-plain p-4 dev-icon text-5xl`}></i> <i className={`devicon-${icon.value}-plain p-4 dev-icon text-5xl`}></i>
</div> </div>
} }
<h2 className="text-xl ml-auto mr-2 font-semibold">{author}</h2> <h2 className="text-xl ml-auto mr-2 font-semibold">{author}</h2>
</div>
</div>
</div> </div>
<div className="absolute bottom-4 right-4 opacity-80">
<div className="group-hover:flex hidden items-center">
<span className="text-sm text-white mx-2">Photo by</span>
<a href={unsplashImage.profile} target="_blank" rel="noreferrer" className="cursor-pointer flex items-center bg-gray-300 rounded-full text-sm">
<img src={unsplashImage.avatar && unsplashImage.avatar} alt={unsplashImage.name} className="h-6 w-6 rounded-full mr-2" />
<span className="pr-2">{unsplashImage.name}</span>
</a>
<a href="https://unsplash.com/?utm_source=https://coverview.czl.net&utm_medium=referral" className="text-sm text-white mx-2">Unsplash</a>
</div>
</div>
</div>
:
<div className="flex flex-col p-2 bg-white items-center justify-center h-full">
<UnsplashSearch largeImgPreview />
</div>
}
</div>
</div> </div>
</div> </div>
</div> </div>
); );
} }

69
src/components/Themes/MobileMockupTheme.js
View File

@ -1,65 +1,80 @@
import React, { useState } from 'react'; import React, { useState, useContext } from 'react';
import { ImgContext } from '../../utils/ImgContext';
import UnsplashSearch from '../UnsplashSearch';
const MobileMockupTheme = ({ config }) => { const MobileMockupTheme = ({ config }) => {
const { bgColor, title, font } = config; const { bgColor, title, font } = config;
const { unsplashImage, setUnsplashImage } = useContext(ImgContext);
const [image, setImage] = useState() const [image, setImage] = useState();
return ( return (
<div className={`bg-white w-full h-full`}> <div className={`bg-white w-full h-full`}>
<div className={`overflow-y-hidden flex flex-row w-full h-full justify-center`}
<div className={`overflow-y-hidden flex flex-row px-10 items-center w-full h-full justify-center pt-4`}
style={{ backgroundColor: bgColor }} style={{ backgroundColor: bgColor }}
> >
<div className="w-full h-full">
{unsplashImage ?
<div className='relative flex group h-full'>
<div className="h-full w-full">
<img src={unsplashImage.url && unsplashImage.url} className="object-cover h-full w-full" alt="preview" />
</div>
<div className="h-full bg-gray-800/60 absolute top-0 right-0 left-0 flex items-center px-10">
<button
onClick={() => setUnsplashImage('')}
className="absolute top-2 right-2 cursor-pointer">
<svg className="group-hover:inline-block hidden w-8 h-8 text-gray-800 bg-white p-2 rounded-full z-10" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M6 18L18 6M6 6l12 12"></path></svg>
</button>
<h1 className={`${font} text-2xl w-1/2 md:text-4xl px-4 text-white font-bold text-left`}>{title}</h1> <h1 className={`${font} text-2xl w-1/2 md:text-4xl px-4 text-white font-bold text-left`}>{title}</h1>
<div className="w-5/12 mx-auto m-4 mt-10 group h-full shadow-lg flex flex-col bg-white border-t-8 border-x-8 border-gray-800 rounded-t-3xl border-white"> <div className="w-5/12 mx-auto m-4 group h-4/5 shadow-lg flex flex-col bg-white border-t-8 border-x-8 border-gray-800 rounded-t-3xl border-white">
<div className="bg-gray-800 h-8 w-full p-2 pb-3 flex items-center rounded-t"> <div className="bg-gray-800 h-8 w-full p-2 pb-3 flex items-center rounded-t">
<div className="flex mx-auto items-center"> <div className="flex mx-auto items-center">
<div className="bg-white h-3 w-3 rounded-full mx-1"></div> <div className="bg-white h-3 w-3 rounded-full mx-1"></div>
<div className="bg-white h-2 w-20 rounded-full mx-1"></div> <div className="bg-white h-2 w-20 rounded-full mx-1"></div>
</div> </div>
</div> </div>
{image ? {image ?
<div className="group relative"> <div className="group relative h-full">
<img src={image && image} className="object-cover rounded -translate-y-1 h-full" alt="preview" /> <img src={image && image} className="object-cover rounded -translate-y-1 h-full w-full" alt="preview" />
<button <button
onClick={() => setImage('')} onClick={() => setImage('')}
className="ml-auto mr-4 cursor-pointer"> className="absolute top-4 right-2 cursor-pointer">
<svg className="group-hover:inline-block absolute top-4 right-2 bg-gray-500 hidden w-8 h-8 p-2 text-white rounded-full z-10" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M6 18L18 6M6 6l12 12"></path></svg> <svg className="group-hover:inline-block hidden w-6 h-6 bg-gray-500 p-1 text-white rounded-full z-10" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M6 18L18 6M6 6l12 12"></path></svg>
</button> </button>
</div> </div>
: :
<div className="flex flex-col px-4 rounded-xl py-20 bg-white items-center justify-center"> <div className="flex flex-col px-4 rounded-xl py-20 bg-white items-center justify-center h-full">
<input type="file" <input type="file"
className="text-sm flex flex-col cursor-pointer mb-2 bg-white rounded border" className="text-sm flex flex-col cursor-pointer mb-2 bg-white rounded border"
onChange={(e) => setImage(URL.createObjectURL(e.target.files[0]))} onChange={(e) => setImage(URL.createObjectURL(e.target.files[0]))}
/> />
<span className="text-center italic">点击上传截图</span> <span className="text-center italic">点击上传截图</span>
</div> </div>
} }
</div> </div>
</div> </div>
<div className="absolute bottom-4 right-4 opacity-80">
<div className="group-hover:flex hidden items-center">
<span className="text-sm text-white mx-2">Photo by</span>
<a href={unsplashImage.profile} target="_blank" rel="noreferrer" className="cursor-pointer flex items-center bg-gray-300 rounded-full text-sm">
<img src={unsplashImage.avatar && unsplashImage.avatar} alt={unsplashImage.name} className="h-6 w-6 rounded-full mr-2" />
<span className="pr-2">{unsplashImage.name}</span>
</a>
<a href="https://unsplash.com/?utm_source=https://coverview.czl.net&utm_medium=referral" className="text-sm text-white mx-2">Unsplash</a>
</div>
</div>
</div>
:
<div className="flex flex-col p-2 bg-white items-center justify-center h-full">
<UnsplashSearch largeImgPreview />
</div>
}
</div>
</div>
</div> </div>
); );
} }

48
src/components/Themes/ModernTheme.js
View File

@ -1,17 +1,32 @@
import React from 'react'; import React, { useContext } from 'react';
import { ImgContext } from '../../utils/ImgContext';
import UnsplashSearch from '../UnsplashSearch';
const ModernTheme = ({ config }) => { const ModernTheme = ({ config }) => {
const { title, bgColor, pattern, author, icon, font, customIcon } = config; const { title, bgColor, pattern, author, icon, font, customIcon } = config;
const { unsplashImage, setUnsplashImage } = useContext(ImgContext);
return ( return (
<div className="w-full h-full bg-white"> <div className="w-full h-full bg-white">
<div className="overflow-y-hidden w-full h-full flex items-center"> <div className="overflow-y-hidden w-full h-full flex items-center">
<div className={` h-full w-full p-4 text-gray-800 flex items-center ${pattern} `} <div className="h-full w-full flex items-center"
style={{ backgroundColor: bgColor }} style={{ backgroundColor: bgColor }}
> >
<div className="w-full h-full">
{unsplashImage ?
<div className='relative flex group h-full'>
<div className="h-full w-full">
<img src={unsplashImage.url && unsplashImage.url} className="object-cover h-full w-full" alt="preview" />
</div>
<div className="h-full bg-gray-800/60 absolute top-0 right-0 left-0 flex items-center">
<button
onClick={() => setUnsplashImage('')}
className="absolute top-2 right-2 cursor-pointer">
<svg className="group-hover:inline-block hidden w-8 h-8 text-gray-800 bg-white p-2 rounded-full z-10" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M6 18L18 6M6 6l12 12"></path></svg>
</button>
<div className="w-full flex items-center px-8">
{ {
customIcon ? customIcon ?
<div className="mx-auto items-center justify-center flex"> <div className="mx-auto items-center justify-center flex">
@ -23,17 +38,34 @@ const ModernTheme = ({ config }) => {
</div> </div>
} }
<div className="w-2/3">
<div className="h-full w-2/3"> <div className={`${font} bg-white/90 px-12 justify-center text-left rounded-xl py-8 flex flex-col ${pattern}`}>
<div className={`${font} bg-white px-12 justify-center text-left rounded-xl h-full p-4 flex flex-col`}>
<h1 className="text-3xl md:text-5xl font-bold text-gray-800">{title}</h1> <h1 className="text-3xl md:text-5xl font-bold text-gray-800">{title}</h1>
<h2 className="text-xl mt-10 font-semibold text-left">{author}</h2> <h2 className="text-xl mt-10 font-semibold text-left">{author}</h2>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div className="absolute bottom-4 right-4 opacity-80">
<div className="group-hover:flex hidden items-center">
<span className="text-sm text-white mx-2">Photo by</span>
<a href={unsplashImage.profile} target="_blank" rel="noreferrer" className="cursor-pointer flex items-center bg-gray-300 rounded-full text-sm">
<img src={unsplashImage.avatar && unsplashImage.avatar} alt={unsplashImage.name} className="h-6 w-6 rounded-full mr-2" />
<span className="pr-2">{unsplashImage.name}</span>
</a>
<a href="https://unsplash.com/?utm_source=https://coverview.czl.net&utm_medium=referral" className="text-sm text-white mx-2">Unsplash</a>
</div>
</div>
</div>
:
<div className="flex flex-col p-2 bg-white items-center justify-center h-full">
<UnsplashSearch largeImgPreview />
</div>
}
</div>
</div>
</div>
</div> </div>
); );
} }

50
src/components/Themes/OutlineTheme.js
View File

@ -1,17 +1,32 @@
import React from 'react'; import React, { useContext } from 'react';
import { ImgContext } from '../../utils/ImgContext';
import UnsplashSearch from '../UnsplashSearch';
const OutlineTheme = ({ config }) => { const OutlineTheme = ({ config }) => {
const { title, bgColor, author, icon, font, customIcon } = config; const { title, bgColor, author, icon, font, customIcon } = config;
const { unsplashImage, setUnsplashImage } = useContext(ImgContext);
return ( return (
<div className="w-full h-full bg-white"> <div className="w-full h-full bg-white">
<div className={`overflow-y-hidden flex flex-col text-gray-800 h-full`}
<div className={`overflow-y-hidden flex flex-col text-gray-800 px-10 h-full`}
style={{ backgroundColor: bgColor }} style={{ backgroundColor: bgColor }}
> >
<div className="flex flex-row items-center bg-white justify-center h-full">
<div className="w-full h-full">
{unsplashImage ?
<div className='relative flex group h-full'>
<div className="h-full w-full">
<img src={unsplashImage.url && unsplashImage.url} className="object-cover h-full w-full" alt="preview" />
</div>
<div className="h-full bg-gray-800/60 absolute top-0 right-0 left-0 flex items-center justify-center">
<button
onClick={() => setUnsplashImage('')}
className="absolute top-2 right-2 cursor-pointer">
<svg className="group-hover:inline-block hidden w-8 h-8 text-gray-800 bg-white p-2 rounded-full z-10" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M6 18L18 6M6 6l12 12"></path></svg>
</button>
<div className={`${font} rounded-2xl py-6 flex flex-col `}> <div className={`${font} rounded-2xl py-6 px-10 flex flex-col mx-10`}>
{ {
customIcon ? customIcon ?
<div className="m-6"> <div className="m-6">
@ -25,17 +40,30 @@ const OutlineTheme = ({ config }) => {
<h1 className="text-3xl p-4 text-white md:text-5xl font-bold">{title}</h1> <h1 className="text-3xl p-4 text-white md:text-5xl font-bold">{title}</h1>
<div className={`${font} w-full h-16 flex mt-auto mb-0 p-2 px-6 items-center`}> <div className={`${font} w-full h-16 flex mt-auto mb-0 p-2 px-6 items-center`}>
<h2 className="text-2xl text-white font-semibold">{author}</h2> <h2 className="text-2xl text-white font-semibold">{author}</h2>
</div>
</div> </div>
</div> </div>
<div className="absolute bottom-4 right-4 opacity-80">
<div className="group-hover:flex hidden items-center">
<span className="text-sm text-white mx-2">Photo by</span>
<a href={unsplashImage.profile} target="_blank" rel="noreferrer" className="cursor-pointer flex items-center bg-gray-300 rounded-full text-sm">
<img src={unsplashImage.avatar && unsplashImage.avatar} alt={unsplashImage.name} className="h-6 w-6 rounded-full mr-2" />
<span className="pr-2">{unsplashImage.name}</span>
</a>
<a href="https://unsplash.com/?utm_source=https://coverview.czl.net&utm_medium=referral" className="text-sm text-white mx-2">Unsplash</a>
</div>
</div>
</div>
:
<div className="flex flex-col p-2 bg-white items-center justify-center h-full">
<UnsplashSearch largeImgPreview />
</div>
}
</div>
</div>
</div> </div>
</div> </div>
); );
} }

56
src/components/Themes/PreviewTheme.js
View File

@ -1,21 +1,34 @@
import React, { useState } from 'react'; import React, { useState, useContext } from 'react';
import { ImgContext } from '../../utils/ImgContext';
import UnsplashSearch from '../UnsplashSearch';
const PreviewTheme = ({ config }) => { const PreviewTheme = ({ config }) => {
const { bgColor, title, font } = config; const { bgColor, title, font } = config;
const { unsplashImage, setUnsplashImage } = useContext(ImgContext);
const [image, setImage] = useState() const [image, setImage] = useState();
return ( return (
<div className="w-full h-full bg-white"> <div className="w-full h-full bg-white">
<div className={`overflow-y-hidden flex flex-col w-full h-full`}
<div className={`overflow-y-hidden flex flex-col px-4 pt-4 w-full h-full`}
style={{ backgroundColor: bgColor }} style={{ backgroundColor: bgColor }}
> >
<div className="w-full h-full">
{unsplashImage ?
<div className='relative flex group h-full'>
<div className="h-full w-full">
<img src={unsplashImage.url && unsplashImage.url} className="object-cover h-full w-full" alt="preview" />
</div>
<div className="h-full bg-gray-800/60 absolute top-0 right-0 left-0 flex flex-col items-center justify-center px-4">
<button
onClick={() => setUnsplashImage('')}
className="absolute top-2 right-2 cursor-pointer">
<svg className="group-hover:inline-block hidden w-8 h-8 text-gray-800 bg-white p-2 rounded-full z-10" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M6 18L18 6M6 6l12 12"></path></svg>
</button>
<h1 className={`${font} text-2xl md:text-3xl p-10 text-white font-bold text-center`}>{title}</h1> <h1 className={`${font} text-2xl md:text-3xl p-10 text-white font-bold text-center`}>{title}</h1>
<div className="w-10/12 group mx-auto mt-auto mb-0 shadow-lg flex flex-col bg-white rounded-t-xl border-white"> <div className="w-10/12 group shadow-lg flex flex-col bg-white rounded-xl border-white">
<div className="bg-gray-800 h-8 w-full p-2 flex items-center rounded-t-xl"> <div className="bg-gray-800 h-8 w-full p-2 flex items-center rounded-t-xl">
<div className="bg-red-400 h-3 w-3 rounded-full mx-1"></div> <div className="bg-red-400 h-3 w-3 rounded-full mx-1"></div>
<div className="bg-yellow-400 h-3 w-3 rounded-full mx-1"></div> <div className="bg-yellow-400 h-3 w-3 rounded-full mx-1"></div>
@ -24,30 +37,43 @@ const PreviewTheme = ({ config }) => {
onClick={() => setImage('')} onClick={() => setImage('')}
className="ml-auto mr-4 cursor-pointer"> className="ml-auto mr-4 cursor-pointer">
<svg className="group-hover:inline-block hidden w-4 h-4 text-white rounded-full z-10" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M6 18L18 6M6 6l12 12"></path></svg> <svg className="group-hover:inline-block hidden w-4 h-4 text-white rounded-full z-10" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M6 18L18 6M6 6l12 12"></path></svg>
</button> </button>
</div> </div>
{image ? {image ?
<div className=""> <div className="h-full">
<img src={image && image} className="object-cover " alt="preview" /> <img src={image && image} className="object-cover rounded-b-xl h-full w-full" alt="preview" />
</div> </div>
: :
<div className="flex flex-col p-20 py-28 bg-white items-center justify-center"> <div className="flex flex-col p-20 py-28 bg-white rounded-b-xl items-center justify-center">
<input type="file" <input type="file"
className="text-xl cursor-pointer mb-2 bg-white rounded border" className="text-xl cursor-pointer mb-2 bg-white rounded border"
onChange={(e) => setImage(URL.createObjectURL(e.target.files[0]))} onChange={(e) => setImage(URL.createObjectURL(e.target.files[0]))}
/> />
<span className="text-center italic">点击上传截图</span> <span className="text-center italic">点击上传截图</span>
</div> </div>
} }
</div> </div>
</div> </div>
<div className="absolute bottom-4 right-4 opacity-80">
<div className="group-hover:flex hidden items-center">
<span className="text-sm text-white mx-2">Photo by</span>
<a href={unsplashImage.profile} target="_blank" rel="noreferrer" className="cursor-pointer flex items-center bg-gray-300 rounded-full text-sm">
<img src={unsplashImage.avatar && unsplashImage.avatar} alt={unsplashImage.name} className="h-6 w-6 rounded-full mr-2" />
<span className="pr-2">{unsplashImage.name}</span>
</a>
<a href="https://unsplash.com/?utm_source=https://coverview.czl.net&utm_medium=referral" className="text-sm text-white mx-2">Unsplash</a>
</div>
</div>
</div>
:
<div className="flex flex-col p-2 bg-white items-center justify-center h-full">
<UnsplashSearch largeImgPreview />
</div>
}
</div>
</div>
</div> </div>
); );
} }

35
src/components/Themes/StylishTheme.js
View File

@ -6,19 +6,14 @@ const StylishTheme = ({ config }) => {
const { title, author, font, icon, customIcon, bgColor } = config; const { title, author, font, icon, customIcon, bgColor } = config;
const { unsplashImage, setUnsplashImage } = useContext(ImgContext); const { unsplashImage, setUnsplashImage } = useContext(ImgContext);
return ( return (
<div className="bg-white w-full h-full"> <div className="bg-white w-full h-full">
<div className={`overflow-y-hidden flex flex-col h-full`}
<div className={` overflow-y-hidden flex flex-col`}
style={{ backgroundColor: bgColor }} style={{ backgroundColor: bgColor }}
> >
<div className="flex flex-row items-center bg-white justify-center h-full">
<div className="flex flex-row items-center bg-white justify-center"> <div className="h-full w-1/2 bg-white rounded-l-xl flex items-center">
<div className={`${font} px-12 justify-center text-left rounded-xl w-full p-4 flex flex-col`}>
<div className="h-full w-1/2 bg-white rounded-l-xl">
<div className={`${font} px-12 justify-center text-left rounded-xl h-full p-4 flex flex-col`}>
<h1 className="text-4xl font-bold text-gray-800">{title}</h1> <h1 className="text-4xl font-bold text-gray-800">{title}</h1>
<div className="flex items-center mt-10 text-left"> <div className="flex items-center mt-10 text-left">
{ {
@ -32,25 +27,18 @@ const StylishTheme = ({ config }) => {
</div> </div>
} }
<h2 className="text-xl font-semibold text-left">{author}</h2> <h2 className="text-xl font-semibold text-left">{author}</h2>
</div> </div>
</div> </div>
</div> </div>
<div className="w-1/2 h-full"> <div className="w-1/2 h-full">
{unsplashImage ? {unsplashImage ?
<div className='relative w-full h-max flex group'> <div className='relative w-full h-full flex group'>
<img src={unsplashImage.url && unsplashImage.url} className="object-cover w-full h-full rounded-r-xl" alt="preview" />
<img src={unsplashImage.url && unsplashImage.url} className=" object-cover w-full h-full " alt="preview" />
<button <button
onClick={() => setUnsplashImage('')} onClick={() => setUnsplashImage('')}
className="absolute top-4 right-2 cursor-pointer"> className="absolute top-4 right-2 cursor-pointer">
<svg className="group-hover:inline-block hidden w-6 h-6 text-gray-800 bg-white p-1 rounded-full z-10" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M6 18L18 6M6 6l12 12"></path></svg> <svg className="group-hover:inline-block hidden w-6 h-6 text-gray-800 bg-white p-1 rounded-full z-10" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M6 18L18 6M6 6l12 12"></path></svg>
</button> </button>
<div className="absolute bottom-4 right-4 opacity-80"> <div className="absolute bottom-4 right-4 opacity-80">
@ -58,29 +46,20 @@ const StylishTheme = ({ config }) => {
<span className="text-sm text-white mx-2">Photo by</span> <span className="text-sm text-white mx-2">Photo by</span>
<a href={unsplashImage.profile} target="_blank" rel="noreferrer" className="cursor-pointer flex items-center bg-gray-300 rounded-full text-sm"> <a href={unsplashImage.profile} target="_blank" rel="noreferrer" className="cursor-pointer flex items-center bg-gray-300 rounded-full text-sm">
<img src={unsplashImage.avatar && unsplashImage.avatar} alt={unsplashImage.name} className="h-6 w-6 rounded-full mr-2" /> <img src={unsplashImage.avatar && unsplashImage.avatar} alt={unsplashImage.name} className="h-6 w-6 rounded-full mr-2" />
<span className="pr-2">{unsplashImage.name}</span> <span className="pr-2">{unsplashImage.name}</span>
</a> </a>
<a href="https://unsplash.com/?utm_source=https://coverview.czl.net&utm_medium=referral" className="text-sm text-white mx-2">Unsplash</a> <a href="https://unsplash.com/?utm_source=https://coverview.czl.net&utm_medium=referral" className="text-sm text-white mx-2">Unsplash</a>
</div> </div>
</div> </div>
</div> </div>
: :
<div className="flex h-max w-full flex-col bg-white items-center justify-center"> <div className="flex h-full w-full flex-col bg-white items-center justify-center rounded-r-xl">
<UnsplashSearch /> <UnsplashSearch />
</div> </div>
} }
</div> </div>
</div> </div>
</div> </div>
</div> </div>
); );
} }