完整效果

書本在提及這裡的時候，給了很多footer component的效果，但因為css彼此之間的衝突與調整問題，今天先以avator以及名字為主，後續icon以及音樂可以慢慢加上，如果可以的話我也會再提及它。

實作提醒

這裡最麻煩的其實就是css了，後續icon與音樂的css，甚至我到目前都還沒有調整好，值得注意的是，在這裡加上footer component時，如果使用position:absolute，並且註明bottom:0的話，是沒辦法讓兩個影片都有footer的，因為會將bottom識別成視窗的bottom而非實際的bottom，所以如果要使用它，可以再包上一層temp的div，使用relative的position，來完成對父component的辨識。

完整code

//VideoFooter.js
import React from 'react'
import './VideoFooter.css'
import { Button, Avatar } from '@material-ui/core'

const VideoFooter = ({ channel, avatarSrc, song, likes, shares }) => {
    return (
        <div className='videoFooter'>
            <div className='videoFooter_text'>
                <Avatar src={avatarSrc} />
                <h3>
                    {channel} . <Button>Follow</Button>
                </h3>
            </div>
        </div>
    )
}

export default VideoFooter;

// VideoFooter.css
.videoFooter_text {
    position: absolute;
    color: white;
    display: flex;
    bottom: 0;
    margin-left: 10px;
    justify-content: space-between;
    align-items: center;
}

.videoFooter_text>h3 {
    margin-left: 10px;
    padding: 0 10px;
    /* padding-bottom: 20px; */
}

.videoFooter_text>h3>button {
    color: white;
    font-weight: 900;
    text-transform: inherit;
}

//記得在VideoCard.js中做更改
const VideoCard = ({ url, channel, avatarSrc, song, likes, shares }) => { ...... }

//以及在App.js中做更改，為每一個VideoCard傳入parameter
<VideoCard
          url="/video.mp4"
          channel="Feather"
          avatarSrc="/avator.jpg"
          song="I am a windows PC"
          likes={950}
          shares={200}
        />