comicbox/components/Button.tsx

import {
    AnchorHTMLAttributes,
    ButtonHTMLAttributes,
    DetailedHTMLProps,
} from 'react';
import Link 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 = AnchorHTMLAttributes<HTMLAnchorElement>;

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