feishin/src/renderer/features/shared/components/play-button.tsx

import { UnstyledButton } from '@mantine/core';
import { RiPlayFill } from 'react-icons/ri';
import styled from 'styled-components';

const MotionButton = styled(UnstyledButton)`
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--btn-filled-bg);
  border: none;
  border-radius: 50%;
  opacity: 0.8;

  svg {
    fill: var(--btn-filled-fg);
  }

  &:hover {
    background-color: var(--btn-filled-bg-hover);
    transform: scale(1.1);

    svg {
      fill: var(--btn-filled-fg-hover);
    }
  }

  &:active {
    transform: scale(0.95);
  }

  transition: background-color 0.2s ease-in-out;
  transition: transform 0.2s ease-in-out;
`;

export const PlayButton = ({ ...props }: any) => {
  return (
    <MotionButton
      {...props}
      h="45px"
      w="45px"
    >
      <RiPlayFill size={20} />
    </MotionButton>
  );
};