refactor: migrate DocLink to ts

byhow · byhow · commit c7c58fdfbac1 · 2022-06-21T21:17:11.000-07:00
diff --git a/src/components/DocLink.tsx b/src/components/DocLink.tsx
@@ -1,9 +1,15 @@
 import React from "react"
-import styled from "styled-components"
+import styled, { DefaultTheme } from "styled-components"
 import Icon from "./Icon"
 import Link from "./Link"
 import Emoji from "./Emoji"
 
+export interface IProps {
+  to: string
+  theme?: DefaultTheme
+  className?: string
+}
+
 const Container = styled(Link)`
   position: relative;
   z-index: 1;
@@ -43,22 +49,23 @@ const Arrow = styled(Icon)`
   margin: 0rem 1.5rem;
   align-self: center;
   min-width: 2rem;
+  color: ${({ theme }) => theme.colors.text};
 `
 
 const EmojiCell = styled.div`
   display: flex;
   align-items: center;
 `
 
-const DocLink = ({ to, children, className }) => (
-  <Container to={to} className={className}>
+const DocLink: React.FC<IProps> = ({ to, children, className, theme }) => (
+  <Container to={to} className={className || ""}>
     <EmojiCell>
       <Emoji size={1} text=":page_with_curl:" mr={`1rem`} />
     </EmojiCell>
     <TextCell>
       <Title>{children}</Title>
     </TextCell>
-    <Arrow name="arrowRight" color={({ theme }) => theme.colors.text} />
+    <Arrow name="arrowRight" />
   </Container>
 )
 
