changed tag color and background color

Author: imranpollob

Diff for: components/Tag.js

@@ -1,18 +1,19 @@
 import Link from 'next/link'
 import kebabCase from '@/lib/utils/kebabCase'
 
-const Tag = ({ text, selected }) => {
+const Tag = ({ text, selected, count }) => {
   return (
-    <Link href={`/tags/${kebabCase(text)}`}>
+    <Link href={text === 'all' ? '/' : `/tags/${kebabCase(text)}`}>
       <a
         className={
-          'mr-3 text-sm font-medium text-blue-500 uppercase hover:text-blue-600 dark:hover:text-blue-400 ' +
-          (selected
-            ? 'p-1 border-2 border-solid border-blue-500 hover:border-blue-600 dark:hover:border-blue-400'
-            : '')
+          'py-1 px-2 rounded-full mr-3 text-sm font-medium uppercase text-gray-900 dark:text-gray-300 hover:text-white dark:hover:text-gray-900 hover:bg-gray-900 dark:hover:bg-gray-300 ' +
+          (selected ? 'bg-gray-900 dark:bg-gray-300 text-white dark:text-gray-900' : '')
         }
       >
         {text.split(' ').join('-')}
+        {selected && count && (
+          <span className="ml-2 px-1 ring-1 rounded h-24 w-24 bg-blue-500 text-white">{count}</span>
+        )}
       </a>
     </Link>
   )

Diff for: components/TagList.js

@@ -3,25 +3,29 @@ import Tag from '@/components/Tag'
 import kebabCase from '@/lib/utils/kebabCase'
 
 const TagList = ({ tags, title }) => {
-  const sortedTags = tags && Object.keys(tags).sort((a, b) => tags[b] - tags[a])
+  let status = 'No tags found.'
+  let tagList = null
+
+  if (tags) {
+    status = null
+    let sortedTags = Object.keys(tags).sort((a, b) => tags[b] - tags[a])
+    tagList = sortedTags.map((t) => {
+      return (
+        <div key={t} className="mt-2 mb-2 mr-1">
+          <Tag
+            text={t}
+            selected={title && t.toLowerCase() === title.toLowerCase()}
+            count={tags[t]}
+          />
+        </div>
+      )
+    })
+  }
 
   return (
-    <div className="flex flex-wrap max-w-lg">
-      {tags && Object.keys(tags).length === 0 && 'No tags found.'}
-      {tags &&
-        sortedTags.map((t) => {
-          return (
-            <div key={t} className="mt-2 mb-2 mr-5">
-              <Tag text={t} selected={title && t.toLowerCase() === title.toLowerCase()} />
-              <Link
-                href={`/tags/${kebabCase(t)}`}
-                className="-ml-2 text-sm font-semibold text-gray-600 uppercase dark:text-gray-300"
-              >
-                {` (${tags[t]})`}
-              </Link>
-            </div>
-          )
-        })}
+    <div className="flex flex-wrap">
+      {status && <div className="text-center">{status}</div>}
+      {tagList}
     </div>
   )
 }

Diff for: data/blog/codesignal-add.md

@@ -2,12 +2,12 @@
 date: ! '2021/07/01 '
 title: Codesignal - add
 tags:
-- codesignal
+  - codesignal
 summary: ''
 link: https://app.codesignal.com/arcade/intro/level-1/jwr339Kq6e3LQTsfa
 draft: false
-
 ---
+
 ```python
 def add(param1, param2):
     return param1 + param2

Diff for: layouts/ListLayout.js

@@ -30,7 +30,7 @@ export default function ListLayout({ posts, tags, title, initialDisplayPosts = [
             </div>
           </div>
 
-          <TagList tags={tags} title={title} />
+          <TagList tags={tags} title={title} total={posts.length} />
 
           <div className="relative max-w-lg">
             <input
@@ -67,7 +67,10 @@ export default function ListLayout({ posts, tags, title, initialDisplayPosts = [
                   <div className="space-y-3 xl:col-span-3">
                     <div>
                       <h3 className="text-2xl font-bold leading-8 tracking-tight">
-                        <Link href={`/${slug}`} className="text-gray-900 dark:text-gray-100">
+                        <Link
+                          href={`/${slug}`}
+                          className="text-blue-500 hover:text-blue-600 dark:hover:text-blue-400"
+                        >
                           {title}
                         </Link>
                       </h3>

Diff for: pages/index.js

@@ -19,6 +19,8 @@ export async function getStaticProps() {
 }
 
 export default function Blog({ posts, tags, initialDisplayPosts, pagination }) {
+  tags['all'] = posts.length
+
   return (
     <>
       <PageSeo
@@ -31,6 +33,7 @@ export default function Blog({ posts, tags, initialDisplayPosts, pagination }) {
         tags={tags}
         initialDisplayPosts={initialDisplayPosts}
         pagination={pagination}
+        title={'all'}
       />
     </>
   )

Diff for: pages/tags/[tag].js

@@ -35,16 +35,17 @@ export async function getStaticProps({ params }) {
   fs.mkdirSync(rssPath, { recursive: true })
   fs.writeFileSync(path.join(rssPath, 'index.xml'), rss)
 
-  return { props: { posts: filteredPosts, tags, tag: params.tag } }
+  return { props: { posts: filteredPosts, tags, tag: params.tag, total: allPosts.length } }
 }
 
 function capitalize(s) {
   return s[0].toUpperCase() + s.slice(1).toLowerCase()
 }
 
-export default function Tag({ posts, tags, tag }) {
+export default function Tag({ posts, tags, tag, total }) {
   // Capitalize first letter and convert space to dash
   const title = tag[0].toUpperCase() + tag.split(' ').join('-').slice(1)
+  tags['all'] = total
 
   return (
     <>
@@ -53,7 +54,7 @@ export default function Tag({ posts, tags, tag }) {
         description={`${siteMetadata.description}`}
         url={`${siteMetadata.siteUrl}/tags/${tag}`}
       />
-      <ListLayout posts={posts} tags={tags} title={title} />
+      <ListLayout posts={posts} tags={tags} title={title} total={total} />
     </>
   )
 }