挑戰目標: 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

成果

這次挑戰到現在，雖然目前都在用tailwind css排版，但是因為有一直在思考怎麼排版，感覺自己的CSS有一點進步，雖然每天挑戰會因為很多事情而讓自己不斷懷疑自己怎麼會想要來挑戰，但是也想辦法產出15天了，就讓我們繼續堅持下去！