rocksky.app
+17
apps/web/src/components/SongCover/InteractionBar/InteractionBar.tsx
+17
apps/web/src/components/SongCover/InteractionBar/InteractionBar.tsx
···
···
1
+
import HeartOutline from "../../Icons/HeartOutline";
2
+
import HeartFilled from "../../Icons/Heart";
3
+
4
+
function InteractionBar() {
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
+
);
15
+
}
16
+
17
+
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
import { css } from "@emotion/react";
2
import styled from "@emotion/styled";
3
4
const Cover = styled.img<{ size?: number }>`
5
border-radius: 8px;
6
height: 240px;
7
width: 240px;
8
-
margin-bottom: 10px;
9
${(props) =>
10
props.size &&
11
css`
···
53
title?: string;
54
artist?: string;
55
size?: number;
56
};
57
58
function SongCover(props: SongCoverProps) {
59
-
const { title, artist, cover, size } = props;
60
return (
61
<CoverWrapper>
62
-
<Cover src={cover} size={size} />
63
-
<div className="mb-[13px]">
64
<SongTitle className="!text-[var(--color-text-primary)]">
65
{title}
66
</SongTitle>
···
1
import { css } from "@emotion/react";
2
import styled from "@emotion/styled";
3
+
import InteractionBar from "./InteractionBar";
4
5
const Cover = styled.img<{ size?: number }>`
6
border-radius: 8px;
7
height: 240px;
8
width: 240px;
9
+
margin-bottom: -5px;
10
${(props) =>
11
props.size &&
12
css`
···
54
title?: string;
55
artist?: string;
56
size?: number;
57
+
withLikeButton?: boolean;
58
};
59
60
function SongCover(props: SongCoverProps) {
61
+
const { title, artist, cover, size, withLikeButton } = props;
62
return (
63
<CoverWrapper>
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]">
69
<SongTitle className="!text-[var(--color-text-primary)]">
70
{title}
71
</SongTitle>
+2
-1
apps/web/src/pages/home/feed/Feed.tsx
+2
-1
apps/web/src/pages/home/feed/Feed.tsx
History
5 rounds
0 comments
tsiry-sandratraina.com
submitted
#4
4 commits
expand
collapse
feat: add InteractionBar component and integrate with SongCover for like functionality
work in progress
Add likes support to feed and SongCover
Update feed API types to include trackUri, likesCount and liked Show
like button and counts in InteractionBar and expose onLike handler Use
useLike in SongCover to call like/unlike and pass uri/liked/likesCount
Forward like state from Feed to SongCover
Prompt sign-in for likes and stop click propagation
Show SignInModal (with a `like` flag) when a user attempts to like
without a token. Add optimistic local state for liked and likesCount to
update UI immediately. Stop event propagation on the like button and
cover to prevent parent click handlers.
expand 0 comments
pull request successfully merged
tsiry-sandratraina.com
submitted
#3
expand 0 comments
tsiry-sandratraina.com
submitted
#2
1 commit
expand
collapse
feat: add InteractionBar component and integrate with SongCover for like functionality
expand 0 comments
tsiry-sandratraina.com
submitted
#1
1 commit
expand
collapse
feat: add InteractionBar component and integrate with SongCover for like functionality
expand 0 comments
tsiry-sandratraina.com
submitted
#0
1 commit
expand
collapse
feat: add InteractionBar component and integrate with SongCover for like functionality