comicbox/components/Button.tsx

import {
    AnchorHTMLAttributes,
    ButtonHTMLAttributes,
    DetailedHTMLProps,
    RefAttributes,
} from 'react';
import Link, { LinkProps } from 'next/link';

interface CustomProps {
    noDefaultColous?: boolean;
}

export default function Button({
    className,
    noDefaultColous,
    ...props
}: DetailedHTMLProps<
    ButtonHTMLAttributes<HTMLButtonElement>,
    HTMLButtonElement
> &
    CustomProps) {
    const classes = [className];
    classes.push(
        'p-2',
        'rounded',
        'shadow',
        'shadow-slate-800',
        'transition-colors'
    );
    if (!noDefaultColous) {
        classes.push('bg-slate-600', 'text-slate-50', 'hover:bg-slate-500', 'disabled:bg-slate-900', 'disabled:text-slate-200');
    }
    return <button className={classes.join(' ')} {...props} />;
}

type LinkButtonProps = Omit<
    AnchorHTMLAttributes<HTMLAnchorElement>,
    keyof LinkProps
> &
    LinkProps & {
        children?: React.ReactNode;
    } & RefAttributes<HTMLAnchorElement>;

export function LinkButton({ className, children, ...props }: LinkButtonProps) {
    return (
        <Link {...props}>
            <a className={'text-blue-200 hover:underline ' + (className || '')}>
                {children}
            </a>
        </Link>
    );
}