patch of feat(web): add InteractionBar component and integrate with SongCover for 'like' functionality · round #1 · pull #11 · rocksky.app/rocksky

+13

apps/web/src/components/SongCover/InteractionBar/InteractionBar.tsx

···

       1
       1
       +
       import HeartOutline from "../../Icons/HeartOutline";

     

       2
       2
       +
       

     

       3
       3
       +
       function InteractionBar() {

     

       4
       4
       +
       	return (

     

       5
       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
       6
       +
       			<div className="h-[40px] w-full flex items-center">

     

       7
       7
       +
       				<HeartOutline color="#fff" />

     

       8
       8
       +
       			</div>

     

       9
       9
       +
       		</div>

     

       10
       10
       +
       	);

     

       11
       11
       +
       }

     

       12
       12
       +
       

     

       13
       13
       +
       export default InteractionBar;

+3

apps/web/src/components/SongCover/InteractionBar/index.tsx

···

       1
       1
       +
       import InteractionBar from "./InteractionBar";

     

       2
       2
       +
       

     

       3
       3
       +
       export default InteractionBar;

+9 -4

apps/web/src/components/SongCover/SongCover.tsx

···

       1
       1
        
       import { css } from "@emotion/react";

     

       2
       2
        
       import styled from "@emotion/styled";

     

       3
       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
       8
       -
         margin-bottom: 10px;

     

       9
       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
       57
       +
       	withLikeButton?: boolean;

     

       56
       58
        
       };

     

       57
       59
        
       

     

       58
       60
        
       function SongCover(props: SongCoverProps) {

     

       59
       59
       -
       	const { title, artist, cover, size } = props;

     

       61
       61
       +
       	const { title, artist, cover, size, withLikeButton } = props;

     

       60
       62
        
       	return (

     

       61
       63
        
       		<CoverWrapper>

     

       62
       62
       -
       			<Cover src={cover} size={size} />

     

       63
       63
       -
       			<div className="mb-[13px]">

     

       64
       64
       +
       			<div className={`relative h-[100%] w-[92%]`}>

     

       65
       65
       +
       				{withLikeButton && <InteractionBar />}

     

       66
       66
       +
       				<Cover src={cover} size={size} />

     

       67
       67
       +
       			</div>

     

       68
       68
       +
       			<div className="mb-[13px] mt-[10px]">

     

       64
       69
        
       				<SongTitle className="!text-[var(--color-text-primary)]">

     

       65
       70
        
       					{title}

     

       66
       71
        
       				</SongTitle>

+1

apps/web/src/pages/home/feed/Feed.tsx

···

       89
       89
        
       											cover={song.cover}

     

       90
       90
        
       											artist={song.artist}

     

       91
       91
        
       											title={song.title}

     

       92
       92
       +
       											withLikeButton

     

       92
       93
        
       										/>

     

       93
       94
        
       									</Link>

     

       94
       95
        
       									<div className="flex">