spotube/src/components/shared/IconButton.tsx

import React, { useEffect, useRef } from "react";
import {QGraphicsDropShadowEffect, QPushButton} from "@nodegui/nodegui"
import { Button } from "@nodegui/react-nodegui";
import { ButtonProps } from "@nodegui/react-nodegui/dist/components/Button/RNButton";

interface IconButtonProps extends Omit<ButtonProps, "text"> {}

function IconButton({ style, ...props }: IconButtonProps) {
  const iconBtnRef = useRef<QPushButton>()
  const shadowGfx = new QGraphicsDropShadowEffect();
  useEffect(() => {
    shadowGfx.setBlurRadius(5);
    shadowGfx.setXOffset(0);
    shadowGfx.setYOffset(0);
    iconBtnRef.current?.setGraphicsEffect(shadowGfx);
  }, [])
  const iconButtonStyleSheet = `
    #icon-btn{
       background-color: rgba(255, 255, 255, 0.055);
       border-width: 1px;
       border-style: solid;
       border-color: transparent;
       border-radius: ${((props.maxSize ?? props.size)?.width ?? 30) / 2}px; 
       ${style ?? ``}
    }
    #icon-btn:hover{
      border-color: green;
    }
    #icon-btn:pressed{
      border-style: groove;
      background-color: #1cca1c;
    }
  `;

  return <Button ref={iconBtnRef} id="icon-btn" size={{ height: 30, width: 30, fixed: true }} styleSheet={iconButtonStyleSheet} {...props} />;
}

export default IconButton;