feat: like and collect button hover status

src/components/site/PostFooter.tsx

@@ -32,6 +32,22 @@ export const PostFooter: React.FC<{
   const userSite = useGetUserSites(address)
   const router = useRouter()
 
+  const likes = useGetLikes({
+    pageId: page?.id,
+  })
+  const isLike = useCheckLike({
+    address,
+    pageId: page?.id,
+  })
+
+  const mints = useGetMints({
+    pageId: page?.id,
+  })
+  const isMint = useCheckMint({
+    address,
+    pageId: page?.id,
+  })
+
   const like = async () => {
     if (!address) {
       setLikeProgress(true)
@@ -72,22 +88,6 @@ export const PostFooter: React.FC<{
     }
   }
 
-  const likes = useGetLikes({
-    pageId: page?.id,
-  })
-  const isLike = useCheckLike({
-    address,
-    pageId: page?.id,
-  })
-
-  const mints = useGetMints({
-    pageId: page?.id,
-  })
-  const isMint = useCheckMint({
-    address,
-    pageId: page?.id,
-  })
-
   useEffect(() => {
     if (mintProgress && address && isMint.isSuccess && page?.id) {
       if (!userSite.data) {
@@ -139,8 +139,10 @@ export const PostFooter: React.FC<{
   return (
     <div className="flex fill-gray-400 text-gray-500 mt-14">
       <Button
-        variant="text"
-        className="flex items-center mr-10"
+        variant="like"
+        className={`flex items-center mr-10 ${
+          isLike.isSuccess && isLike.data.count && "active"
+        }`}
         isAutoWidth={true}
         onClick={like}
         isLoading={
@@ -149,32 +151,18 @@ export const PostFooter: React.FC<{
           unlikePage.isLoading ||
           likeProgress
         }
-        style={
-          isLike.isSuccess && isLike.data.count
-            ? {
-                color: "#f91880",
-                fill: "#f91880",
-              }
-            : {}
-        }
       >
         <LikeIcon className="mr-2 w-10 h-10" />
         <span>{likes.data?.count || 0}</span>
       </Button>
       <Button
-        variant="text"
-        className="flex items-center mr-10"
+        variant="collect"
+        className={`flex items-center mr-10 ${
+          isMint.isSuccess && isMint.data.count && "active"
+        }`}
         isAutoWidth={true}
         onClick={mint}
         isLoading={mintPage.isLoading || likeProgress}
-        style={
-          isMint.isSuccess && isMint.data.count
-            ? {
-                color: "#FFCF55",
-                fill: "#FFCF55",
-              }
-            : {}
-        }
       >
         <DuplicateIcon className="mr-2 w-10 h-10" />
         <span>{mints.data?.count || 0}</span>

src/components/ui/Button.tsx

@@ -12,7 +12,7 @@ type ButtonProps = {
   isBlock?: boolean
   isDisabled?: boolean
   isAutoWidth?: boolean
-  variant?: "primary" | "secondary" | "text" | "rss3" | "crossbell"
+  variant?: "primary" | "secondary" | "text" | "like" | "collect"
   variantColor?: "green" | "red" | "gray"
   size?: "sm"
   rounded?: "full" | "lg"

src/css/tailwind.css

@@ -74,24 +74,38 @@ body {
   @apply fill-gray-500;
 }
 
-.button.is-rss3 {
-  background-color: #e7f1ff;
-  fill: #1064ff;
-  color: #1064ff;
-}
-
-.button.is-crossbell {
-  background-color: #fff5e1;
-  fill: #e5b65a;
-  color: #e5b65a;
-}
-
 .button.is-text {
   @apply shadow-none p-0;
   @apply text-gray-500 fill-gray-500;
   @apply hover:text-gray-600 hover:fill-gray-600;
 }
 
+.button.is-like {
+  @apply shadow-none p-0;
+  @apply text-gray-500 fill-gray-500;
+}
+.button.is-like:hover {
+  color: #f91880;
+  fill: #f91880;
+}
+.button.is-like.active {
+  color: #f91880;
+  fill: #f91880;
+}
+
+.button.is-collect {
+  @apply shadow-none p-0;
+  @apply text-gray-500 fill-gray-500;
+}
+.button.is-collect:hover {
+  color: #ffcf55;
+  fill: #ffcf55;
+}
+.button.is-collect.active {
+  color: #ffcf55;
+  fill: #ffcf55;
+}
+
 .button.is-green {
   --shadow-color-button: theme("colors.green.700");
   @apply bg-green-500 hover:bg-green-600 focus:bg-green-700;