From 6adae540b27201243451d2103f68b5848e8f37f2 Mon Sep 17 00:00:00 2001
From: Innei <i@innei.in>
Date: Fri, 8 Sep 2023 11:25:55 +0800
Subject: [PATCH] feat: add nav on post meta bar

---
 src/components/widgets/post/PostMetaBar.tsx   | 46 ++++++++++++++++++-
 .../widgets/post/fab/PostTagsFAB.tsx          |  2 +-
 src/lib/fonts.ts                              |  2 +-
 3 files changed, 46 insertions(+), 4 deletions(-)

diff --git a/src/components/widgets/post/PostMetaBar.tsx b/src/components/widgets/post/PostMetaBar.tsx
index f7bdd5e213..962b80dfb3 100644
--- a/src/components/widgets/post/PostMetaBar.tsx
+++ b/src/components/widgets/post/PostMetaBar.tsx
@@ -1,5 +1,6 @@
 'use client'
 
+import Link from 'next/link'
 import type { PostModel } from '@mx-space/api-client'
 
 import { MdiClockOutline } from '~/components/icons/clock'
@@ -9,12 +10,17 @@ import { FloatPopover } from '~/components/ui/float-popover'
 import { NumberSmoothTransition } from '~/components/ui/number-transition/NumberSmoothTransition'
 import { RelativeTime } from '~/components/ui/relative-time'
 import { clsxm } from '~/lib/helper'
+import { routeBuilder, Routes } from '~/lib/route-builder'
+import { useModalStack } from '~/providers/root/modal-stack-provider'
+
+import { TagDetailModal } from './fab/PostTagsFAB'
 
 export const PostMetaBar: Component<{
   meta: Partial<
     Pick<PostModel, 'created' | 'modified' | 'category' | 'tags' | 'count'>
   >
 }> = ({ className, meta }) => {
+  const { present } = useModalStack()
   return (
     <div
       className={clsxm(
@@ -46,8 +52,44 @@ export const PostMetaBar: Component<{
         <div className="flex min-w-0 items-center space-x-1">
           <FeHash className="translate-y-[0.5px]" />
           <span className="min-w-0 truncate">
-            {meta.category?.name}
-            {meta.tags?.length ? ` / ${meta.tags.join(', ')}` : ''}
+            <Link
+              href={routeBuilder(Routes.Category, {
+                slug: meta.category.slug,
+              })}
+              className="shiro-link--underline font-normal"
+            >
+              {meta.category?.name}
+            </Link>
+
+            {meta.tags?.length ? (
+              <>
+                {' '}
+                /{' '}
+                {meta.tags.map((tag, index) => {
+                  const isLast = index === meta.tags!.length - 1
+
+                  return (
+                    <>
+                      <button
+                        className="shiro-link--underline"
+                        onClick={() =>
+                          present({
+                            content: () => <TagDetailModal name={tag} />,
+                            title: `Tag: ${tag}`,
+                          })
+                        }
+                        key={tag}
+                      >
+                        {tag}
+                      </button>
+                      {!isLast && <span>, </span>}
+                    </>
+                  )
+                })}
+              </>
+            ) : (
+              ''
+            )}
           </span>
         </div>
       )}
diff --git a/src/components/widgets/post/fab/PostTagsFAB.tsx b/src/components/widgets/post/fab/PostTagsFAB.tsx
index 2084fb1904..0212b51028 100644
--- a/src/components/widgets/post/fab/PostTagsFAB.tsx
+++ b/src/components/widgets/post/fab/PostTagsFAB.tsx
@@ -69,7 +69,7 @@ const TagInternal = memo(function TagInternal(
   )
 })
 
-const TagDetailModal = (props: TagModel) => {
+export const TagDetailModal = (props: { name: string }) => {
   const { name } = props
   const { data, isLoading } = useQuery({
     queryKey: [name, 'tag'],
diff --git a/src/lib/fonts.ts b/src/lib/fonts.ts
index 6d2548814c..80e4a0a2e6 100644
--- a/src/lib/fonts.ts
+++ b/src/lib/fonts.ts
@@ -2,7 +2,7 @@ import { Manrope, Noto_Serif_SC } from 'next/font/google'
 
 const sansFont = Manrope({
   subsets: ['latin'],
-  weight: ['400', '500'],
+  weight: ['300', '400', '500'],
   variable: '--font-sans',
   display: 'swap',
 })