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

Sticky样式

Browse Source
This commit is contained in:
tangly1024
2022-01-04 12:29:00 +08:00
parent 32935320ab
commit 0860c1633b
3 changed files with 4 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
components/CategoryList.js
View File

@@ -1,7 +1,7 @@
import Link from 'next/link'
import React from 'react'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faFolder, faFolderOpen, faThList } from '@fortawesome/free-solid-svg-icons'
import { faFolder, faFolderOpen } from '@fortawesome/free-solid-svg-icons'
import { useGlobal } from '@/lib/global'
const CategoryList = ({ currentCategory, categories }) => {
@@ -11,7 +11,7 @@ const CategoryList = ({ currentCategory, categories }) => {
const { locale } = useGlobal()
return <ul className='flex py-1 space-x-3'>
<li className='w-16 py-2 dark:text-gray-200 whitespace-nowrap'><FontAwesomeIcon className='mr-2' icon={faThList} />{locale.COMMON.CATEGORY}</li>
<li className='w-16 py-2 dark:text-gray-200 whitespace-nowrap'>{locale.COMMON.CATEGORY}</li>
{Object.keys(categories).map(category => {
const selected = category === currentCategory
return (

2
components/StickyBar.js
View File

@@ -36,7 +36,7 @@ const StickyBar = ({ children }) => {
return (
<div id='sticky-bar' className='sticky flex-grow justify-center top-14 md:top-0 duration-500 z-10 pb-16'>
<div className='glassmorphism dark:border-gray-600 px-5 absolute rounded-none md:rounded-xl shadow-xl border w-full hidden-scroll'>
<div className='glassmorphism dark:border-gray-600 px-5 absolute shadow-xl border w-full hidden-scroll'>
<div id='tag-container' className="md:pl-3 overflow-x-auto">
{ children }
</div>

5
components/TagList.js
View File

@@ -1,8 +1,5 @@
import React from 'react'
import TagItem from '@/components/TagItem'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faTags } from '@fortawesome/free-solid-svg-icons'
/**
* 横向的标签列表
* @param tags
@@ -15,7 +12,7 @@ const TagList = ({ tags, currentTag }) => {
return <></>
}
return <ul className='flex py-1 space-x-3'>
<li className='w-20 py-2 dark:text-gray-200 whitespace-nowrap'><FontAwesomeIcon icon={faTags} className='mr-2'/>标签:</li>
<li className='w-20 py-2 dark:text-gray-200 whitespace-nowrap'>标签:</li>
{tags.map(tag => {
const selected = tag.name === currentTag
return <TagItem key={tag.name} tag={tag} selected={selected}/>