feature: 封装Card组件

This commit is contained in:
tangly1024
2022-01-13 14:27:48 +08:00
parent 6e7d47184d
commit c98538e56f
12 changed files with 62 additions and 43 deletions

View File

@@ -19,16 +19,16 @@ const LatestPostsGroup = ({ posts }) => {
const currentPath = useRouter().asPath
const { locale } = useGlobal()
return <section className='mt-8'>
<div className='text-sm pb-4 px-5 flex flex-nowrap justify-between'>
return <>
<div className='text-sm pb-1 px-2 flex flex-nowrap justify-between'>
<div className='font-light text-gray-600 dark:text-gray-200'><FontAwesomeIcon icon={faArchive} className='mr-2' />{locale.COMMON.LATEST_POSTS}</div>
</div>
{posts.map(post => {
const selected = currentPath === `${BLOG.path}/article/${post.slug}`
return (
<Link key={post.id} title={post.title} href={`${BLOG.path}/article/${post.slug}`} passHref>
<a className={ 'my-1 px-2 flex font-light'}>
<div className={ (selected ? 'text-white bg-gray-600 ' : 'text-gray-500 dark:text-gray-400 ') + ' text-xs py-1.5 flex overflow-x-hidden whitespace-nowrap hover:bg-gray-500 px-3 w-full ' +
<a className={ 'my-1 flex font-light'}>
<div className={ (selected ? 'text-white bg-gray-600 ' : 'text-gray-500 dark:text-gray-400 ') + ' text-xs py-1.5 flex overflow-x-hidden whitespace-nowrap hover:bg-gray-500 px-2 duration-200 w-full ' +
'hover:text-white dark:hover:text-white cursor-pointer' }>
<FontAwesomeIcon icon={faFileAlt} className='mr-2'/>
<div className='truncate'>{post.title}</div>
@@ -37,6 +37,6 @@ const LatestPostsGroup = ({ posts }) => {
</Link>
)
})}
</section>
</>
}
export default LatestPostsGroup