mirror of
https://github.com/woodchen-ink/CoverView.git
synced 2025-07-18 05:51:56 +08:00
feat: 在主题组件中集成 Unsplash 图片搜索功能，更新图片展示逻辑
This commit is contained in:
parent
8f9a55ffb1
commit
45f6ecb31c
@ -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 {
|
||||||
|
|
||||||
|
|||||||
@ -1,43 +1,71 @@
|
|||||||
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={`${font} bg-white md:w-10/12 m-auto flex flex-col pt-12 rounded-xl`}>
|
<div className="w-full h-full">
|
||||||
<div className="px-12">
|
{unsplashImage ?
|
||||||
<div>
|
<div className='relative flex group h-full'>
|
||||||
<h1 className="text-3xl md:text-5xl text-gray-800 font-bold text-center">{title}</h1>
|
<div className="h-full w-full">
|
||||||
</div>
|
<img src={unsplashImage.url && unsplashImage.url} className="object-cover h-full w-full" alt="preview" />
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className=" flex mx-4 p-4 rounded-xl items-center bg-white">
|
|
||||||
{
|
|
||||||
customIcon ?
|
|
||||||
<div className="w-12 h-12 ">
|
|
||||||
<img src={customIcon} alt="img" className="rounded-full bg-white p-1 border-white" />
|
|
||||||
</div>
|
</div>
|
||||||
:
|
|
||||||
<div className="mr-auto ml-2 items-center justify-center flex">
|
<div className="h-full bg-gray-800/60 absolute top-0 right-0 left-0 flex items-center justify-center">
|
||||||
<i className={`devicon-${icon.value}-plain p-4 dev-icon text-5xl`}></i>
|
<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>
|
||||||
|
<h1 className="text-3xl md:text-5xl text-gray-800 font-bold text-center">{title}</h1>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex mx-4 mt-8 p-4 rounded-xl items-center bg-white/80">
|
||||||
|
{
|
||||||
|
customIcon ?
|
||||||
|
<div className="w-12 h-12">
|
||||||
|
<img src={customIcon} alt="img" className="rounded-full bg-white p-1 border-white" />
|
||||||
|
</div>
|
||||||
|
:
|
||||||
|
<div className="mr-auto ml-2 items-center justify-center flex">
|
||||||
|
<i className={`devicon-${icon.value}-plain p-4 dev-icon text-5xl`}></i>
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
<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>
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
<h2 className="text-xl ml-auto mr-2 font-semibold">{author}</h2>
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@ -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="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>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div className="flex mx-auto items-center">
|
{image ?
|
||||||
|
<div className="group relative h-full">
|
||||||
|
<img src={image && image} className="object-cover rounded -translate-y-1 h-full w-full" alt="preview" />
|
||||||
|
<button
|
||||||
|
onClick={() => setImage('')}
|
||||||
|
className="absolute top-4 right-2 cursor-pointer">
|
||||||
|
<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>
|
||||||
|
</div>
|
||||||
|
:
|
||||||
|
<div className="flex flex-col px-4 rounded-xl py-20 bg-white items-center justify-center h-full">
|
||||||
|
<input type="file"
|
||||||
|
className="text-sm flex flex-col cursor-pointer mb-2 bg-white rounded border"
|
||||||
|
onChange={(e) => setImage(URL.createObjectURL(e.target.files[0]))}
|
||||||
|
/>
|
||||||
|
<span className="text-center italic">点击上传截图</span>
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div className="bg-white h-3 w-3 rounded-full mx-1"></div>
|
<div className="absolute bottom-4 right-4 opacity-80">
|
||||||
<div className="bg-white h-2 w-20 rounded-full mx-1"></div>
|
<div className="group-hover:flex hidden items-center">
|
||||||
|
<span className="text-sm text-white mx-2">Photo by</span>
|
||||||
</div>
|
<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>
|
||||||
</div>
|
</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>
|
||||||
{image ?
|
|
||||||
<div className="group relative">
|
|
||||||
<img src={image && image} className="object-cover rounded -translate-y-1 h-full" alt="preview" />
|
|
||||||
<button
|
|
||||||
onClick={() => setImage('')}
|
|
||||||
className="ml-auto mr-4 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>
|
|
||||||
|
|
||||||
</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 p-2 bg-white items-center justify-center h-full">
|
||||||
<input type="file"
|
<UnsplashSearch largeImgPreview />
|
||||||
className="text-sm flex flex-col cursor-pointer mb-2 bg-white rounded border"
|
|
||||||
onChange={(e) => setImage(URL.createObjectURL(e.target.files[0]))}
|
|
||||||
/>
|
|
||||||
<span className=" text-center italic">点击上传截图</span>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
}
|
}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,39 +1,71 @@
|
|||||||
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">
|
||||||
customIcon ?
|
<button
|
||||||
<div className=" mx-auto items-center justify-center flex">
|
onClick={() => setUnsplashImage('')}
|
||||||
<img src={customIcon} alt="img" className="w-28 h-28 rounded-full bg-white border-4 border-white" />
|
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 ?
|
||||||
|
<div className="mx-auto items-center justify-center flex">
|
||||||
|
<img src={customIcon} alt="img" className="w-28 h-28 rounded-full bg-white border-4 border-white" />
|
||||||
|
</div>
|
||||||
|
:
|
||||||
|
<div className="rounded-full p-6 w-32 h-32 bg-white mx-auto items-center justify-center flex">
|
||||||
|
<i className={`devicon-${icon.value}-plain p-4 dev-icon text-7xl`}></i>
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
|
||||||
|
<div className="w-2/3">
|
||||||
|
<div className={`${font} bg-white/90 px-12 justify-center text-left rounded-xl py-8 flex flex-col ${pattern}`}>
|
||||||
|
<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>
|
||||||
|
</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>
|
||||||
:
|
:
|
||||||
<div className=" rounded-full p-6 w-32 h-32 bg-white mx-auto items-center justify-center flex">
|
<div className="flex flex-col p-2 bg-white items-center justify-center h-full">
|
||||||
<i className={`devicon-${icon.value}-plain p-4 dev-icon text-7xl`}></i>
|
<UnsplashSearch largeImgPreview />
|
||||||
</div>
|
</div>
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
<div className="h-full w-2/3">
|
|
||||||
<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>
|
|
||||||
<h2 className="text-xl mt-10 font-semibold text-left ">{author}</h2>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,41 +1,69 @@
|
|||||||
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">
|
||||||
<img src={customIcon} alt="img" className="rounded-full object-cover w-24 h-24 bg-white p-1 border-white" />
|
<img src={customIcon} alt="img" className="rounded-full object-cover w-24 h-24 bg-white p-1 border-white" />
|
||||||
|
</div>
|
||||||
|
:
|
||||||
|
<div className="mr-auto ml-2 items-center justify-center flex">
|
||||||
|
<i className={`devicon-${icon.value}-plain text-white p-4 dev-icon text-8xl`}></i>
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
<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`}>
|
||||||
|
<h2 className="text-2xl text-white font-semibold">{author}</h2>
|
||||||
|
</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>
|
||||||
:
|
:
|
||||||
<div className=" mr-auto ml-2 items-center justify-center flex">
|
<div className="flex flex-col p-2 bg-white items-center justify-center h-full">
|
||||||
<i className={`devicon-${icon.value}-plain text-white p-4 dev-icon text-8xl`}></i>
|
<UnsplashSearch largeImgPreview />
|
||||||
</div>
|
</div>
|
||||||
}
|
}
|
||||||
<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 `}>
|
|
||||||
|
|
||||||
<h2 className="text-2xl text-white font-semibold">{author}</h2>
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,53 +1,79 @@
|
|||||||
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>
|
||||||
|
|
||||||
<h1 className={`${font} text-2xl md:text-3xl p-10 text-white font-bold text-center`}>{title}</h1>
|
<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>
|
||||||
|
|
||||||
<div className="w-10/12 group mx-auto mt-auto mb-0 shadow-lg flex flex-col bg-white rounded-t-xl border-white">
|
<h1 className={`${font} text-2xl md:text-3xl p-10 text-white font-bold text-center`}>{title}</h1>
|
||||||
<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-yellow-400 h-3 w-3 rounded-full mx-1"></div>
|
|
||||||
<div className="bg-green-400 h-3 w-3 rounded-full mx-1"></div>
|
|
||||||
<button
|
|
||||||
onClick={() => setImage('')}
|
|
||||||
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>
|
|
||||||
|
|
||||||
</button>
|
<div className="w-10/12 group shadow-lg flex flex-col bg-white rounded-xl border-white">
|
||||||
</div>
|
<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-yellow-400 h-3 w-3 rounded-full mx-1"></div>
|
||||||
|
<div className="bg-green-400 h-3 w-3 rounded-full mx-1"></div>
|
||||||
|
<button
|
||||||
|
onClick={() => setImage('')}
|
||||||
|
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>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{image ?
|
||||||
|
<div className="h-full">
|
||||||
|
<img src={image && image} className="object-cover rounded-b-xl h-full w-full" alt="preview" />
|
||||||
|
</div>
|
||||||
|
:
|
||||||
|
<div className="flex flex-col p-20 py-28 bg-white rounded-b-xl items-center justify-center">
|
||||||
|
<input type="file"
|
||||||
|
className="text-xl cursor-pointer mb-2 bg-white rounded border"
|
||||||
|
onChange={(e) => setImage(URL.createObjectURL(e.target.files[0]))}
|
||||||
|
/>
|
||||||
|
<span className="text-center italic">点击上传截图</span>
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
{image ?
|
<div className="absolute bottom-4 right-4 opacity-80">
|
||||||
<div className="">
|
<div className="group-hover:flex hidden items-center">
|
||||||
<img src={image && image} className="object-cover " alt="preview" />
|
<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>
|
||||||
:
|
:
|
||||||
<div className="flex flex-col p-20 py-28 bg-white items-center justify-center">
|
<div className="flex flex-col p-2 bg-white items-center justify-center h-full">
|
||||||
<input type="file"
|
<UnsplashSearch largeImgPreview />
|
||||||
className="text-xl cursor-pointer mb-2 bg-white rounded border"
|
|
||||||
onChange={(e) => setImage(URL.createObjectURL(e.target.files[0]))}
|
|
||||||
/>
|
|
||||||
<span className=" text-center italic">点击上传截图</span>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
}
|
}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@ -6,81 +6,60 @@ 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">
|
<h1 className="text-4xl font-bold text-gray-800">{title}</h1>
|
||||||
<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>
|
|
||||||
<div className="flex items-center mt-10 text-left">
|
<div className="flex items-center mt-10 text-left">
|
||||||
{
|
{
|
||||||
customIcon ?
|
customIcon ?
|
||||||
<div className=" ">
|
<div className="">
|
||||||
<img src={customIcon} alt="img" className="w-12 h-12 mr-2 rounded-full bg-white border border-white" />
|
<img src={customIcon} alt="img" className="w-12 h-12 mr-2 rounded-full bg-white border border-white" />
|
||||||
</div>
|
</div>
|
||||||
:
|
:
|
||||||
<div className="mr-2 items-center justify-center flex">
|
<div className="mr-2 items-center justify-center flex">
|
||||||
<i className={`devicon-${icon.value}-plain dev-icon text-3xl`}></i>
|
<i className={`devicon-${icon.value}-plain dev-icon text-3xl`}></i>
|
||||||
</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">
|
||||||
<div className=" group-hover:flex hidden items-center">
|
<div className="group-hover:flex hidden items-center">
|
||||||
<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>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user