fixing bugs

frontendwizards · Sep 25, 2024 · 1d0dace · 1d0dace
1 parent 1f64f03
commit 1d0dace
Show file tree

Hide file tree

Showing 6 changed files with 52 additions and 9 deletions.
diff --git a/problems/.DS_Store b/problems/.DS_Store
diff --git a/problems/twitter-like-II/solutions/react-ts/src/App.tsx b/problems/twitter-like-II/solutions/react-ts/src/App.tsx
@@ -1,6 +1,7 @@
 import { useRef, useState } from "react";
 import saveLikeValue from "./services/saveLikeValue";
 import "./styles.css";
+import { cn } from "./utils/cn";
 import debounce from "./utils/debounce";
 
 function LikeButtonSVG({
@@ -12,9 +13,18 @@ function LikeButtonSVG({
   height: number;
   isLiked: boolean;
 }) {
+  const [isClicked, setIsClicked] = useState(false);
+
   return (
-    <div className="heart w-10 h-10">
-
+    <div className="overflow-hidden rounded-full p-2">
+      <div
+        onClick={() => setIsClicked(true)}
+        className={cn([
+          "heart w-10 h-10 border-2",
+          isClicked && isLiked && "is_animating",
+          isLiked && "heart-filled",
+        ])}
+      />
     </div>
   );
 }
@@ -70,14 +80,14 @@ export default function App() {
   );
   const postLikes = 32;
 
-  const totalPostLikes = postLikes + (isLiked ? 1 : 0);
+  const totalPostLikes = postLikes + Number(isLiked);
 
   return (
-    <main className="bg-gray-400 h-screen flex items-center justify-center">
-     <div className="flex justify-center items-center gap-3">
-     <span className="text-4xl">{totalPostLikes}</span>
-      <LikeButton isLiked={isLiked} setIsLiked={setIsLiked} />
-     </div>
+    <main className=" h-screen flex items-center justify-center">
+      <div className="flex justify-center items-center">
+        <span className="text-2xl">{totalPostLikes}</span>
+        <LikeButton isLiked={isLiked} setIsLiked={setIsLiked} />
+      </div>
     </main>
   );
 }
diff --git a/problems/twitter-like-II/solutions/react-ts/src/styles.css b/problems/twitter-like-II/solutions/react-ts/src/styles.css
@@ -11,4 +11,24 @@ body {
 .heart {
   background-image:url( 'https://abs.twimg.com/a/1446542199/img/t1/web_heart_animation.png');
   background-position: left;
+  background-size: 2900%;
+  background-repeat: no-repeat;
+  scale: 2;
+}
+
+.heart:hover {
+  /* background-position: right; */
+}
+
+.heart-filled {
+  background-position: right;
+}
+
+.is_animating {
+  animation: heart-burst .8s steps(28) 1;
+}
+
+@keyframes heart-burst {
+  from {background-position:left;}
+  to { background-position:right;}
 }
diff --git a/problems/twitter-like-II/solutions/react-ts/src/utils/cn.ts b/problems/twitter-like-II/solutions/react-ts/src/utils/cn.ts
@@ -0,0 +1,6 @@
+import { ClassValue, clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}
diff --git a/problems/twitter-like/solutions/react-ts/src/utils/cn.ts b/problems/twitter-like/solutions/react-ts/src/utils/cn.ts
@@ -0,0 +1,6 @@
+import { ClassValue, clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}
diff --git a/problems/whack-a-mole/solutions/react-ts/src/App.tsx b/problems/whack-a-mole/solutions/react-ts/src/App.tsx
@@ -109,6 +109,7 @@ const App: FC = () => {
               className="relative h-[12rem] flex-[0_1_25%] overflow-hidden"
             >
               <button
+                tabIndex={-1}
                 aria-label={`Mole ${index + 1}`}
                 onClick={() => catchHole(index)}
                 className={cn([
@@ -125,7 +126,7 @@ const App: FC = () => {
               </button>
               <img
                 alt="mole hill"
-                className="absolute bottom-[-1.69rem] "
+                className="absolute bottom-[-1.69rem]"
                 src="https://www.greatfrontend.com/img/questions/whack-a-mole/mole-hill.png"
               />
             </div>