@itgold/grandbazar-ui-kit/src/components/buttons/hooks/useButtonClasses.ts

Grandbazar.io UI component library: React, Typescript, Tailwind, Rollup, Storybook, Jest.

import { TButtonStyleProps } from '@/components/buttons/types/TButtonStyleProps';
import { classNames } from '@/utils/classNames';

export function useButtonClasses({ color, size, shape, className }: TButtonStyleProps) {
  const buttonClasses =
    'relative inline-flex items-center justify-center transition duration-std ease-in-out disabled:pointer-events-none focus-visible:outline-none focus-visible:ring-2';

  const getButtonColorClasses = () => {
    switch (color) {
      case 'black':
        return 'bg-gray-ui text-gray-ui-100 hover:bg-gray-ui-900 active:bg-gray-ui-800 focus-visible:ring-gray-ui/35 disabled:bg-gray-ui/10 disabled:text-gray-ui/60';
      case 'yellow':
        return 'bg-yellow-ui-500 text-gray-ui hover:bg-yellow-ui-400 active:bg-yellow-ui-600 focus-visible:ring-yellow-ui-500/40 focus-visible:bg-yellow-ui-400 disabled:text-gray-ui-300 disabled:bg-white/10';
      case 'blackOutlined':
        return 'border border-solid border-gray-ui hover:bg-gray-ui/5 active:bg-gray-ui/10 focus-visible:ring-gray-ui/35 focus-visible:bg-gray-ui/5 disabled:border-gray-ui-700 disabled:text-gray-ui/60';
      case 'whiteOutlined':
        return 'text-gray-ui-100 border border-solid border-gray-ui-700 hover:bg-gray-ui-100/5 active:bg-gray-ui-100/10 focus-visible:ring-gray-ui-100/25 focus-visible:bg-gray-ui-100/5 disabled:text-gray-ui-700';
      case 'gray':
        return 'bg-gray-ui/5 hover:bg-gray-ui/10 active:text-gray-ui/25-60 focus-visible:bg-gray-ui/5 focus-visible:ring-gray-ui/35 disabled:bg-gray-ui/5 disabled:text-gray-ui-700';
      case 'darkThemeGray':
        return 'text-gray-ui-100 bg-gray-ui-100/5 hover:bg-gray-ui-100/10 active:text-gray-ui-100/48 active:bg-gray-ui-100/10 focus-visible:ring-gray-ui-100/25 disabled:bg-gray-ui-100/5 disabled:text-gray-ui-700';
      case 'transparent':
        return 'hover:bg-gray-ui/5 active:bg-gray-ui/10 focus-visible:ring-gray-ui/35 focus-visible:ring-3';
      case 'darkThemeTransparent':
        return 'text-gray-ui-100 hover:bg-gray-ui-100/5 active:bg-gray-ui-100/10 focus-visible:ring-gray-ui-100/25 focus-visible:ring-3';
      case 'red':
        return 'bg-transparent border border-solid border-red-ui text-red-ui hover:bg-red-ui/10 active:bg-red-ui/15 focus-visible:ring-gray-ui/35 disabled:border-gray-ui-700 disabled:text-gray-ui-700';
    }
  };

  const getButtonSize = () => {
    switch (size) {
      case 'sm':
        return `h-6 ${shape !== 'default' ? 'w-6' : 'px-2'}`;
      case 'md':
        return `h-9 ${shape !== 'default' ? 'w-9' : 'px-4'}`;
      case 'lg':
        return `h-13 ${shape !== 'default' ? 'w-13' : 'px-6'}`;
    }
  };

  const buttonShapeClasses = shape === 'circle' ? 'rounded-full' : 'rounded-lg';

  return classNames(buttonClasses, getButtonColorClasses(), getButtonSize(), buttonShapeClasses, className ?? '');
}