feature:

标签加入颜色，修复编译问题

components/TagItem.js

@@ -1,12 +1,24 @@
 import Link from 'next/link'
+import React from 'react'
 
-const TagItem = ({ tag, count }) => (
-  <Link href={`/tag/${encodeURIComponent(tag)}`}>
-    <div className="cursor-pointer hover:shadow hover:border-gray-600 rounded-md dark:border-gray-500 border hover:scale-105 hover:bg-gray-500 bg-gray-100 hover:text-white duration-200 mr-1 p-2 leading-none text-sm
-      dark:bg-gray-500 dark:text-gray-100 dark:hover:bg-black">
-     <span className='whitespace-nowrap'>  <i className='fa fa-tag mr-1 '/> {tag}{count && `(${count})`}</span>
-    </div>
+const TagItem = ({ tag, selected }) => {
+  return (
+  <Link href={selected ? '/' : `/tag/${encodeURIComponent(tag.name)}`}>
+    <li
+      className={`notion-${tag.color}_background list-none cursor-pointer hover:bg-gray-300 rounded-xl 
+      duration-200 mr-1 my-1 px-2 py-1 font-medium font-light text-sm whitespace-nowrap
+                  dark:hover:bg-gray-800 dark:hover:text-white hover:text-black
+                 ${selected
+         ? ' text-white dark:text-white bg-black dark:hover:bg-gray-900 dark:bg-black'
+         : ' text-gray-600'}`}
+    >
+      <a>
+        <i className='fa fa-tag mr-1'/>
+        {`${tag.name} `} {tag.count ? `(${tag.count})` : ''}
+      </a>
+    </li>
   </Link>
-)
+  )
+}
 
 export default TagItem