50 lines
1.2 KiB
JavaScript
50 lines
1.2 KiB
JavaScript
|
import React from 'react';
|
||
|
|
import clsx from 'clsx';
|
||
|
|
import Link from '@docusaurus/Link';
|
||
|
|
|
||
|
|
const InstallButton = ({
|
||
|
|
size = null,
|
||
|
|
outline = false,
|
||
|
|
variant = 'primary',
|
||
|
|
block = false,
|
||
|
|
disabled = false,
|
||
|
|
className,
|
||
|
|
style,
|
||
|
|
link,
|
||
|
|
label
|
||
|
|
}) => {
|
||
|
|
const sizeMap = {
|
||
|
|
sm: 'sm',
|
||
|
|
small: 'sm',
|
||
|
|
lg: 'lg',
|
||
|
|
large: 'lg',
|
||
|
|
medium: null,
|
||
|
|
};
|
||
|
|
|
||
|
|
const buttonSize = size ? sizeMap[size] : '';
|
||
|
|
const sizeClass = buttonSize ? `button--${buttonSize}` : '';
|
||
|
|
const outlineClass = outline ? 'button--outline' : '';
|
||
|
|
const variantClass = variant ? `button--${variant}` : '';
|
||
|
|
const blockClass = block ? 'button--block' : '';
|
||
|
|
const disabledClass = disabled ? 'disabled' : '';
|
||
|
|
const destination = disabled ? null : link;
|
||
|
|
|
||
|
|
// Replace shortcodes like ":arrow_down:" with actual emojis
|
||
|
|
const parsedLabel = label.replace(':arrow_down:', '⬇️');
|
||
|
|
|
||
|
|
return (
|
||
|
|
<Link to={destination}>
|
||
|
|
<button
|
||
|
|
className={clsx('button', sizeClass, outlineClass, variantClass, blockClass, disabledClass, className)}
|
||
|
|
style={style}
|
||
|
|
role="button"
|
||
|
|
aria-disabled={disabled}
|
||
|
|
>
|
||
|
|
{parsedLabel}
|
||
|
|
</button>
|
||
|
|
</Link>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
export default InstallButton;
|