feat: click poetry to refresh

src/components/ColorTitle/Poetry.js

@@ -9,7 +9,8 @@ const Wrapper = styled.div`
   line-height: 1.2;
   padding: 0.6rem 0.4rem;
   margin: 1rem 0;
-  box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.4);
+  margin-bottom: 2rem;
+  cursor: pointer;
   &.mobile {
     font-size: 0.8rem;
   }
@@ -28,10 +29,24 @@ const Wrapper = styled.div`
     font-weight: bold;
   }
 `;
-const Poetry = ({ bgColor, fontColor = '#fff', content = '', author = '', title = '' }) => {
+const Poetry = ({
+  bgColor,
+  fontColor = '#fff',
+  content = '',
+  author = '',
+  title = '',
+  refetch
+}) => {
   const { isMobile } = useMobile();
+  const handleClick = () => {
+    refetch();
+  };
   return (
-    <Wrapper style={{ background: bgColor, color: fontColor }} className={isMobile ? 'mobile' : ''}>
+    <Wrapper
+      onClick={handleClick}
+      style={{ background: bgColor, color: fontColor }}
+      className={isMobile ? 'mobile' : ''}
+    >
       <h2>
         {author} · {title}
       </h2>

src/components/ColorTitle/index.js

@@ -72,14 +72,21 @@ const Wrapper = styled.hgroup`
 
 const ColorTitle = ({ name, pinyin, hex, RGB, CMYK, figure }) => {
   const { isMobile } = useMobile();
-  const { poetry } = usePoetry(name);
+  const { poetry, fetchPoetry } = usePoetry(name);
   const oppoColor = getCorrectTextColor(RGB);
   return (
     <Wrapper className={isMobile ? 'mobile' : ''} style={{ color: oppoColor }}>
       <h1>{name}</h1>
       <IconFav currColor={{ hex, name, pinyin, RGB, CMYK }} />
       <h2>{pinyin}</h2>
-      {poetry && <Poetry bgColor={`rgba(${RGB.join(',')},.5)`} fontColor={oppoColor} {...poetry} />}
+      {poetry && (
+        <Poetry
+          refetch={fetchPoetry}
+          bgColor={`rgba(${RGB.join(',')},.5)`}
+          fontColor={oppoColor}
+          {...poetry}
+        />
+      )}
       {figure && <img className="figure" src={`figure/${figure}`} alt="figure" />}
     </Wrapper>
   );