From 4db38643d8f9eaa23f8166695387335d69d577c1 Mon Sep 17 00:00:00 2001
From: Atharv Agarwal <atharv20agarwal@gmail.com>
Date: Fri, 18 Oct 2024 14:25:32 +0530
Subject: [PATCH] feat: created basic equalizer animations

---
 .../EqualizerButton/EqualizerBtn.tsx          | 28 +++++++++
 .../EqualizerButton/equalizer.module.scss     | 58 +++++++++++++++++++
 2 files changed, 86 insertions(+)
 create mode 100644 components/MobileLanding/Artist/MusicButtons/EqualizerButton/EqualizerBtn.tsx
 create mode 100644 components/MobileLanding/Artist/MusicButtons/EqualizerButton/equalizer.module.scss

diff --git a/components/MobileLanding/Artist/MusicButtons/EqualizerButton/EqualizerBtn.tsx b/components/MobileLanding/Artist/MusicButtons/EqualizerButton/EqualizerBtn.tsx
new file mode 100644
index 0000000..8f99b36
--- /dev/null
+++ b/components/MobileLanding/Artist/MusicButtons/EqualizerButton/EqualizerBtn.tsx
@@ -0,0 +1,28 @@
+"use client";
+
+import { useState } from "react";
+import styles from "./equalizer.module.scss";
+
+export default function EqualizerBtn() {
+  const [isPlaying, setIsPlaying] = useState(false);
+
+  function clickHandler() {
+    setIsPlaying((prev) => !prev);
+  }
+  return (
+    <div
+      className={`${styles.equalizer}  ${
+        isPlaying ? styles.play : styles.pause
+      }`}
+      onClick={clickHandler}
+    >
+      <div className={styles.barContainer}>
+        <div className={styles.bar}></div>
+        <div className={styles.bar}></div>
+        <div className={styles.bar}></div>
+        <div className={styles.bar}></div>
+        <div className={styles.bar}></div>
+      </div>
+    </div>
+  );
+}
diff --git a/components/MobileLanding/Artist/MusicButtons/EqualizerButton/equalizer.module.scss b/components/MobileLanding/Artist/MusicButtons/EqualizerButton/equalizer.module.scss
new file mode 100644
index 0000000..2d78835
--- /dev/null
+++ b/components/MobileLanding/Artist/MusicButtons/EqualizerButton/equalizer.module.scss
@@ -0,0 +1,58 @@
+@keyframes growShrink {
+  0%,
+  100% {
+    height: 3.5px;
+  }
+  50% {
+    height: 40%;
+  }
+}
+
+.equalizer {
+  aspect-ratio: 1;
+  width: 50px;
+  background-color: white;
+  border-radius: 50%;
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  pointer-events: auto;
+
+  .barContainer {
+    display: flex;
+    align-items: center;
+    height: 100%;
+    gap: 2px;
+
+    .bar {
+      width: 3.5px;
+      height: 3.5px;
+      background-color: black;
+      border-radius: 8px;
+      transition: height 0.65s ease-in-out;
+    }
+  }
+
+  &.play {
+    .barContainer {
+      .bar {
+        animation: growShrink 1s ease-in-out infinite forwards;
+
+        @for $i from 1 to 6 {
+          &:nth-of-type(#{$i}) {
+            animation-delay: calc(($i - 1) * 0.2s);
+          }
+        }
+      }
+    }
+  }
+
+  &.pause {
+    .barContainer {
+      .bar {
+        height: 3.5px;
+      }
+    }
+  }
+}