[Day 12]我也好想成为时间管理大师(前端篇)

挑战目标: MockNative Camp

挑战还没过半就已经觉得自己债越积越深了...
今天要来挑战实作Footer(原本

我们可以从开发者工具看到footer分左右两边

先从左边开始制作，但因时间不够，今天只有做到使用fontawesome，将social media icon引入而已。
安装fontawesome

npm i --save @fortawesome/fontawesome-svg-core
npm install --save @fortawesome/free-solid-svg-icons
npm install --save @fortawesome/react-fontawesome

Footer.js

import Image from "next/image";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
import { faTwitter, faFacebook, faYoutube, faInstagram } from "@fortawesome/free-brands-svg-icons"
function Footer() {
    return (
        <div className="bg-nativeCamp-nav-text h-96">
            {/* Left */}
            <div className="flex flex-col items-center justify-center">
                <div className="h-[31px] w-[160px] relative flex ">
                    <Image
                        src="https://nativecamp.net/user/images/common/logo_s-zh-tw.png?v=2.1"
                        layout="fill"
                        objectFit="contain"
                    />
                </div>
                <div>
                    <ul className="flex flex-row space-x-4">
                        <li>
                            <FontAwesomeIcon icon={faTwitter} className="bg-white rounded-full fill-current text-blue-500" />
                        </li>
                        <li> <FontAwesomeIcon icon={faFacebook} className="bg-white rounded-full fill-current text-blue-500" /></li>
                        <li> <FontAwesomeIcon icon={faYoutube} className="bg-white rounded-full fill-current text-red-500" /></li>
                        <li><FontAwesomeIcon icon={faInstagram} className="bg-white rounded-full fill-current text-red-500" /></li>
                    </ul>
                </div>
                <div className="flex flex-col">
                    <span className="text-white text-sm">Copyright © 2021 线上英语会话</span>
                    <span className="text-white text-sm">NativeCamp. All Rights Reserved.</span>
                </div>
            </div>
            {/* Right */}
            <div> </div>
        </div>
    )
}

export default Footer

可以看到我们的版型还有满多地方要调整的，明天再来继续奋战