mirror/chinese-colors
2
0
Fork 1
mirror of https://github.com/zerosoul/chinese-colors.git synced 2025-02-17 21:09:36 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: show all colors

Browse Source
This commit is contained in:
Tristan 2019-09-07 00:29:09 +08:00
parent 9f47fc0b48
commit 7d141ca490
2 changed files with 5 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/App.js
View File

@ -6,6 +6,7 @@ import InfoModal from './components/InfoModal';
import Header from './components/Header';
import styled from 'styled-components';
import colors from './assets/colors.json';
import allColors from './assets/colors.full.json';
const Wrapper = styled.section`
height: 100vh;
display: flex;
@ -31,13 +32,14 @@ const SelectedColor = JSON.parse(localStorage.getItem('SELECTED_COLOR') || 'null
name: '\u6de1\u85cf\u82b1\u7ea2',
pinyin: 'dancanghuahong'
};
const TheColors = process.env.production ? allColors : colors;
const App = () => {
const [currColor, setCurrColor] = useState(SelectedColor);
useEffect(() => {
document.body.style.backgroundColor = currColor.hex;
}, [currColor]);
const handleColorClick = hex => {
let clickedColor = colors.find(c => {
let clickedColor = TheColors.find(c => {
return c.hex === hex;
});
setCurrColor(clickedColor);
@ -48,7 +50,7 @@ const App = () => {
<Wrapper>
<nav>
<ul className="colors">
{colors.map(color => {
{TheColors.map(color => {
return (
<Color
isCurr={currColor.name == color.name}

2
src/components/ColorTitle.js
View File

@ -10,7 +10,7 @@ const Wrapper = styled.hgroup`
align-self: center;
box-shadow: 0 0 8px black;
border-radius: 6px;
padding: 0.6rem 0.3rem;
padding: 0.6rem 0.4rem;
padding-top: 1rem;
position: relative;
transition: transform 0.4s ease-in;