From 4927545fb0e2ec61adba167196c701238d529c54 Mon Sep 17 00:00:00 2001
From: mydearxym <mydearxym@qq.com>
Date: Mon, 25 Dec 2023 15:00:23 +0800
Subject: [PATCH] refactor: arrow link to intros

---
 .../DiscussTab/IntroDigest.tsx                |  1 -
 .../Landing/ArticlesIntroTabs/MoreLink.tsx    | 11 ++----
 .../styles/articles_intro_tabs/more_link.ts   | 39 -------------------
 src/widgets/ArrowLinker/index.tsx             |  2 +-
 src/widgets/ArrowLinker/styles/index.ts       |  5 ++-
 5 files changed, 8 insertions(+), 50 deletions(-)
 delete mode 100644 src/app/Landing/styles/articles_intro_tabs/more_link.ts

diff --git a/src/app/Landing/ArticlesIntroTabs/DiscussTab/IntroDigest.tsx b/src/app/Landing/ArticlesIntroTabs/DiscussTab/IntroDigest.tsx
index 5308efa18..74c20fe79 100644
--- a/src/app/Landing/ArticlesIntroTabs/DiscussTab/IntroDigest.tsx
+++ b/src/app/Landing/ArticlesIntroTabs/DiscussTab/IntroDigest.tsx
@@ -17,7 +17,6 @@ const IntroDigest: FC = () => {
       </Digest>
 
       <IntroItems />
-      {/* <UserCards /> */}
     </Wrapper>
   )
 }
diff --git a/src/app/Landing/ArticlesIntroTabs/MoreLink.tsx b/src/app/Landing/ArticlesIntroTabs/MoreLink.tsx
index af1dba77d..85de9d92c 100644
--- a/src/app/Landing/ArticlesIntroTabs/MoreLink.tsx
+++ b/src/app/Landing/ArticlesIntroTabs/MoreLink.tsx
@@ -1,10 +1,7 @@
 import { FC } from 'react'
 
 import type { TColor } from '@/spec'
-import { COLOR_NAME } from '@/constant/colors'
-import ArrowButton from '@/widgets/Buttons/ArrowButton'
-
-import { Wrapper } from '../styles/articles_intro_tabs/more_link'
+import ArrowLinker from '@/widgets/ArrowLinker'
 
 type TProps = {
   title?: string
@@ -13,9 +10,9 @@ type TProps = {
 
 const MoreLink: FC<TProps> = ({ title = '了解更多', href, color }) => {
   return (
-    <Wrapper href={href}>
-      <ArrowButton color={color}>{title}</ArrowButton>
-    </Wrapper>
+    <ArrowLinker href="/" color={color} top={55} fontSize={14}>
+      {title}
+    </ArrowLinker>
   )
 }
 
diff --git a/src/app/Landing/styles/articles_intro_tabs/more_link.ts b/src/app/Landing/styles/articles_intro_tabs/more_link.ts
deleted file mode 100644
index 63cc2b568..000000000
--- a/src/app/Landing/styles/articles_intro_tabs/more_link.ts
+++ /dev/null
@@ -1,39 +0,0 @@
-import Link from 'next/link'
-
-import type { TColor } from '@/spec'
-
-import styled, { css, rainbow } from '@/css'
-import ArrowSVG from '@/icons/Arrow'
-
-export const Wrapper = styled(Link)`
-  ${css.row('align-center')};
-  text-decoration: none;
-  opacity: 0.8;
-  margin-top: 55px;
-
-  &:hover {
-    text-decoration: none;
-    opacity: 1;
-    cursor: pointer;
-  }
-
-  ${css.media.mobile`
-    ${css.row('justify-center')};
-    margin-top: 20px;
-    transform: scale(0.9);
-    width: 90%;
-  `};
-
-  transition: all 0.2s;
-`
-export const Text = styled.div<TColor>`
-  color: ${({ $color }) => rainbow($color)};
-  font-weight: 600;
-  font-size: 14px;
-`
-export const ArrowIcon = styled(ArrowSVG)<TColor>`
-  ${css.size(14)};
-  fill: ${({ $color }) => rainbow($color)};
-  margin-left: 10px;
-  transform: rotate(180deg);
-`
diff --git a/src/widgets/ArrowLinker/index.tsx b/src/widgets/ArrowLinker/index.tsx
index bcc4749e8..8a8783d70 100644
--- a/src/widgets/ArrowLinker/index.tsx
+++ b/src/widgets/ArrowLinker/index.tsx
@@ -41,7 +41,7 @@ const ArrowLinker: FC<TProps> = ({
 
   return (
     <Link href={href} target={target}>
-      <Wrapper $testid={testid} {...restProps}>
+      <Wrapper $testid={testid} $color={primaryColor} {...restProps}>
         <Title fontSize={fontSize} bold={bold} $color={primaryColor}>
           {children}
         </Title>
diff --git a/src/widgets/ArrowLinker/styles/index.ts b/src/widgets/ArrowLinker/styles/index.ts
index aabcb3009..ae11a39d6 100644
--- a/src/widgets/ArrowLinker/styles/index.ts
+++ b/src/widgets/ArrowLinker/styles/index.ts
@@ -1,9 +1,9 @@
 import type { TTestable, TSpace, TColor } from '@/spec'
 
-import styled, { css, rainbowLink } from '@/css'
+import styled, { css, rainbow, rainbowLink } from '@/css'
 import ArrowSVG from '@/icons/ArrowUpRight'
 
-type TWrapper = TTestable & TSpace
+type TWrapper = TTestable & TSpace & TColor
 
 export const Wrapper = styled.article.attrs<TTestable>(({ $testid }) => ({
   'data-test-id': $testid,
@@ -14,6 +14,7 @@ export const Wrapper = styled.article.attrs<TTestable>(({ $testid }) => ({
 
   &:hover {
     text-decoration: underline;
+    text-decoration-color: ${({ $color }) => rainbow($color)};
   }
 `