mirror of
https://github.com/wavetermdev/docusaurus-og.git
synced 2026-08-05 13:46:35 -07:00
fix: use @docusaurus/Link component for CTA links
This commit is contained in:
+13
-25
@@ -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>
|
||||
)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user