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}/>
    );
}