fix: use @docusaurus/Link component for CTA links

This commit is contained in:
Hossein Mehrabi
2023-07-17 21:46:34 +03:30
parent e86d924d88
commit 7cea51ed7b
3 changed files with 19 additions and 28 deletions
@@ -1,26 +1,16 @@
import {
Button,
ButtonProps,
Typography,
TypographyProps,
} from '@acid-info/lsd-react'
import { Button, ButtonProps, Typography } from '@acid-info/lsd-react'
import Link, { Props } from '@docusaurus/Link'
import clsx from 'clsx'
import React from 'react'
import './CallToActionButton.scss'
export type CallToActionButtonProps = Omit<
React.AnchorHTMLAttributes<HTMLAnchorElement>,
'title'
> & {
export type CallToActionButtonProps = Props & {
href?: string
size?: ButtonProps['size']
variant?: ButtonProps['variant']
}
const LinkElement = Typography as React.FC<TypographyProps & { component: 'a' }>
export const CallToActionButton: React.FC<CallToActionButtonProps> = ({
href,
className,
variant = 'filled',
size = 'large',
@@ -28,17 +18,15 @@ export const CallToActionButton: React.FC<CallToActionButtonProps> = ({
...props
}) => {
return (
<LinkElement
className={clsx('mdx-cta-button', className)}
variant={size === 'large' ? 'label1' : 'label2'}
component="a"
href={href}
target={'_blank'}
{...(props as any)}
>
<Button size={size} variant={variant}>
{children}
</Button>
</LinkElement>
<Link className={clsx('mdx-cta-button', className)} {...(props as any)}>
<Typography
component="span"
variant={size === 'large' ? 'label1' : 'label2'}
>
<Button size={size} variant={variant}>
{children}
</Button>
</Typography>
</Link>
)
}
@@ -18,6 +18,8 @@
@include utils.responsive('lg', 'down') {
.mdx-hero-action {
text-decoration: none !important;
button {
padding: 6px 12px !important;
}
@@ -1,9 +1,10 @@
import { Button, ButtonProps, Typography } from '@acid-info/lsd-react'
import Link, { Props } from '@docusaurus/Link'
import clsx from 'clsx'
import React from 'react'
import './HeroAction.scss'
export type HeroActionProps = React.HTMLAttributes<HTMLAnchorElement> & {
export type HeroActionProps = Props & {
variant?: ButtonProps['variant']
size?: 'medium' | 'large'
}
@@ -16,7 +17,7 @@ export const HeroAction: React.FC<HeroActionProps> = ({
...props
}) => {
return (
<a
<Link
className={clsx(className, 'mdx-hero-action', `mdx-hero-action--${size}`)}
{...props}
>
@@ -29,6 +30,6 @@ export const HeroAction: React.FC<HeroActionProps> = ({
{children}
</Typography>
</Button>
</a>
</Link>
)
}