This repository has been archived on 2025-03-19. You can view files and clone it, but cannot push or open issues or pull requests.
feishin/src/renderer/features/shared/components/play-button.tsx
2022-12-29 19:23:07 -08:00

30 lines
755 B
TypeScript

import { motion } from 'framer-motion';
import { RiPlayFill } from 'react-icons/ri';
import styled from 'styled-components';
import { ButtonProps, _Button } from '/@/renderer/components';
const MotionButton = styled(motion(_Button))`
display: flex;
align-items: center;
justify-content: center;
width: 50px;
height: 50px;
background-color: var(--primary-color);
border: none;
border-radius: 50%;
opacity: 0.8;
transition: background-color 0.2s linear;
`;
export const PlayButton = ({ ...props }: Omit<ButtonProps, 'children'>) => {
return (
<MotionButton
variant="filled"
whileHover={{ scale: 1.1 }}
whileTap={{ scale: 0.95 }}
{...props}
>
<RiPlayFill size={20} />
</MotionButton>
);
};