A decentralized music tracking and discovery platform built on AT Protocol 🎵
rocksky.app
spotify
atproto
lastfm
musicbrainz
scrobbling
listenbrainz
feat: add InteractionBar component and integrate with SongCover for like functionality
+27
-5
+13
apps/web/src/components/SongCover/InteractionBar/InteractionBar.tsx
+13
apps/web/src/components/SongCover/InteractionBar/InteractionBar.tsx
···
1
+
import HeartOutline from "../../Icons/HeartOutline";
2
+
3
+
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
+
);
11
+
}
12
+
13
+
export default InteractionBar;
+3
apps/web/src/components/SongCover/InteractionBar/index.tsx
+3
apps/web/src/components/SongCover/InteractionBar/index.tsx
+9
-4
apps/web/src/components/SongCover/SongCover.tsx
+9
-4
apps/web/src/components/SongCover/SongCover.tsx
···
1
1
import { css } from "@emotion/react";
2
2
import styled from "@emotion/styled";
3
+
import InteractionBar from "./InteractionBar";
3
4
4
5
const Cover = styled.img<{ size?: number }>`
5
6
border-radius: 8px;
6
7
height: 240px;
7
8
width: 240px;
8
-
margin-bottom: 10px;
9
+
margin-bottom: -5px;
9
10
${(props) =>
10
11
props.size &&
11
12
css`
···
53
54
title?: string;
54
55
artist?: string;
55
56
size?: number;
57
+
withLikeButton?: boolean;
56
58
};
57
59
58
60
function SongCover(props: SongCoverProps) {
59
-
const { title, artist, cover, size } = props;
61
+
const { title, artist, cover, size, withLikeButton } = props;
60
62
return (
61
63
<CoverWrapper>
62
-
<Cover src={cover} size={size} />
63
-
<div className="mb-[13px]">
64
+
<div className={`relative h-[100%] w-[92%]`}>
65
+
{withLikeButton && <InteractionBar />}
66
+
<Cover src={cover} size={size} />
67
+
</div>
68
+
<div className="mb-[13px] mt-[10px]">
64
69
<SongTitle className="!text-[var(--color-text-primary)]">
65
70
{title}
66
71
</SongTitle>
+2
-1
apps/web/src/pages/home/feed/Feed.tsx
+2
-1
apps/web/src/pages/home/feed/Feed.tsx
···
76
76
}
77
77
console.log(">> WebSocket connection closed");
78
78
};
79
-
}, [queryClient]);
79
+
}, [queryClient, feedUri]);
80
80
81
81
return (
82
82
<Container>
···
129
129
cover={song.cover}
130
130
artist={song.artist}
131
131
title={song.title}
132
+
withLikeButton
132
133
/>
133
134
</Link>
134
135
<div className="flex">