Merge pull request #3 from unix/link

feat(link): display as a separate block

components/link/link.tsx

@@ -7,7 +7,8 @@ interface Props {
   href?: string
   color?: boolean
   pure?: boolean
-  underline: boolean
+  underline?: boolean
+  block?: boolean
   className?: string
 }
 
@@ -16,16 +17,18 @@ const defaultProps = {
   color: false,
   pure: false,
   underline: false,
+  block: false,
   className: '',
 }
 
 export type LinkProps = Props & typeof defaultProps & React.AllHTMLAttributes<any>
 
 const Link: React.FC<React.PropsWithChildren<LinkProps>> = React.memo(({
-  href, color, underline, pure, children, className, ...props
+  href, color, underline, pure, children, className, block, ...props
 }) => {
   const theme = useTheme()
-  const linkColor = color ? theme.palette.success : 'inherit'
+  const linkColor = color || block ? theme.palette.success : 'inherit'
+  const padding = block ? theme.layout.gapQuarter : '0'
   const decoration = underline ? 'underline' : 'none'
   
   return (
@@ -38,12 +41,18 @@ const Link: React.FC<React.PropsWithChildren<LinkProps>> = React.memo(({
           line-height: inherit;
           color: ${linkColor};
           text-decoration: none;
+          padding: calc(${padding} * .8) calc(${padding} * 1.7);
+          border-radius: ${block ? theme.layout.radius : 0};
           width: fit-content;
         }
         
         .link:hover, .link:active, .link:focus {
           text-decoration: ${decoration};
         }
+        
+        .link:hover {
+          background-color: ${block ? '#0076ff1a' : 'unset'};
+        }
       `}</style>
     </a>
   )

lib/components/index.ts

@@ -1,7 +1,7 @@
 
 export { default as Layout } from  './layout'
-export { default as ActiveLink } from  './active-link'
-export { default as ActiveCatalog } from  './active-catalog'
+export { default as ActiveLink } from 'lib/components/sidebar/active-link'
+export { default as ActiveCatalog } from 'lib/components/sidebar/active-catalog'
 export { default as Sidebar } from  './sidebar'
 export { default as Playground } from  './playground'
 export { default as ExampleBlock } from  './example-block'

lib/components/sidebar/active-link.tsx

@@ -13,12 +13,13 @@ export interface Props {
 const ActiveLink: React.FC<React.PropsWithChildren<Props>> = React.memo(
   ({ children, index, href }) => {
     const { updateShouldScroll } = useConfigs()
-    const { asPath } = useRouter()
-    const isActive = asPath === href
+    const { pathname } = useRouter()
+    const isActive = pathname === href
     const child = Children.only(children)
-    
+  
     useEffect(() => {
       if (!isActive) return
+      
       updateShouldScroll && updateShouldScroll(index > 16)
     }, [isActive])
 

lib/components/sidebar/side-item.tsx

@@ -1,7 +1,7 @@
 import React, { useState, ReactElement, useCallback } from 'react'
-import ArrowIcon from 'lib/components/icons/arrow'
-import ActiveLink from 'lib/components/active-link'
-import ActiveCatalog from 'lib/components/active-catalog'
+import ActiveLink from './active-link'
+import ArrowIcon from '../icons/arrow'
+import ActiveCatalog from './active-catalog'
 import { useTheme } from 'components'
 
 export type Sides = {

pages/docs/components/link.mdx

@@ -30,13 +30,20 @@ Hyperlinks between pages.
   desc="Use `Text` to standardize text content."
   scope={{ Link, Text }}
   code={`
-<div>
-<Text><Link href="#" pure>The Evil Rabbit Jumped over the Fence.</Link></Text>
-<Text><Link href="#" color pure>The Evil Rabbit Jumped over the Fence.</Link></Text>
-<Text><Link href="#" pure underline>The Evil Rabbit Jumped over the Fence.</Link></Text>
-<Text><Link href="#" underline>The Evil Rabbit Jumped over the Fence.</Link></Text>
+<>
+  <Text><Link href="#" pure>The Evil Rabbit Jumped over the Fence.</Link></Text>
+  <Text><Link href="#" color pure>The Evil Rabbit Jumped over the Fence.</Link></Text>
+  <Text><Link href="#" pure underline>The Evil Rabbit Jumped over the Fence.</Link></Text>
+  <Text><Link href="#" underline>The Evil Rabbit Jumped over the Fence.</Link></Text>
+</>
+`} />
 
-</div>
+<Playground
+  title="block"
+  desc="Display as a separate block."
+  scope={{ Link }}
+  code={`
+<Link href="#" pure block>The Evil Rabbit Jumped over the Fence.</Link>
 `} />
 
 <Attributes edit="/pages/docs/components/link.mdx">
@@ -48,6 +55,7 @@ Hyperlinks between pages.
 | **color** | display color for link | `boolean` | - | `false` |
 | **pure** | hide icon | `boolean` | - | `false` |
 | **underline** | display underline | `boolean` | - | `false` |
+| **block** | display as a separate block | `boolean` | - | `false` |
 | ... | native props | `LinkHTMLAttributes` | `'alt', 'className', ...` | - |
 
 </Attributes>