feature: 样式调整,加入Tabs组件

This commit is contained in:
tangly1024
2022-01-01 22:22:52 +08:00
parent f6168e8dc1
commit 8e8b6c1f73
18 changed files with 167 additions and 80 deletions

View File

@@ -5,6 +5,7 @@ import Toc from '@/components/Toc'
import { useGlobal } from '@/lib/global'
import React from 'react'
import Analytics from './Analytics'
import Tabs from '@/components/Tabs'
/**
* 侧边平铺
@@ -24,35 +25,31 @@ const SideAreaLeft = ({ title, tags, currentTag, post, posts, categories, curren
const postCount = posts?.length || 0
return <>
<section className={(!post ? 'sticky top-8 ' : ' ') + ' w-60'}>
<section className='shadow hidden lg:block mb-5 bg-white dark:bg-gray-800 hover:shadow-xl duration-200 py-6'>
<InfoCard postCount={postCount} />
</section>
<section className='sticky top-16 w-60'>
{/* 菜单 */}
<section className='shadow hidden lg:block mb-5 py-4 bg-white dark:bg-gray-800 hover:shadow-xl duration-200'>
<section className='shadow hidden lg:block mb-5 py-4 bg-white dark:bg-gray-800 hover:shadow-xl duration-200'>
<MenuButtonGroup allowCollapse={true} />
<div className='px-5 pt-2'>
<SearchInput currentTag={currentTag} currentSearch={currentSearch} />
</div>
</section>
{/* 统计 */}
<section className='shadow hidden lg:block mb-5 bg-white dark:bg-gray-800 hover:shadow-xl duration-200 py-4'>
<Analytics postCount={postCount}/>
</section>
<Tabs>
{showToc && (
<div key={locale.COMMON.TABLE_OF_CONTENTS} className='dark:text-gray-400 text-gray-600 bg-white dark:bg-gray-800 duration-200'>
<Toc toc={post.toc} targetRef={targetRef} />
</div>
)}
<div key={locale.NAV.ABOUT} className='mb-5 bg-white dark:bg-gray-800 duration-200 py-6'>
<InfoCard postCount={postCount} />
<Analytics postCount={postCount}/>
</div>
</Tabs>
</section>
{showToc && (
<section className='shadow sticky top-8 pb-20 bg-white dark:bg-gray-800 hover:shadow-xl duration-200'>
<div className='border-b text-center text-2xl bg-white text-black dark:border-gray-700 dark:bg-gray-700 dark:text-white py-6 px-6'>
{locale.COMMON.TABLE_OF_CONTENTS}
</div>
<Toc toc={post.toc} targetRef={targetRef} />
</section>
)}
</>
}
export default SideAreaLeft