feat: add nav on post meta bar

Author: Innei

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>
       )}

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'],

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',
 })