d0zingcat/NotionNext
1
0
Fork 0
mirror of https://github.com/d0zingcat/NotionNext.git synced 2026-05-14 07:26:52 +00:00
Code Issues Packages Projects Releases Wiki Activity

feature: 侧边目录颜色、动画

Browse Source
This commit is contained in:
tangly1024
2022-01-07 10:55:06 +08:00
parent b16b3dee59
commit 309e42f4a1
4 changed files with 6 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
components/BlogPostListPage.js
View File

@@ -13,7 +13,7 @@ import BlogPostListEmpty from '@/components/BlogPostListEmpty'
* @returns {JSX.Element}
* @constructor
*/
const BlogPostListPage = ({ page = 1, posts = [], tags }) => {
const BlogPostListPage = ({ page = 1, posts = [] }) => {
let filteredBlogPosts = posts
// 处理查询过滤 支持标签、关键词过滤

2
components/Progress.js
View File

@@ -25,7 +25,7 @@ const Progress = ({ targetRef, showPercent = true }) => {
}, [percent])
return (<div className='h-4 w-full shadow-2xl bg-gray-400'>
<div className='h-4 bg-gray-600 duration-200' style={{ width: `${percent}%` }}>
<div className='h-4 bg-red-400 duration-200' style={{ width: `${percent}%` }}>
{showPercent && <div className='text-right text-white text-xs'>{percent}%</div>}
</div>
</div>)

4
components/Tabs.js
View File

@@ -30,10 +30,10 @@ const Tabs = ({ children }) => {
return (
<section >
{<div className='shadow hidden lg:block mb-5 py-4 px-5 bg-white dark:bg-gray-800 hover:shadow-xl duration-200'>
{<div className='shadow hidden lg:block mb-5 py-4 px-5 bg-white dark:bg-gray-800 hover:shadow-xl duration-200'>
<ul className='flex justify-center space-x-5 pb-4 dark:text-gray-400 text-gray-600'>
{children.map((item, index) => {
return <li key={index} className={currentTab === index ? 'font-black border-b' : 'font-extralight cursor-pointer'} onClick={() => { tabClickHandle(index) }}>
return <li key={index} className={currentTab === index ? 'font-black border-b-2 border-red-400 text-red-400 animate__animated animate__jello ' : 'font-extralight cursor-pointer'} onClick={() => { tabClickHandle(index) }}>
{item?.key}
</li>
})}

4
components/Toc.js
View File

@@ -64,14 +64,14 @@ const Toc = ({ toc, targetRef }) => {
key={id}
href={`#${id}`}
className={`notion-table-of-contents-item duration-300 transform font-light
notion-table-of-contents-item-indent-level-${tocItem.indentLevel}
${activeSection === id && ' font-bold text-gray-600 dark:text-gray-300'}`}
notion-table-of-contents-item-indent-level-${tocItem.indentLevel} `}
>
<span
style={{
display: 'inline-block',
marginLeft: tocItem.indentLevel * 16
}}
className={`${activeSection === id && ' font-bold text-red-400 animate__animated animate__jello'}`}
>
{tocItem.text}
</span>