feat: updates

packages/web/components/New/Wave.tsx

@@ -0,0 +1,32 @@
+import { css, cx, keyframes } from '@emotion/css'
+
+const Wave = ({ playing }: { playing: boolean }) => {
+  const wave = keyframes`
+    0% { transform: scaleY(1) }
+    50% { transform: scaleY(0.2) }
+    100% { transform: scaleY(1)}
+    `
+  const animation = css`
+    transform-origin: bottom;
+    animation: ${wave} 1s ease-in-out infinite;
+  `
+
+  const delay = ['-100ms', '-500ms', '-1200ms', '-1000ms', '-700ms']
+
+  return (
+    <div className='grid h-3 grid-cols-5 items-end gap-0.5'>
+      {[...new Array(5).keys()].map(i => (
+        <div
+          key={i}
+          className={cx('h-full w-0.5 bg-brand-600', animation)}
+          style={{
+            animationDelay: delay[i],
+            animationPlayState: playing ? 'running' : 'paused',
+          }}
+        ></div>
+      ))}
+    </div>
+  )
+}
+
+export default Wave