feature: 移动端显示标签

This commit is contained in:
tangly1024
2021-12-31 15:04:46 +08:00
parent 1bd41bd217
commit b0be0643cf
2 changed files with 3 additions and 3 deletions

View File

@@ -32,7 +32,7 @@ const BlogPostCard = ({ post, tags }) => {
<a className='font-light hover:underline cursor-pointer text-sm leading-4 mr-3'>{post.date.start_date}</a>
</Link>
</div>
<div className='md:flex-nowrap flex-wrap md:justify-start hidden md:inline-block'>
<div className='md:flex-nowrap flex-wrap md:justify-start inline-block'>
<div> {post.tagItems.map(tag => (<TagItemMini key={tag.name} tag={tag} />))}</div>
</div>
</div>

View File

@@ -8,8 +8,8 @@ const TagItemMini = ({ tag, selected = false }) => {
mr-2 py-0.5 px-1 text-xs whitespace-nowrap dark:hover:text-white
${selected
? 'text-white dark:text-gray-300 bg-black dark:bg-black dark:hover:bg-gray-900'
: `text-gray-600 hover:shadow-xl dark:border-gray-400 notion-${tag.color}_background dark:bg-gray-600 dark:text-gray-300 `}` }>
<div className='font-light'>{selected && <FontAwesomeIcon icon={faTag} className='mr-1'/>} {tag.name + (tag.count ? `(${tag.count})` : '')} </div>
: `text-gray-600 hover:shadow-xl dark:border-gray-400 notion-${tag.color}_background dark:bg-gray-900`}` }>
<div className='font-light dark:text-gray-400'>{selected && <FontAwesomeIcon icon={faTag} className='mr-1'/>} {tag.name + (tag.count ? `(${tag.count})` : '')} </div>
</a>
</Link>
}