[Day 15]呐呐，还有一半别想跑(前端篇)

挑战目标: MockNative Camp

今天继续来制作我们的Footer，
目标

前两天我们已经将这些显示文字都写入到config中
next.config.js

 footer: [
                { "name": "NativeCamp.", "list": ["首页", "新用户注册", "登入", "重新加入", "FOR TUTORS"] },
                { "name": "指南", "list": ["致初次使用者", "使用方法", "关於上课不限堂数", "关於费用", "支援的浏览器", " 关於英语会话 App"] },
                { "name": "学习", "list": ["浏览教材", "课程及教材诊断", "线上商店 (教材购买)", "Callan Method(凯伦学习法)", "TOEIC®L&R TEST对策", "口说测验", "口语训练"] },
                { "name": "搜寻讲师・预约", "list": ["讲师一览", " 排名", "评论", "关於母语人士", "关於卡通人物讲师"] },
                { "name": "其他", "list": ["问卷结果 / 会员的心声", "上课环境测试", "FAQ (联络我们)", "网站导览"] },
                { "name": "公司资讯", "list": ["运营公司", "使用条款", "特别指定商业交易法", "关於个人资讯处理", "徵才讯息", "我们的展望"] },
            ]

然後在Footer中进行排版後
Footer.js

import Image from "next/image";
import getConfig from 'next/config'

function Footer() {
    const { publicRuntimeConfig } = getConfig();
    return (
        <div className="bg-nativeCamp-nav-text h-96 flex flex-row">
            {/* Left */}
            <div className="flex flex-col items-center justify-center space-y-4 p-32">
                <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="cover"
                    />
                </div>
                <div>
                    <ul className="flex flex-row space-x-4">
                        <li className="bg-white rounded-full h-8 w-8 justify-center flex items-center hover:bg-gray-300">
                            <Image
                                src="/icon/twitter-color.svg"
                                width={20}
                                height={20}
                            />
                        </li>
                        <li className="bg-white rounded-full h-8 w-8 justify-center flex items-center hover:bg-gray-300">
                            <Image
                                src="/icon/facebook-color.svg"
                                width={20}
                                height={20}
                            /></li>
                        <li className="bg-white rounded-full h-8 w-8 justify-center flex items-center hover:bg-gray-300">
                            <Image
                                src="/icon/youtube-color.svg"
                                width={20}
                                height={20}
                            /></li>
                        <li className="bg-white rounded-full h-8 w-8 justify-center flex items-center hover:bg-gray-300">
                            <Image
                                src="/icon/black-instagram.svg"
                                width={20}
                                height={20}
                            /></li>
                    </ul>
                </div>
                <div className="flex flex-col">
                    <span className="text-white text-xs">Copyright © 2021 线上英语会话</span>
                    <span className="text-white text-xs">NativeCamp. All Rights Reserved.</span>
                </div>
            </div>
            {/* Right */}
            <div className="flex flex-col items-start justify-center space-y-2">
                {publicRuntimeConfig.footer?.map(({ name, list }) =>
                (
                    <div key={name} >
                        <span className="text-white text-sm">・ {name}</span>
                        <div className="flex flex-row items-center space-x-8 pt-1 pl-5">
                            {list.map((name) => (
                                <div className="text-white text-xs">
                                    {name}
                                </div>
                            ))}
                        </div>
                    </div>
                )
                )}
            </div>
        </div>
    )
}

export default Footer

成果