mirror of
https://github.com/d0zingcat/NotionNext.git
synced 2026-06-09 07:26:47 +00:00
feature:
引入react-fontawesome,升级至v5.15; next/link补齐passHref; 替换img为next/Image,优化图片
This commit is contained in:
@@ -1,25 +1,27 @@
|
||||
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'
|
||||
|
||||
const CategoryList = ({ currentCategory, categories }) => {
|
||||
if (!categories) {
|
||||
return <></>
|
||||
}
|
||||
return <ul className='flex py-1 space-x-3'>
|
||||
<li className='w-16 py-2 dark:text-gray-200'><i className='fa fa-th-list mr-2'/>分类:</li>
|
||||
<li className='w-16 py-2 dark:text-gray-200'><FontAwesomeIcon className='mr-2' icon={faThList} />分类:</li>
|
||||
{Object.keys(categories).map(category => {
|
||||
const selected = category === currentCategory
|
||||
return (
|
||||
<Link key={category} href={`/category/${category}`}>
|
||||
<Link key={category} href={`/category/${category}`} passHref>
|
||||
<li
|
||||
className={`cursor-pointer border rounded-xl duration-200 mr-1 my-1 px-2 py-1 font-medium font-light text-sm whitespace-nowrap dark:text-gray-300
|
||||
${selected
|
||||
? 'text-white bg-black dark:hover:bg-gray-900 dark:bg-black dark:border-gray-800'
|
||||
: 'bg-gray-100 text-gray-600 hover:bg-gray-300 dark:bg-gray-600 dark:border-gray-600'
|
||||
}`}
|
||||
? 'text-white bg-black dark:hover:bg-gray-900 dark:bg-black dark:border-gray-800'
|
||||
: 'bg-gray-100 text-gray-600 hover:bg-gray-300 dark:bg-gray-600 dark:border-gray-600'
|
||||
}`}
|
||||
>
|
||||
<a>
|
||||
<i className='fa fa-folder-open-o mr-1'/>
|
||||
<FontAwesomeIcon icon={selected ? faFolderOpen : faFolder} className='mr-1' />
|
||||
{`${category} `}
|
||||
</a>
|
||||
</li>
|
||||
|
||||
Reference in New Issue
Block a user