mirror of
https://github.com/woodchen-ink/CoverView.git
synced 2025-07-18 05:51:56 +08:00
rename component and remove unused css file
This commit is contained in:
rutik wankhade
parent
e673d157e2
commit
b1ef160bcc
1
src/assets/icons/reset.svg
Normal file
1
src/assets/icons/reset.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><path d="M12 16c1.671 0 3-1.331 3-3s-1.329-3-3-3-3 1.331-3 3 1.329 3 3 3z"></path><path d="M20.817 11.186a8.94 8.94 0 0 0-1.355-3.219 9.053 9.053 0 0 0-2.43-2.43 8.95 8.95 0 0 0-3.219-1.355 9.028 9.028 0 0 0-1.838-.18V2L8 5l3.975 3V6.002c.484-.002.968.044 1.435.14a6.961 6.961 0 0 1 2.502 1.053 7.005 7.005 0 0 1 1.892 1.892A6.967 6.967 0 0 1 19 13a7.032 7.032 0 0 1-.55 2.725 7.11 7.11 0 0 1-.644 1.188 7.2 7.2 0 0 1-.858 1.039 7.028 7.028 0 0 1-3.536 1.907 7.13 7.13 0 0 1-2.822 0 6.961 6.961 0 0 1-2.503-1.054 7.002 7.002 0 0 1-1.89-1.89A6.996 6.996 0 0 1 5 13H3a9.02 9.02 0 0 0 1.539 5.034 9.096 9.096 0 0 0 2.428 2.428A8.95 8.95 0 0 0 12 22a9.09 9.09 0 0 0 1.814-.183 9.014 9.014 0 0 0 3.218-1.355 8.886 8.886 0 0 0 1.331-1.099 9.228 9.228 0 0 0 1.1-1.332A8.952 8.952 0 0 0 21 13a9.09 9.09 0 0 0-.183-1.814z"></path></svg>
|
||||
|
After Width: | Height: | Size: 890 B |
@ -1,13 +1,12 @@
|
||||
import React from 'react';
|
||||
import ConfigCover from './ConfigCover';
|
||||
import Navbar from './Navbar';
|
||||
import Editor from './Editor';
|
||||
|
||||
class App extends React.Component {
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div className="content ">
|
||||
{/* <Navbar /> */}
|
||||
<ConfigCover />
|
||||
<Editor />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@ -1,82 +0,0 @@
|
||||
body {
|
||||
background-color: #f2f2f2;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
details{
|
||||
font-size: 1rem;
|
||||
box-shadow: 0 10px 15px -5px #f2f2f2;
|
||||
width: 100%;
|
||||
background: #ffffff;
|
||||
border-radius: 5px;
|
||||
position: relative;
|
||||
max-width: 400px;
|
||||
padding:5px;
|
||||
border: 2px solid #f2f2f2;
|
||||
margin:4px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
.flex-card{
|
||||
display: flex;
|
||||
flex-direction:row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
}
|
||||
|
||||
|
||||
.blog-cover {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
margin: 60px;
|
||||
}
|
||||
label{
|
||||
margin: 5px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.input-color{
|
||||
padding:1px;
|
||||
width:40px;
|
||||
height:40px;
|
||||
}
|
||||
|
||||
.font-size{
|
||||
padding:2px;
|
||||
width:50px;
|
||||
}
|
||||
|
||||
.input-md{
|
||||
width:100px;
|
||||
}
|
||||
|
||||
|
||||
.reset-btn {
|
||||
margin-top: 20px;
|
||||
font-size: 18px;
|
||||
padding:6px;
|
||||
|
||||
}
|
||||
|
||||
@media screen and (max-width: 600px) {
|
||||
.main-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.config-container{width:auto;}
|
||||
.blog-cover{margin:0px;}
|
||||
.card{margin:10px;}
|
||||
|
||||
}
|
||||
@ -62,23 +62,6 @@ h1 {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
button {
|
||||
background-color: #634f7d;
|
||||
font-weight: 600;
|
||||
color: #ffffff;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
padding: 10px;
|
||||
width: 150px;
|
||||
margin-top: 20px;
|
||||
text-align: center;
|
||||
box-shadow: 4px 4px #cccccc;
|
||||
|
||||
}
|
||||
|
||||
button:hover {
|
||||
background-color: #54466b;
|
||||
}
|
||||
|
||||
@media screen and (max-width:600px) {
|
||||
.cover {
|
||||
|
||||
@ -1,9 +1,10 @@
|
||||
import React from "react";
|
||||
import "./ConfigCover.css";
|
||||
import CoverImage from "./CoverImage";
|
||||
import ComponentToImg from "./ComponentToImg";
|
||||
import Select from 'react-select';
|
||||
import RandomTheme from './RandomTheme';
|
||||
import resetIcon from '../assets/icons/reset.svg'
|
||||
|
||||
|
||||
const defaultSettings = {
|
||||
title: "How I built my first project with react",
|
||||
@ -22,7 +23,7 @@ const devIconsUrl = "https://raw.githubusercontent.com/devicons/devicon/master/d
|
||||
// { value: 'javascript', label: 'Javascript' },
|
||||
// { value: 'python', label: 'Python' },
|
||||
|
||||
class ConfigCover extends React.Component {
|
||||
class Editor extends React.Component {
|
||||
|
||||
state = defaultSettings;
|
||||
componentDidMount() {
|
||||
@ -41,7 +42,7 @@ class ConfigCover extends React.Component {
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div className="flex ">
|
||||
<div className="flex bg-gray-50 ">
|
||||
<div className="bg-white p-4 flex flex-col md:w-1/4">
|
||||
{/* <p className="tagline"><span role="img" aria-label="tool"> 🛠 </span> Creating cover images for your blogs is now super easy</p> */}
|
||||
|
||||
@ -151,8 +152,6 @@ class ConfigCover extends React.Component {
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{/* <div className="mx-4 my-1">
|
||||
<h6>Download As</h6>
|
||||
<select onChange={(e) => this.setState({ download: e.target.value })}
|
||||
@ -163,18 +162,20 @@ class ConfigCover extends React.Component {
|
||||
</select>
|
||||
</div> */}
|
||||
|
||||
{/*
|
||||
<button
|
||||
className="reset-btn mx-auto"
|
||||
className="flex items-center mx-auto border p-2 bg-green-400"
|
||||
onClick={this.handleReset}>
|
||||
Reset
|
||||
</button>
|
||||
<img src={resetIcon} />
|
||||
<span>Reset</span>
|
||||
</button> */}
|
||||
</div>
|
||||
|
||||
<div className="m-2 items-center justify-center flex">
|
||||
<RandomTheme onThemeChange={this.getRandomTheme} />
|
||||
</div>
|
||||
|
||||
<div className="blog-cover">
|
||||
<div className="flex flex-col items-center justify-center m-14">
|
||||
<ComponentToImg downloadAs={this.state.download}>
|
||||
<CoverImage {...this.state} />
|
||||
</ComponentToImg>
|
||||
@ -185,4 +186,4 @@ class ConfigCover extends React.Component {
|
||||
}
|
||||
}
|
||||
|
||||
export default ConfigCover;
|
||||
export default Editor;
|
||||
Loading…
x
Reference in New Issue
Block a user