ConceptPortal-public/rsconcept/frontend/src/components/Common/DropdownButton.tsx

import clsx from 'clsx';
import { motion } from 'framer-motion';

import { animateDropdownItem } from '@/utils/animations';
import { globalIDs } from '@/utils/constants';

import { CProps } from '../props';

interface DropdownButtonProps
extends CProps.AnimatedButton {
  text?: string
  icon?: React.ReactNode

  children?: React.ReactNode
}

function DropdownButton({
  text, icon,
  className, title,
  onClick,
  children,
  ...restProps
}: DropdownButtonProps) {
  return (
  <motion.button type='button'
    onClick={onClick}
    className={clsx(
      'px-3 py-1 inline-flex items-center gap-2',
      'text-left text-sm overflow-ellipsis whitespace-nowrap',
      'disabled:clr-text-controls',
      {
        'clr-hover': onClick,
        'cursor-pointer disabled:cursor-not-allowed': onClick,
        'cursor-default': !onClick
      },
      className
    )}
    variants={animateDropdownItem}
    data-tooltip-id={title ? (globalIDs.tooltip) : undefined}
    data-tooltip-content={title}
    {...restProps}
  >
    {children ? children : null}
    {!children && icon ? icon : null}
    {!children && text ? <span>{text}</span> : null}
  </motion.button>);
}

export default DropdownButton;