lti-web-client/src/components/Button.tsx

import react from 'react';
import Link from 'next/link';
import { cn } from '@/lib/helper';
import { Color } from '@/types/theme';

export interface ButtonProps extends react.ComponentProps<'button'> {
  variant?: 'soft' | 'outline' | 'dash' | 'ghost' | 'link' | 'active';
  color?: Color;
  href?: string;
  isLoading?: boolean;
  target?: string;
  rel?: string;
}

const Button = ({
  children,
  type,
  href,
  variant,
  color = 'primary',
  isLoading,
  className,
  disabled,
  onClick,
  target,
  rel,
  ...props
}: ButtonProps) => {
  const btnBaseClassName = cn(
    'btn',
    {
      'btn-soft': variant === 'soft',
      'btn-outline': variant === 'outline',
      'btn-dash': variant === 'dash',
      'btn-ghost': variant === 'ghost',
      'btn-link': variant === 'link',
      'btn-active': variant === 'active',

      'btn-primary': color === 'primary',
      'btn-secondary': color === 'secondary',
      'btn-accent': color === 'accent',
      'btn-neutral': color === 'neutral',
      'btn-info': color === 'info',
      'btn-success': color === 'success',
      'btn-warning': color === 'warning',
      'btn-error': color === 'error',
    },
    'h-fit justify-center items-center gap-2 rounded p-2 text-base transition-all'
  );

  return (
    <>
      {!href && (
        <button
          {...props}
          type={type}
          onClick={onClick}
          disabled={disabled}
          className={cn(
            btnBaseClassName,
            'disabled:pointer-events-auto! disabled:cursor-not-allowed!',
            className
          )}
        >
          {!isLoading && children}
          {isLoading && <span className='loading loading-dots loading-md' />}
        </button>
      )}

      {href && (
        <Link
          href={disabled ? '#' : href}
          target={target}
          rel={rel}
          aria-disabled={disabled}
          className={cn(
            btnBaseClassName,
            { 'pointer-events-auto cursor-not-allowed': disabled },
            className
          )}
        >
          {!isLoading && children}
          {isLoading && <span className='loading loading-dots loading-md' />}
        </Link>
      )}
    </>
  );
};

export default Button;