ente/src/components/FavButton.tsx

import React from 'react';
import styled from 'styled-components';

const HeartUI = styled.button<{
    isClick: boolean;
    size: number;
}>`
    width: ${(props) => props.size}px;
    height: ${(props) => props.size}px;
    float: right;
    background: url('/fav-button.png') no-repeat;
    cursor: pointer;
    background-size: cover;
    border: none;
    ${({isClick, size}) => isClick &&
        `background-position: -${
            28 * size
        }px;transition: background 1s steps(28);`}
`;

export default function FavButton({isClick, onClick, size}) {
    return <HeartUI isClick={isClick} onClick={onClick} size={size} />;
}