update Fav button to fav icon

src/components/FavButton.tsx

@@ -1,23 +0,0 @@
-import React from 'react';
-import { styled } from '@mui/material';
-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} />;
-}

src/components/icons/FavIcon.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import { styled } from '@mui/material';
+const HeartUI = styled('div')<{
+    isActive: boolean;
+    size: number;
+}>(
+    ({ isActive, size }) => `
+    width: ${size}px;
+    height: ${size}px;
+    float: right;
+    background: url('/fav-button.png') no-repeat;
+    cursor: pointer;
+    background-size: cover;
+    border: none;
+    ${
+        isActive &&
+        `background-position: -${
+            size * 44
+        }px;transition: background 1s steps(28);`
+    }
+`
+);
+
+export default function FavIcon({ isActive, size }) {
+    return <HeartUI isActive={isActive} size={size} />;
+}
+
+FavIcon.defaultProps = {
+    size: 44,
+};