[Day 11]在你顺利的时候来一拳才是标配(前端篇)

挑战目标: MockNative Camp

今天要来实作Nav Detail的部分，

昨天将相关的List放到了config中，也可以成功的hover该tab後出现下面的Detail，

透过Tailwinds CSS来设计版型，但因为时间的关系，没有办法刻的一模一样，我希望可以在30天内至少把首页给Mock完，所以先做到这样，有时间的话再来回头调整版型，这是今天实作的结果。
NavDetail.js

import getConfig from 'next/config'

function NavDetail({ tab }) {

    const { publicRuntimeConfig } = getConfig();

    return (
        <div className="flex flex-row justify-between items-center w-4/6 border-r border-b border-l ml-60">
            {publicRuntimeConfig.navDetails[tab]?.map(({ name, list }) =>
            (
                <div className="flex flex-col items-center mr-8 ml-8">
                    <div className="border-b  w-full m-2 border-nativeCamp-nav-textHov pb-2">
                        <div className="border-l-4 border-nativeCamp-nav-textHov text-nativeCamp-nav-text">&ensp;{name}</div>
                    </div>
                    <div className="items-center">
                        {list?.map(data => (
                            <div className="text-nativeCamp-nav-text flex items-center flex-row">
                                <div class="w-2  overflow-hidden inline-block m-2">
                                    <div class="h-6  bg-nativeCamp-nav-textHov rotate-45 transform origin-top-left"></div>
                                </div>
                                <span className="pb-3 text-sm">{data}</span>
                            </div>
                        ))}
                    </div>
                </div>
            )
            )}
        </div>
    )
}

export default NavDetail

明天继续往下作，会先做Footer。