import { FC } from 'react';
import { Icon } from '@mdi/react';

type ButtonProps = {
    text: string;
    title?: string;
    icon?: string;
    size?: string | number;
    className?: string;
    onClick?: () => void;
    href?: string;
};

export const Button: FC<ButtonProps> = ({ onClick, href, text, title, icon, size, className }) => {
    const conditional = icon
        ? 'p-2 rounded-8 hover:bg-neutral'
        : 'px-8 py-6 border dark:border-slate-400 hover:shadow rounded-4 text-12 font-bold uppercase';
    const classes = `text-primary dark:text-primary-dark dark:hover:bg-neutral-dark ${conditional} ${className ?? ''}`;

    const content = icon ? <Icon path={icon} size={size ?? 1} /> : text;

    return href ? (
        <a href={href} target="_blank" rel="noreferrer" className={classes} title={title} aria-label={text}>
            {content}
        </a>
    ) : (
        <button onClick={onClick} className={classes} title={title} aria-label={text}>
            {content}
        </button>
    );
};

import { AnchorHTMLAttributes, ButtonHTMLAttributes, FC } from 'react';
import { Icon } from '@mdi/react';

type ButtonProps = {
    text: string;
    icon?: string;
    size?: string | number;
    className?: string;
};

const iconClassNames = 'p-2 rounded-8 hover:bg-neutral';
const textClassNames = 'px-8 py-6 border dark:border-slate-400 hover:shadow rounded-4 text-12 font-bold uppercase';
const commonClassNames = 'text-primary dark:text-primary-dark dark:hover:bg-neutral-dark';

export const Button: FC<ButtonProps & ButtonHTMLAttributes<HTMLButtonElement>> = ({ text, icon, size = 1, className = '', ...rest }) => (
    <button className={`${commonClassNames} ${icon ? iconClassNames : textClassNames} ${className}`} aria-label={text} {...rest}>
        {icon ? <Icon path={icon} size={size ?? 1} /> : text}
    </button>
);

export const LinkButton: FC<ButtonProps & AnchorHTMLAttributes<HTMLAnchorElement>> = ({
    text,
    icon,
    size = 1,
    className = '',
    ...rest
}) => (
    <a
        target="_blank"
        rel="noreferrer"
        className={`${commonClassNames} ${icon ? iconClassNames : textClassNames} ${className}`}
        aria-label={text}
        {...rest}>
        {icon ? <Icon path={icon} size={size} /> : text}
    </a>
);

Rewrite and improve common button components
Rewrite and improve common button components
