refactor: arrow link to intros

groupher · Dec 25, 2023 · 4927545 · 4927545
1 parent 727e8a9
commit 4927545
Show file tree

Hide file tree

Showing 5 changed files with 8 additions and 50 deletions.
diff --git 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
@@ -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
diff --git 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
@@ -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)};
   }
 `