引入react-fontawesome,升级至v5.15;
next/link补齐passHref;
替换img为next/Image,优化图片
This commit is contained in:
tangly1024
2021-12-03 15:01:11 +08:00
parent 88d1e0742a
commit 49ab1eb124
32 changed files with 243 additions and 202 deletions

View File

@@ -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>