From ae1e5324467c74022aec8173efd8fdbeaa109745 Mon Sep 17 00:00:00 2001
From: Abhinav <abhinavk.grd@gmail.com>
Date: Sun, 26 Jun 2022 12:43:23 +0530
Subject: [PATCH] update Fav button to fav icon

---
 src/components/FavButton.tsx     | 23 -----------------------
 src/components/icons/FavIcon.tsx | 30 ++++++++++++++++++++++++++++++
 2 files changed, 30 insertions(+), 23 deletions(-)
 delete mode 100644 src/components/FavButton.tsx
 create mode 100644 src/components/icons/FavIcon.tsx

diff --git a/src/components/FavButton.tsx b/src/components/FavButton.tsx
deleted file mode 100644
index 896174c97..000000000
--- a/src/components/FavButton.tsx
+++ /dev/null
@@ -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} />;
-}
diff --git a/src/components/icons/FavIcon.tsx b/src/components/icons/FavIcon.tsx
new file mode 100644
index 000000000..e0e949c8a
--- /dev/null
+++ b/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,
+};