feat: add code snippets

src/assets/colors.json

@@ -240,7 +240,8 @@
         "id": "1-27",
         "hex": "#d9b611",
         "name": "秋香色",
-        "intro": "浅橄榄色浅黄绿色。（直接在Y中掺入k10~30可得到不同浓淡的该类色彩）"
+        "intro": "浅橄榄色浅黄绿色。（直接在Y中掺入k10~30可得到不同浓淡的该类色彩）",
+        "figure": "ri.he.png"
       }
     ],
     "RGB": [255, 241, 67],

src/components/CodeModal.js

@@ -0,0 +1,156 @@
+/* eslint-disable react/jsx-no-target-blank */
+import React from 'react';
+import styled from 'styled-components';
+import BgImage from '../assets/img/modal.code.top.png';
+import BgBtmImage from '../assets/img/modal.code.btm.png';
+import FlipInX from './animates/FlipInX';
+
+const Wrapper = styled.section`
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 999;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  .mask {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: rgba(0, 0, 0, 0.4);
+  }
+  .info {
+    z-index: 9;
+    padding: 1rem;
+    width: 22rem;
+    height: 40vh;
+    box-shadow: 0 0 9px black;
+    border-radius: 8px;
+    text-shadow: 0 0 8px black;
+    background-color: ${({ bgColor }) => {
+      return bgColor;
+    }};
+    background-image: url(${BgImage}), url(${BgBtmImage});
+    background-repeat: no-repeat, no-repeat;
+    background-position: 0 0, bottom;
+    background-size: contain, contain;
+    padding-bottom: 1.5rem;
+    transition: all 0.5s;
+    backface-visibility: visible !important;
+    animation-name: ${FlipInX};
+    animation-duration: 1s;
+    animation-fill-mode: both;
+    .tabs {
+      width: 100%;
+      list-style: none;
+      position: relative;
+      margin-top: 1rem;
+      text-align: left;
+      li {
+        float: left;
+        display: block;
+      }
+      input[type='radio'] {
+        position: absolute;
+        top: 0;
+        left: -9999px;
+      }
+      label {
+        display: block;
+        padding: 1rem 1.4rem;
+        border-radius: 0.4rem 0.4rem 0 0;
+        font-size: 1.2rem;
+        font-weight: 800;
+        background: rgba(0, 0, 0, 0.8);
+        cursor: pointer;
+        position: relative;
+        top: 0.2rem;
+        transition: all 0.2s ease-in-out;
+        &:hover {
+          background: #333;
+        }
+      }
+      .tab-content {
+        z-index: 2;
+        display: none;
+        overflow: hidden;
+        width: 100%;
+        font-size: 1rem;
+        line-height: 1.4;
+        padding: 1rem;
+        position: absolute;
+        top: 3rem;
+        left: 0;
+        background: transparent;
+      }
+      [id^='tab']:checked + label {
+        top: 0;
+        padding-top: 1rem;
+        background: rgba(0, 0, 0, 0.4);
+      }
+      [id^='tab']:checked ~ [id^='tab-content'] {
+        display: block;
+      }
+    }
+  }
+`;
+export default function InfoModal({ closeModal, bgColor }) {
+  console.log('bgcolor', bgColor);
+
+  return (
+    <Wrapper bgColor={bgColor}>
+      <div className="mask" onClick={closeModal}></div>
+      <div className="info">
+        <ul className="tabs" role="tablist">
+          <li>
+            <input type="radio" name="tabs" id="tab1" checked />
+            <label
+              htmlFor="tab1"
+              role="tab"
+              aria-selected="true"
+              aria-controls="panel1"
+              tabIndex="0"
+            >
+              Web
+            </label>
+            <div
+              id="tab-content1"
+              className="tab-content"
+              role="tabpanel"
+              aria-labelledby="description"
+              aria-hidden="false"
+            >
+              <pre>color:#333;</pre>
+            </div>
+          </li>
+
+          <li>
+            <input type="radio" name="tabs" id="tab2" />
+            <label
+              htmlFor="tab2"
+              role="tab"
+              aria-selected="false"
+              aria-controls="panel2"
+              tabIndex="0"
+            >
+              iOS
+            </label>
+            <div
+              id="tab-content2"
+              className="tab-content"
+              role="tabpanel"
+              aria-labelledby="specification"
+              aria-hidden="true"
+            >
+              <pre>color:#fff;</pre>
+            </div>
+          </li>
+        </ul>
+      </div>
+    </Wrapper>
+  );
+}

src/components/ColorTitle/IconCode.js

@@ -0,0 +1,35 @@
+import React from 'react';
+import Icon from '../Icon';
+
+const IconInfo = ({ showModal }) => {
+  return (
+    <Icon
+      handleClick={showModal}
+      icon={
+        <svg
+          t="1572327267226"
+          className="icon"
+          viewBox="0 0 1024 1024"
+          version="1.1"
+          xmlns="http://www.w3.org/2000/svg"
+          p-id="5318"
+          width="32"
+          height="32"
+        >
+          <path
+            d="M128 192v576h704V192H128z m0-64h704a64 64 0 0 1 64 64v576a64 64 0 0 1-64 64H128a64 64 0 0 1-64-64V192a64 64 0 0 1 64-64z"
+            p-id="5319"
+            fill="#ffffff"
+          ></path>
+          <path
+            d="M320 537.6V640L192 480l128-160v102.4L273.92 480z m320-115.2V320l128 160-128 160V537.6l46.08-57.6zM512 320h64L448 640h-64z"
+            p-id="5320"
+            fill="#ffffff"
+          ></path>
+        </svg>
+      }
+    ></Icon>
+  );
+};
+
+export default IconInfo;

src/components/ColorTitle/IconFav.js

@@ -2,9 +2,6 @@ import React, { useState, useEffect } from 'react';
 import styled from 'styled-components';
 
 const Wrapper = styled.div`
-  position: absolute;
-  top: 4px;
-  left: 4px;
   cursor: pointer;
   display: flex;
   justify-content: center;

src/components/ColorTitle/index.js

@@ -1,10 +1,12 @@
 import React from 'react';
 import styled from 'styled-components';
 import IconFav from './IconFav';
-import { useMobile, usePoetry } from '../../hooks';
-
+import IconCode from './IconCode';
+import { useMobile, useCodeModal, usePoetry } from '../../hooks';
 import { getCorrectTextColor } from '../../utils';
 import Poetry from './Poetry';
+import CodeModal from '../CodeModal';
+
 import FadeIn from '../animates/FadeIn';
 
 const Wrapper = styled.hgroup`
@@ -68,19 +70,38 @@ const Wrapper = styled.hgroup`
     animation: ${FadeIn} 1s forwards;
     animation-delay: 1s;
   }
+  .opts {
+    position: absolute;
+    left: 4px;
+    bottom: -2rem;
+    display: flex;
+    width: 4rem;
+    justify-content: space-around;
+    align-items: center;
+    .icon {
+      margin-bottom: 0;
+    }
+  }
 `;
 
 const ColorTitle = ({ name, pinyin, hex, RGB, CMYK, figure }) => {
   const { isMobile } = useMobile();
   const { poetry, fetchPoetry } = usePoetry(name);
   const oppoColor = getCorrectTextColor(RGB);
-
+  const {
+    visible: codeModalVisible,
+    showModal: showCodeModal,
+    closeModal: closeCodeModal
+  } = useCodeModal();
   console.log('color title');
 
   return (
     <Wrapper className={isMobile ? 'mobile' : ''} style={{ color: oppoColor }}>
       <h1>{name}</h1>
-      <IconFav currColor={{ hex, name, pinyin, RGB, CMYK }} />
+      <div className="opts">
+        <IconFav currColor={{ hex, name, pinyin, RGB, CMYK }} />
+        <IconCode showModal={showCodeModal} />
+      </div>
       <h2>{pinyin}</h2>
       {poetry && (
         <Poetry
@@ -91,6 +112,7 @@ const ColorTitle = ({ name, pinyin, hex, RGB, CMYK, figure }) => {
         />
       )}
       {figure && <img className="figure" src={`figure/${figure}`} alt="figure" />}
+      {codeModalVisible && <CodeModal bgColor={hex} closeModal={closeCodeModal} />}
     </Wrapper>
   );
 };

src/components/animates/Animate.js

@@ -0,0 +1,44 @@
+import React from 'react';
+import styled, { keyframes } from 'styled-components';
+
+const FlipXIn = keyframes`
+  from {
+    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
+    -webkit-animation-timing-function: ease-in;
+    animation-timing-function: ease-in;
+    opacity: 0;
+  }
+
+  40% {
+    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
+    -webkit-animation-timing-function: ease-in;
+    animation-timing-function: ease-in;
+  }
+
+  60% {
+    transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
+    opacity: 1;
+  }
+
+  80% {
+    transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
+  }
+
+  to {
+    transform: perspective(400px);
+  }
+`;
+const Animates = {
+  flipInX: FlipXIn
+};
+const StyledWrapper = styled.div`
+  backface-visibility: visible !important;
+  animation-name: ${({ animate }) => animate};
+  animation-duration: 1s;
+  animation-fill-mode: both;
+`;
+const Animate = ({ children, animate = 'flipInX' }) => {
+  const ani = Animates[animate] || FlipXIn;
+  return <StyledWrapper animate={ani}>{children}</StyledWrapper>;
+};
+export default Animate;

src/components/animates/FlipInX.js

@@ -0,0 +1,28 @@
+import { keyframes } from 'styled-components';
+
+const FlipInX = keyframes`
+from {
+  transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
+  animation-timing-function: ease-in;
+  opacity: 0;
+}
+
+40% {
+  transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
+  animation-timing-function: ease-in;
+}
+
+60% {
+  transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
+  opacity: 1;
+}
+
+80% {
+  transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
+}
+
+to {
+  transform: perspective(400px);
+}
+`;
+export default FlipInX;

src/hooks.js

@@ -38,7 +38,18 @@ const usePreview = () => {
   return { preview, closePreview, showPreview };
 };
 
-const useModal = () => {
+const useInfoModal = () => {
+  const [visible, setVisible] = useState(false);
+  const closeModal = () => {
+    setVisible(false);
+  };
+  const showModal = () => {
+    setVisible(true);
+  };
+  return { visible, closeModal, showModal };
+};
+
+const useCodeModal = () => {
   const [visible, setVisible] = useState(false);
   const closeModal = () => {
     setVisible(false);
@@ -182,5 +193,5 @@ const useColor = () => {
   return { ...state, updateCurrColor, updateCurrSet };
 };
 
-export { useModal, usePreview, useShareColor, useColor, useMobile, usePoetry };
+export { useCodeModal, useInfoModal, usePreview, useShareColor, useColor, useMobile, usePoetry };
 export default useColor;

src/pages/index.js

@@ -13,7 +13,7 @@ const ColorSet = lazy(() => import('../components/ColorSet'));
 import Preview from '../components/Preview';
 import InfoModal from '../components/InfoModal';
 
-import { useModal, useColor, usePreview } from '../hooks';
+import { useInfoModal, useColor, usePreview } from '../hooks';
 
 const Wrapper = styled.section`
   height: 100vh;
@@ -55,7 +55,8 @@ const Wrapper = styled.section`
   }
 `;
 const Index = () => {
-  const { visible: modalVisible, showModal, closeModal } = useModal();
+  const { visible: modalVisible, showModal, closeModal } = useInfoModal();
+
   const { preview, showPreview, closePreview } = usePreview();
   const { sets, currSet, currColor, updateCurrColor, updateCurrSet } = useColor();
   console.log('page index');