From 85deb1aacf82d1ae434e205caada7039bd5ce8f1 Mon Sep 17 00:00:00 2001
From: Tsiry Sandratraina <tsiry.sndr@rocksky.app>
Date: Sun, 28 Sep 2025 21:53:05 +0300
Subject: [PATCH] feat: add InteractionBar component and integrate with
 SongCover for like functionality

---
 .../SongCover/InteractionBar/InteractionBar.tsx     | 13 +++++++++++++
 .../components/SongCover/InteractionBar/index.tsx   |  3 +++
 apps/web/src/components/SongCover/SongCover.tsx     | 13 +++++++++----
 apps/web/src/pages/home/feed/Feed.tsx               |  1 +
 4 files changed, 26 insertions(+), 4 deletions(-)
 create mode 100644 apps/web/src/components/SongCover/InteractionBar/InteractionBar.tsx
 create mode 100644 apps/web/src/components/SongCover/InteractionBar/index.tsx

diff --git a/apps/web/src/components/SongCover/InteractionBar/InteractionBar.tsx b/apps/web/src/components/SongCover/InteractionBar/InteractionBar.tsx
new file mode 100644
index 0000000..016213d
--- /dev/null
+++ b/apps/web/src/components/SongCover/InteractionBar/InteractionBar.tsx
@@ -0,0 +1,13 @@
+import HeartOutline from "../../Icons/HeartOutline";
+
+function InteractionBar() {
+	return (
+		<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]">
+			<div className="h-[40px] w-full flex items-center">
+				<HeartOutline color="#fff" />
+			</div>
+		</div>
+	);
+}
+
+export default InteractionBar;
diff --git a/apps/web/src/components/SongCover/InteractionBar/index.tsx b/apps/web/src/components/SongCover/InteractionBar/index.tsx
new file mode 100644
index 0000000..f6c18a5
--- /dev/null
+++ b/apps/web/src/components/SongCover/InteractionBar/index.tsx
@@ -0,0 +1,3 @@
+import InteractionBar from "./InteractionBar";
+
+export default InteractionBar;
diff --git a/apps/web/src/components/SongCover/SongCover.tsx b/apps/web/src/components/SongCover/SongCover.tsx
index 2c00ced..eb300e2 100644
--- a/apps/web/src/components/SongCover/SongCover.tsx
+++ b/apps/web/src/components/SongCover/SongCover.tsx
@@ -1,11 +1,12 @@
 import { css } from "@emotion/react";
 import styled from "@emotion/styled";
+import InteractionBar from "./InteractionBar";
 
 const Cover = styled.img<{ size?: number }>`
   border-radius: 8px;
   height: 240px;
   width: 240px;
-  margin-bottom: 10px;
+  margin-bottom: -5px;
   ${(props) =>
 		props.size &&
 		css`
@@ -53,14 +54,18 @@ export type SongCoverProps = {
 	title?: string;
 	artist?: string;
 	size?: number;
+	withLikeButton?: boolean;
 };
 
 function SongCover(props: SongCoverProps) {
-	const { title, artist, cover, size } = props;
+	const { title, artist, cover, size, withLikeButton } = props;
 	return (
 		<CoverWrapper>
-			<Cover src={cover} size={size} />
-			<div className="mb-[13px]">
+			<div className={`relative h-[100%] w-[92%]`}>
+				{withLikeButton && <InteractionBar />}
+				<Cover src={cover} size={size} />
+			</div>
+			<div className="mb-[13px] mt-[10px]">
 				<SongTitle className="!text-[var(--color-text-primary)]">
 					{title}
 				</SongTitle>
diff --git a/apps/web/src/pages/home/feed/Feed.tsx b/apps/web/src/pages/home/feed/Feed.tsx
index 49d81bd..33fe07d 100644
--- a/apps/web/src/pages/home/feed/Feed.tsx
+++ b/apps/web/src/pages/home/feed/Feed.tsx
@@ -89,6 +89,7 @@ function Feed() {
 											cover={song.cover}
 											artist={song.artist}
 											title={song.title}
+											withLikeButton
 										/>
 									</Link>
 									<div className="flex">
-- 
2.43.0