zhangyuheng/chinese-colors
1
0
Fork 0
forked from mirror/chinese-colors
Code Pull Requests Activity

chore: twitter

Browse Source
This commit is contained in:
Tristan Yang 2024-01-10 18:02:02 +08:00
parent ce318e090c
commit 2aeb69ad35
15 changed files with 63 additions and 240 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@ -37,6 +37,7 @@
"react-copy-to-clipboard": "^5.1.0",
"react-dom": "^18.2.0",
"react-github-btn": "^1.4.0",
"react-icons": "^5.0.0",
"react-router-dom": "^6.21.1",
"smooth-scroll-into-view-if-needed": "^2.0.2",
"styled-components": "^6.1.2",

25
src/components/Bgm.jsx
View File

@ -1,4 +1,5 @@
import React, { useState, useRef } from 'react';
import { TfiHeadphone } from 'react-icons/tfi';
import styled, { keyframes } from 'styled-components';
const Rotation = keyframes`
from {
@ -16,7 +17,7 @@ const Swing = keyframes`
transform: translateX(0);
}
`;
const StyledWraper = styled.aside`
const StyledWrapper = styled.aside`
position: fixed;
left: 0.4rem;
bottom: 0.4rem;
@ -25,6 +26,7 @@ const StyledWraper = styled.aside`
border-radius: 50%;
cursor: pointer;
background: #fff;
color: #333;
padding: 0.3rem;
box-shadow: 0 0 6px black;
display: flex;
@ -76,23 +78,8 @@ export default function Bgm() {
};
return (
<StyledWraper onClick={togglePlay} className={playing ? 'playing' : 'paused'}>
<svg
t="1571192531683"
className="icon"
viewBox="0 0 1024 1024"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
p-id="9314"
width="24"
height="24"
>
<path
d="M217.7 928.3c-47.7 0-84.1-36.4-84.1-84.1V619.9c0-47.7 36.4-84.1 84.1-84.1 47.7 0 84.1 36.4 84.1 84.1v224.3c0 47.6-36.5 84.1-84.1 84.1z m672.7-84.1V619.9c0-47.7-39.2-84.1-84.1-84.1-44.9 0-84.1 36.4-84.1 84.1v224.3c0 47.7 39.2 84.1 84.1 84.1 44.9 0 84.1-36.5 84.1-84.1z m70.1-266.3C960.5 320 755.9 95.7 512 95.7S63.5 322.8 63.5 577.9v280.3h42V577.9c0-235.5 185-442.9 406.5-442.9s406.5 207.4 406.5 442.9v280.3h42V577.9z"
p-id="9315"
fill="#515151"
></path>
</svg>
<StyledWrapper onClick={togglePlay} className={playing ? 'playing' : 'paused'}>
<TfiHeadphone size="28" fill="#333" />
<audio
ref={bgMusic}
autoPlay={false}
@ -102,6 +89,6 @@ export default function Bgm() {
src="/bgm.mp3"
></audio>
{!played && <div className="tip">👈 点击播放</div>}
</StyledWraper>
</StyledWrapper>
);
}

18
src/components/ColorSet/IconCollection.jsx
View File

@ -1,4 +1,5 @@
import React, { useState } from 'react';
import { BiCollection } from 'react-icons/bi';
import styled from 'styled-components';
import ChineseBorder from '../../assets/img/chinese.circle.border.png';
@ -47,22 +48,7 @@ const IconCollection = ({ showCollection, ...rest }) => {
<Wrapper onClick={handleClick} {...rest}>
{showTip && <p className="favTip">暂无收藏</p>}
<svg
t="1568178514471"
className="icon"
viewBox="0 0 1024 1024"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
p-id="8559"
width="32"
height="32"
>
<path
d="M914.304 182.848H109.696v36.608h804.608v-36.608z m-73.152-109.696H182.848v36.544h658.304v-36.544z m109.696 256h36.544v-36.608H36.544v621.696h950.912v-512h-36.608v475.456H73.152V329.152h877.696zM510.464 440.064a130.112 130.112 0 0 0-181.056-2.112 132.8 132.8 0 0 0 1.6 188.224l166.784 165.952a17.984 17.984 0 0 0 25.6 0l166.528-165.952a132.8 132.8 0 0 0 1.28-188.288 130.112 130.112 0 0 0-180.736 2.176z m182.848 88.256a100.288 100.288 0 0 1-29.184 71.936l-153.6 152.896-153.6-152.896a100.288 100.288 0 0 1-29.12-71.936 88.384 88.384 0 0 1 26.944-64 93.504 93.504 0 0 1 130.112 1.536l25.6 25.6 25.6-25.6a93.504 93.504 0 0 1 130.112-1.536 88.384 88.384 0 0 1 27.136 63.936z"
fill="#fff"
p-id="8560"
></path>
</svg>
<BiCollection size="28" />
</Wrapper>
);
};

20
src/components/ColorSet/index.jsx
View File

@ -1,8 +1,7 @@
import React, { useState } from 'react';
import { GiYinYang } from 'react-icons/gi';
import styled from 'styled-components';
import IconCollection from './IconCollection';
import Yinyang from '../../assets/img/yinyang.svg';
const Wrapper = styled.div`
ul {
@ -39,14 +38,13 @@ const Wrapper = styled.div`
right: -1.6rem;
top: 50%;
transform: translateY(-50%);
background-image: url(${Yinyang});
background-size: cover;
width: 3rem;
height: 3rem;
border: 1px solid #000;
border-radius: 50%;
border: none;
transition: all 0.6s;
box-shadow: 1px -1px 6px black;
/* box-shadow: 1px -1px 6px black; */
padding: 0;
}
&.expand .btn {
transform: translateY(-50%) rotateZ(180deg);
@ -56,14 +54,14 @@ const Wrapper = styled.div`
const ColorSet = ({ currSetName = '', setCurrSet, sets = [] }) => {
const [isHover, setIsHover] = useState(false);
const handleSetClick = name => {
const handleSetClick = (name) => {
console.log('clicked set name', name);
setCurrSet(name);
};
const handleSetHover = () => {
setIsHover(prev => !prev);
setIsHover((prev) => !prev);
};
return (
<Wrapper className={`sets ${isHover ? 'expand' : ''}`}>
@ -80,7 +78,7 @@ const ColorSet = ({ currSetName = '', setCurrSet, sets = [] }) => {
onClick={handleSetClick.bind(null, name)}
key={name}
style={{
background: `rgba(${RGB.join(',')})`
background: `rgba(${RGB.join(',')})`,
}}
className={name == currSetName ? 'selected' : ''}
>
@ -91,7 +89,9 @@ const ColorSet = ({ currSetName = '', setCurrSet, sets = [] }) => {
return null;
})}
</ul>
<button onClick={handleSetHover} className="btn"></button>
<button onClick={handleSetHover} className="btn">
<GiYinYang className="icon" fill="#000" size="100%" />
</button>
</Wrapper>
);
};

27
src/components/ColorTitle/IconCopy.jsx
View File

@ -1,5 +1,6 @@
import React, { useState } from 'react';
import styled from 'styled-components';
import { IoCopyOutline } from 'react-icons/io5';
import { CopyToClipboard } from 'react-copy-to-clipboard';
// import FadeInDown from '../animates/FadeInDown';
const Wrapper = styled.div`
@ -10,6 +11,7 @@ const Wrapper = styled.div`
position: relative;
.icon {
width: 1.4rem;
margin-top: 4px;
}
> .hex {
font-size: 0.6rem;
@ -17,6 +19,7 @@ const Wrapper = styled.div`
background: rgba(51, 51, 51, 0.5);
border-radius: 0.2rem;
text-transform: uppercase;
margin-top: 5px;
}
.copyTip {
position: absolute;
@ -46,29 +49,9 @@ const IconFav = ({ currColorHex }) => {
}}
>
<Wrapper onClick={handleCopyClick}>
<svg
t="1568174087144"
className="icon"
viewBox="0 0 1024 1024"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
p-id="7098"
width="36"
height="36"
>
<path
d="M220.429 838.029c-18.2 0-32.9-14.7-32.9-32.9v-437c0-18.2 14.7-32.9 32.9-32.9h440c18.2 0 32.9 14.7 32.9 32.9v436.9c0 18.2-14.7 32.9-32.9 32.9h-440z m407-65.9v-371.1h-374.1v371.1h374.1z"
fill="#fff"
p-id="7099"
></path>
<path
d="M438.129 254.029c-18.2 0-32.9-14.7-32.9-32.9s14.7-32.9 32.9-32.9h369.6c18.2 0 32.9 14.7 32.9 32.9v363.5c0 18.2-14.7 32.9-32.9 32.9s-32.9-14.7-32.9-32.9v-330.6h-336.7z"
fill="#fff"
p-id="7100"
></path>
</svg>
<IoCopyOutline className="icon" />
<span className="hex">{currColorHex}</span>
{copied ? <span className="copyTip">已复制!</span> : null}
{copied ? <span className="copyTip">已复制！</span> : null}
</Wrapper>
</CopyToClipboard>
);

24
src/components/ColorTitle/IconDownload.jsx
View File

@ -1,5 +1,5 @@
// import React from 'react';
import { MdDownload } from 'react-icons/md';
import styled from 'styled-components';
const Wrapper = styled.div`
@ -20,27 +20,7 @@ const Wrapper = styled.div`
const IconDownload = ({ handleDownload }) => {
return (
<Wrapper className="download" onClick={handleDownload}>
<svg
t="1568731641905"
className="icon"
viewBox="0 0 1047 1024"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
p-id="1446"
width="32"
height="32"
>
<path
d="M523.987449 0a42.759353 42.759353 0 0 0-42.759353 42.759353v498.158822L301.663529 361.353608a43.500845 43.500845 0 0 0-60.555153 0 42.759353 42.759353 0 0 0 0 60.431572l227.020033 227.267198a79.092445 79.092445 0 0 0 111.223751 0l227.514362-227.143616a42.635771 42.635771 0 0 0 0-60.555154 42.882935 42.882935 0 0 0-60.555153 0L566.870384 540.918175V42.759353A42.882935 42.882935 0 0 0 523.987449 0z"
fill="#ffffff"
p-id="1447"
></path>
<path
d="M860.871832 120.245233a42.882935 42.882935 0 1 0 0 85.642288 101.584359 101.584359 0 0 1 101.460777 101.584359v529.301473a101.584359 101.584359 0 0 1-101.460777 101.584359H187.226647a101.707941 101.707941 0 0 1-101.584359-101.584359V307.47188a101.707941 101.707941 0 0 1 101.584359-101.584359 42.882935 42.882935 0 0 0 0-85.642288A187.473811 187.473811 0 0 0 0 307.47188v529.301473a187.473811 187.473811 0 0 0 187.226647 187.226647h673.645185A187.350229 187.350229 0 0 0 1047.974897 836.773353V307.47188A187.350229 187.350229 0 0 0 860.871832 120.245233z"
fill="#ffffff"
p-id="1448"
></path>
</svg>
<MdDownload />
</Wrapper>
);
};

18
src/components/ColorTitle/IconFav.jsx
View File

@ -1,5 +1,6 @@
import React, { useState, useEffect } from 'react';
import styled from 'styled-components';
import { IoMdHeart } from 'react-icons/io';
const Wrapper = styled.div`
position: absolute;
@ -48,22 +49,7 @@ const IconFav = ({ currColor }) => {
};
return (
<Wrapper className="fav" onClick={toggleFav}>
<svg
t="1568172188297"
className="icon"
viewBox="0 0 1024 1024"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
p-id="2640"
width="32"
height="32"
>
<path
d="M512 910.933333l-61.866667-56.106667c-219.733333-199.466667-364.8-331.093333-364.8-492.16 0-131.626667 103.04-234.666667 234.666667-234.666667 74.24 0 145.493333 34.56 192 88.96 46.506667-54.4 117.76-88.96 192-88.96 131.626667 0 234.666667 103.04 234.666667 234.666667 0 161.066667-145.066667 292.693333-364.8 492.16l-61.866667 56.106667z"
p-id="2641"
fill={isFav ? '#ef7a82' : '#fff'}
></path>
</svg>
<IoMdHeart className="icon" fill={isFav ? '#ef7a82' : '#fff'} />
</Wrapper>
);
};

27
src/components/IconBack.jsx
View File

@ -1,6 +1,6 @@
import React from 'react';
import { useNavigate } from 'react-router-dom';
import { IoArrowBackCircleOutline } from 'react-icons/io5';
import Icon from './Icon';
const IconBack = () => {
@ -10,30 +10,7 @@ const IconBack = () => {
handleClick={() => {
navigateTo('/');
}}
icon={
<svg
style={{ width: '2rem', height: '2rem' }}
t="1569329382185"
className="icon"
viewBox="0 0 1024 1024"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
p-id="3667"
width="45"
height="45"
>
<path
d="M512 85.333333C276.352 85.333333 85.333333 276.352 85.333333 512s191.018667 426.666667 426.666667 426.666667 426.666667-191.018667 426.666667-426.666667S747.648 85.333333 512 85.333333zM512 853.333333c-188.202667 0-341.333333-153.130667-341.333333-341.333333s153.130667-341.333333 341.333333-341.333333 341.333333 153.130667 341.333333 341.333333S700.202667 853.333333 512 853.333333z"
p-id="3668"
fill="#ffffff"
></path>
<path
d="M626.304 329.984 568.362667 267.349333 322.048 495.189333 567.552 734.549333 627.114667 673.450667 445.952 496.810667Z"
p-id="3669"
fill="#ffffff"
></path>
</svg>
}
icon={<IoArrowBackCircleOutline size="35" />}
></Icon>
);
};

25
src/components/IconImage.jsx
View File

@ -2,6 +2,7 @@ import React from 'react';
import { useNavigate } from 'react-router-dom';
import Icon from './Icon';
import { GoImage } from 'react-icons/go';
const IconImage = ({ path = '' }) => {
const navigateTo = useNavigate();
@ -10,29 +11,7 @@ const IconImage = ({ path = '' }) => {
handleClick={() => {
navigateTo(path);
}}
icon={
<svg
t="1569320467584"
className="icon"
viewBox="0 0 1073 1024"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
p-id="1776"
width="32"
height="32"
>
<path
d="M191.597683 1024h690.029335A191.850117 191.850117 0 0 0 1072.84605 833.033403V191.597683A191.850117 191.850117 0 0 0 881.627018 0H191.597683A191.850117 191.850117 0 0 0 0 191.597683V833.033403a191.850117 191.850117 0 0 0 191.597683 190.966597zM87.468507 833.033403V191.597683a104.255393 104.255393 0 0 1 104.129176-104.129176h690.029335a104.255393 104.255393 0 0 1 104.129176 104.129176V833.033403a104.255393 104.255393 0 0 1-104.129176 104.129176H191.597683A104.255393 104.255393 0 0 1 87.468507 833.033403z"
fill="#ffffff"
p-id="1777"
></path>
<path
d="M351.767287 481.770985a154.616048 154.616048 0 1 0-154.616048-154.616048 154.742265 154.742265 0 0 0 154.616048 154.616048z m-67.147541-154.616048a67.147541 67.147541 0 1 1 67.147541 67.147541 67.147541 67.147541 0 0 1-67.147541-67.147541zM191.597683 826.848761a43.544928 43.544928 0 0 0 30.923209-12.621718L388.748921 647.74658 536.675459 795.168248l400.48712-400.108467a43.797362 43.797362 0 0 0 0-61.84642 45.816837 45.816837 0 0 0-61.84642 0L536.675459 671.980279 388.748921 524.053741 160.674473 752.128189a43.923579 43.923579 0 0 0-12.621718 30.92321 43.797362 43.797362 0 0 0 43.671145 43.797362z"
fill="#ffffff"
p-id="1778"
></path>
</svg>
}
icon={<GoImage size="36" />}
></Icon>
);
};

31
src/components/IconInfo.jsx
View File

@ -1,35 +1,8 @@
import React from 'react';
import Icon from './Icon';
import { GoInfo } from 'react-icons/go';
const IconInfo = ({ showInfoModal }) => {
return (
<Icon
handleClick={showInfoModal}
icon={
<svg
t="1568731000727"
className="icon"
viewBox="0 0 1024 1024"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
p-id="1168"
width="32"
height="32"
>
<path
d="M873.93304 149.954855A511.943948 511.943948 0 1 0 312.687215 983.626704 512.426118 512.426118 0 0 0 983.626704 711.200681a511.58232 511.58232 0 0 0-109.693664-561.245826z m66.057284 361.627465A428.046376 428.046376 0 1 1 511.943948 84.379742 428.528546 428.528546 0 0 1 940.231409 511.943948z"
fill="#ffffff"
p-id="1169"
></path>
<path
d="M511.943948 328.960451A41.948786 41.948786 0 0 0 470.115704 370.909236v423.104134a41.948786 41.948786 0 0 0 84.379742 0v-423.104134a41.948786 41.948786 0 0 0-42.551498-41.948785zM511.943948 164.540497A41.948786 41.948786 0 0 0 470.115704 206.489282v23.505786a41.948786 41.948786 0 0 0 84.379742 0v-23.505786a41.948786 41.948786 0 0 0-42.551498-41.948785z"
fill="#ffffff"
p-id="1170"
></path>
</svg>
}
></Icon>
);
return <Icon handleClick={showInfoModal} icon={<GoInfo size="34" />}></Icon>;
};
export default IconInfo;

31
src/components/IconScreenshot.jsx
View File

@ -1,35 +1,8 @@
import React from 'react';
import { MdOutlineCloudDownload } from 'react-icons/md';
import Icon from './Icon';
const IconInfo = ({ showPreview }) => {
return (
<Icon
handleClick={showPreview}
icon={
<svg
t="1568731641905"
className="icon"
viewBox="0 0 1047 1024"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
p-id="1446"
width="32"
height="32"
>
<path
d="M523.987449 0a42.759353 42.759353 0 0 0-42.759353 42.759353v498.158822L301.663529 361.353608a43.500845 43.500845 0 0 0-60.555153 0 42.759353 42.759353 0 0 0 0 60.431572l227.020033 227.267198a79.092445 79.092445 0 0 0 111.223751 0l227.514362-227.143616a42.635771 42.635771 0 0 0 0-60.555154 42.882935 42.882935 0 0 0-60.555153 0L566.870384 540.918175V42.759353A42.882935 42.882935 0 0 0 523.987449 0z"
fill="#ffffff"
p-id="1447"
></path>
<path
d="M860.871832 120.245233a42.882935 42.882935 0 1 0 0 85.642288 101.584359 101.584359 0 0 1 101.460777 101.584359v529.301473a101.584359 101.584359 0 0 1-101.460777 101.584359H187.226647a101.707941 101.707941 0 0 1-101.584359-101.584359V307.47188a101.707941 101.707941 0 0 1 101.584359-101.584359 42.882935 42.882935 0 0 0 0-85.642288A187.473811 187.473811 0 0 0 0 307.47188v529.301473a187.473811 187.473811 0 0 0 187.226647 187.226647h673.645185A187.350229 187.350229 0 0 0 1047.974897 836.773353V307.47188A187.350229 187.350229 0 0 0 860.871832 120.245233z"
fill="#ffffff"
p-id="1448"
></path>
</svg>
}
></Icon>
);
return <Icon handleClick={showPreview} icon={<MdOutlineCloudDownload className="icon" />}></Icon>;
};
export default IconInfo;

18
src/components/IconTwitter.jsx Normal file
View File

@ -0,0 +1,18 @@
import { FaXTwitter } from 'react-icons/fa6';
import styled from 'styled-components';
const StyledWrapper = styled.a`
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 0.8rem;
`;
const IconTwitter = () => {
return (
<StyledWrapper href="https://twitter.com/wsygc" target="_blank">
<FaXTwitter size="30" />
</StyledWrapper>
);
};
export default IconTwitter;

31
src/components/Preview/IconClose.jsx
View File

@ -1,35 +1,8 @@
import React from 'react';
import { IoMdCloseCircleOutline } from 'react-icons/io';
import Icon from '../Icon';
const IconClose = ({ closePreview }) => {
return (
<Icon
handleClick={closePreview}
icon={
<svg
t="1568731675226"
className="icon"
viewBox="0 0 1024 1024"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
p-id="1724"
width="32"
height="32"
>
<path
d="M511.818326 0.002914A511.454008 511.454008 0 0 0 0.000121 511.821119 512.061003 512.061003 0 0 0 874.072957 874.075749a512.4252 512.4252 0 0 0 0-724.145064A508.419033 508.419033 0 0 0 511.818326 0.002914z m304.590104 816.408308a430.72367 430.72367 0 1 1 0-609.180207 431.087867 431.087867 0 0 1 0 609.180207z"
fill="#ffffff"
p-id="1725"
></path>
<path
d="M735.799491 328.508621a40.30447 40.30447 0 0 0-12.139901-28.771564 40.790066 40.790066 0 0 0-57.421729 0L511.818326 454.399389 357.277393 299.737057a40.668667 40.668667 0 0 0-57.543128 57.543128l154.662332 154.540934L299.734265 666.483451a40.790066 40.790066 0 0 0 0 57.421729 40.790066 40.790066 0 0 0 57.543128 0L511.818326 569.364247 666.480659 723.90518a40.547268 40.547268 0 0 0 57.421729 0 40.547268 40.547268 0 0 0 0-57.421729L569.361455 511.821119l154.540933-154.540934a39.940273 39.940273 0 0 0 11.897103-28.771564z"
fill="#ffffff"
p-id="1726"
></path>
</svg>
}
/>
);
return <Icon handleClick={closePreview} icon={<IoMdCloseCircleOutline size="32" />} />;
};
export default IconClose;

2
src/pages/index.jsx
View File

@ -9,6 +9,7 @@ const IconInfo = lazy(() => import('../components/IconInfo'));
const IconImage = lazy(() => import('../components/IconImage'));
const Header = lazy(() => import('../components/Header'));
const IconScreenshot = lazy(() => import('../components/IconScreenshot'));
const IconTwitter = lazy(() => import('../components/IconTwitter'));
const ColorSet = lazy(() => import('../components/ColorSet'));
const ICP = lazy(() => import('../components/ICP'));
const Preview = lazy(() => import('../components/Preview'));
@ -91,6 +92,7 @@ const Index = () => {
<IconInfo showInfoModal={showModal} />
<IconImage path={`share/${currColor.id}`} />
<IconScreenshot showPreview={showPreview} />
<IconTwitter />
</section>
</Wrapper>
{preview && (

5
yarn.lock
View File

@ -2606,6 +2606,11 @@ react-github-btn@^1.4.0:
dependencies:
github-buttons "^2.22.0"
react-icons@^5.0.0:
version "5.0.0"
resolved "https://registry.npmmirror.com/react-icons/-/react-icons-5.0.0.tgz#3a860fac02787984e4c11d9d05bec53226de0dc9"
integrity sha512-8gBBjYRrO14BU9RuMEVptG5aB1gwNPAAgsKOuPggx2hg332pTky/r8FidEJW95cL6IG2mYCEHaYuAxw74wLefw==
react-is@^16.13.1:
version "16.13.1"
resolved "https://registry.npmmirror.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"