feat(ui): add blog statistics

src/app/about/statistics/components/writing-dashboard/cards/most-used-category.tsx

@@ -0,0 +1,72 @@
+import {
+  Icon as PhosphorIcon,
+  FolderOpen,
+  TextAlignLeft,
+  CompassTool,
+  NoteBlank,
+  ListBullets
+} from '@/shared/wrappers/phosphor-icons'
+import { allPosts } from 'contentlayer/generated'
+
+type RowProps = {
+  Icon: PhosphorIcon
+  title: string
+  quantity: number
+}
+const Row = ({ Icon, quantity, title }: RowProps) => (
+  <div className="flex w-full items-center justify-between gap-3">
+    <div className="flex items-center gap-3">
+      <Icon />
+      <span>{title}</span>
+    </div>
+    <span>{quantity}</span>
+  </div>
+)
+
+function getQuantity(category: string) {
+  return allPosts.filter(post => post.category === category).length
+}
+
+export async function MostUsedCategories() {
+  const categories = [
+    {
+      title: 'How To',
+      icon: CompassTool,
+      number: getQuantity('How To')
+    },
+    {
+      title: 'Article',
+      icon: TextAlignLeft,
+      number: getQuantity('Article')
+    },
+    {
+      title: 'List',
+      icon: ListBullets,
+      number: getQuantity('List')
+    },
+    {
+      title: 'Notes',
+      icon: NoteBlank,
+      number: getQuantity('Notes')
+    }
+  ].sort((a, b) => b.number - a.number)
+
+  return (
+    <div className="flex h-full w-full flex-col justify-center gap-3 rounded-3xl bg-neutral-200 p-4 leading-none dark:bg-neutral-950 md:p-7">
+      <span className="inline-flex items-center gap-2 text-neutral-600">
+        <span>Most Used Categories</span>
+        <FolderOpen weight="duotone" />
+      </span>
+      <div className="flex h-full flex-col justify-around gap-2 text-2xl">
+        {categories.map(category => (
+          <Row
+            key={category.title}
+            Icon={category.icon}
+            title={category.title}
+            quantity={category.number}
+          />
+        ))}
+      </div>
+    </div>
+  )
+}

src/app/about/statistics/components/writing-dashboard/cards/posts.tsx

@@ -0,0 +1,14 @@
+import { allPosts } from 'contentlayer/generated'
+import { Article } from '@/shared/wrappers/phosphor-icons'
+
+export async function Posts() {
+  return (
+    <div className="flex h-full w-full flex-col justify-center gap-3 rounded-3xl bg-neutral-200 p-4 leading-none dark:bg-neutral-950 md:p-7">
+      <span className="inline-flex items-center gap-2 text-neutral-600">
+        <span>Posts</span>
+        <Article weight="duotone" />
+      </span>
+      <div className="flex h-full items-center text-2xl">{allPosts.length}</div>
+    </div>
+  )
+}

src/app/about/statistics/components/writing-dashboard/cards/tag-cloud.tsx

@@ -0,0 +1,92 @@
+'use client'
+
+import ReactWordcloud, { Word, Options, defaultOptions } from 'react-wordcloud'
+import { Tag } from '@/shared/wrappers/phosphor-icons'
+import { getTagsAndNumberOfPosts } from '@/shared/lib/tags'
+
+export async function TagCloud() {
+  // const words: Word[] = [
+  //   {
+  //     text: 'mateus',
+  //     value: 10
+  //   },
+  //   {
+  //     text: 'rust',
+  //     value: 10
+  //   },
+  //   {
+  //     text: 'deno',
+  //     value: 6
+  //   },
+  //   {
+  //     text: 'bun',
+  //     value: 6
+  //   },
+  //   {
+  //     text: 'node',
+  //     value: 6
+  //   },
+  //   {
+  //     text: 'next.js',
+  //     value: 6
+  //   },
+  //   {
+  //     text: 'felipe',
+  //     value: 4
+  //   },
+  //   {
+  //     text: 'svelte',
+  //     value: 4
+  //   },
+  //   {
+  //     text: 'vue',
+  //     value: 4
+  //   },
+  //   {
+  //     text: 'nest.js',
+  //     value: 2
+  //   },
+  //   {
+  //     text: 'python',
+  //     value: 2
+  //   }
+  // ]
+
+  const words: Word[] = getTagsAndNumberOfPosts().map(value => ({
+    text: value.tag,
+    value: value.numberOfPosts
+  }))
+
+  return (
+    <div className="flex h-min w-full flex-col justify-center gap-3 rounded-3xl bg-neutral-200 p-4 leading-none dark:bg-neutral-950 md:p-7">
+      <span className="inline-flex items-center gap-2 text-neutral-600">
+        <span>Most Used Tags</span>
+        <Tag weight="duotone" />
+      </span>
+      <div className="flex items-center text-2xl">
+        <div className="dark:hidden">
+          <ReactWordcloud
+            words={words}
+            options={{
+              rotationAngles: [0, 0],
+              rotations: 0,
+              padding: 5,
+              colors: ['#333']
+            }}
+          />
+        </div>
+        <div className="hidden h-full w-full dark:block">
+          <ReactWordcloud
+            words={words}
+            options={{
+              rotationAngles: [0, 0],
+              rotations: 0,
+              padding: 5,
+              colors: ['#666']
+            }}
+          />
+        </div>
+      </div>
+    </div>
+  )
+}

src/app/about/statistics/components/writing-dashboard/cards/tils.tsx

@@ -0,0 +1,14 @@
+import { allTILs } from 'contentlayer/generated'
+import { Notebook } from '@/shared/wrappers/phosphor-icons'
+
+export async function TILs() {
+  return (
+    <div className="flex h-full w-full flex-col justify-center gap-3 rounded-3xl bg-neutral-200 p-4 leading-none dark:bg-neutral-950 md:p-7">
+      <span className="inline-flex items-center gap-2 text-neutral-600">
+        <span>TILs</span>
+        <Notebook weight="duotone" />
+      </span>
+      <div className="flex h-full items-center text-2xl">{allTILs.length}</div>
+    </div>
+  )
+}

src/app/about/statistics/components/writing-dashboard/index.tsx

@@ -0,0 +1,21 @@
+import { MostUsedCategories } from './cards/most-used-category'
+import { Posts } from './cards/posts'
+import { TagCloud } from './cards/tag-cloud'
+import { TILs } from './cards/tils'
+
+export function WritingDashboard() {
+  return (
+    <div className="grid grid-cols-1 gap-3 md:grid-cols-4">
+      <Posts />
+      <TILs />
+
+      <div className="col-span-2 row-span-3">
+        <TagCloud />
+      </div>
+
+      <div className="col-span-2 row-span-2">
+        <MostUsedCategories />
+      </div>
+    </div>
+  )
+}

src/app/about/statistics/page.tsx

@@ -1,9 +1,14 @@
 import { Metadata } from 'next'
-import { GithubLogo, SpotifyLogo } from '@/shared/wrappers/phosphor-icons'
+import {
+  GithubLogo,
+  PencilLine,
+  SpotifyLogo
+} from '@/shared/wrappers/phosphor-icons'
 import { Title } from '@/shared/components/title'
 
 import { GithubDashboard } from './components/github-dashboard'
 import { SpotifyDashboard } from './components/spotify-dashboard'
+import { WritingDashboard } from './components/writing-dashboard'
 import { RenderDate } from './components/date'
 
 export const metadata: Metadata = {
@@ -21,6 +26,13 @@ export default function Page() {
   return (
     <div className="content-container m-auto space-y-16">
       <Title text="Statistics" description={<RenderDate date={date} />} />
+      <div className="space-y-5">
+        <div className="flex w-full items-center justify-center gap-2 text-3xl font-semibold text-[#333] dark:text-[#f5f5f5] md:justify-start">
+          <h2>Writing</h2>
+          <PencilLine weight="duotone" />
+        </div>
+        <WritingDashboard />
+      </div>
       <div className="space-y-5">
         <div className="flex w-full items-center justify-center gap-2 text-3xl font-semibold text-[#333] dark:text-[#f5f5f5] md:justify-start">
           <h2>Github</h2>