A decentralized music tracking and discovery platform built on AT Protocol 🎵
rocksky.app
spotify
atproto
lastfm
musicbrainz
scrobbling
listenbrainz
work in progress
+11
-7
+11
-7
apps/web/src/components/SongCover/InteractionBar/InteractionBar.tsx
+11
-7
apps/web/src/components/SongCover/InteractionBar/InteractionBar.tsx
···
1
1
import HeartOutline from "../../Icons/HeartOutline";
2
+
import HeartFilled from "../../Icons/Heart";
2
3
3
4
function InteractionBar() {
4
-
return (
5
-
<div className="absolute bottom-[-1px] left-0 h-[100px] w-full bg-[linear-gradient(rgba(22,24,35,0)_2.92%,rgba(22,24,35,0.5)_98.99%)] flex justify-start items-end p-[10px] rounded-b-[8px]">
6
-
<div className="h-[40px] w-full flex items-center">
7
-
<HeartOutline color="#fff" />
8
-
</div>
9
-
</div>
10
-
);
5
+
return (
6
+
<div className="absolute bottom-[-1px] left-0 h-[100px] w-full bg-[linear-gradient(rgba(22,24,35,0)_2.92%,rgba(22,24,35,0.5)_98.99%)] flex justify-start items-end p-[10px] rounded-b-[8px]">
7
+
<div className="h-[40px] w-full flex items-center">
8
+
<span className="cursor-pointer" onClick={(e) => e.preventDefault()}>
9
+
{true && <HeartOutline color="#fff" />}
10
+
{false && <HeartFilled color="#fff" />}
11
+
</span>
12
+
</div>
13
+
</div>
14
+
);
11
15
}
12
16
13
17
export default InteractionBar;