Optimize UI details and fix some defects

components/mdx/H2.tsx

@@ -2,7 +2,7 @@ import { fontFangZhengXiaoBiaoSongCN } from "@/styles/font";
 
 export const H2 = (props: JSX.IntrinsicElements["h2"]) => {
   return (
-    <h2 className={`${fontFangZhengXiaoBiaoSongCN.className} scroll-mt-20`} id={props.id}>
+    <h2 className={`${fontFangZhengXiaoBiaoSongCN.className} mt-4 mb-2 scroll-mt-20`} id={props.id}>
       {props.children}
     </h2>
   );

components/readerpage/TOC.tsx

@@ -1,22 +1,27 @@
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { TTOCItem } from "@/types/toc.type";
 import Link from "next/link";
+import { Separator } from "../ui/separator";
 
 export const TOC = (props: { data: TTOCItem[] }) => {
   return (
-    <div className="sticky top-[5em] mx-5 p-2 border border-black dark:border-gray-400">
-      <div className="p-2 font-bold text-center border bg-black text-white dark:text-black dark:bg-gray-100">
-        {"TABLE OF CONTENTS"}
-      </div>
-      <ul className="flat-scrollbar my-1 px-1 h-[60vh] overflow-y-auto">
-        {props.data?.map((item) => (
-          <Link className="hover:text-sky-500" href={`#${item.anchorId}`} key={`toc-${item.anchorId}`}>
-            <li
-              className="my-2 text-sm target:text-blue-500"
-              style={{ paddingLeft: `${item.level - 1}em` }}
-            >{`${item.title}`}</li>
-          </Link>
-        ))}
-      </ul>
-    </div>
+    <Card className="sticky top-[5em] mx-5">
+      <CardHeader className="p-3">
+        <CardTitle className="text-lg text-center">{"TABLE OF CONTENTS"}</CardTitle>
+      </CardHeader>
+      <Separator />
+      <CardContent className="px-1 py-2 h-[60vh] overflow-y-auto flat-scrollbar-normal">
+        <ul>
+          {props.data?.map((item) => (
+            <Link className="hover:text-sky-500" href={`#${item.anchorId}`} key={`toc-${item.anchorId}`}>
+              <li
+                className="my-2 text-sm target:text-blue-500"
+                style={{ paddingLeft: `${item.level - 1}em` }}
+              >{`${item.title}`}</li>
+            </Link>
+          ))}
+        </ul>
+      </CardContent>
+    </Card>
   );
 };

components/ui/badge.tsx

@@ -0,0 +1,29 @@
+import { cva, type VariantProps } from "class-variance-authority";
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+const badgeVariants = cva(
+  "inline-flex items-center rounded-full border px-2.5 py-1 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+  {
+    variants: {
+      variant: {
+        default: "border-transparent bg-primary text-primary-foreground hover:bg-primary/80",
+        secondary: "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        destructive: "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
+        outline: "text-foreground",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  },
+);
+
+export interface BadgeProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof badgeVariants> {}
+
+function Badge({ className, variant, ...props }: BadgeProps) {
+  return <div className={cn(badgeVariants({ variant }), className)} {...props} />;
+}
+
+export { Badge, badgeVariants };

components/ui/card.tsx

@@ -0,0 +1,79 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+const Card = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn(
+      "rounded-lg border bg-card text-card-foreground shadow-sm",
+      className
+    )}
+    {...props}
+  />
+))
+Card.displayName = "Card"
+
+const CardHeader = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("flex flex-col space-y-1.5 p-6", className)}
+    {...props}
+  />
+))
+CardHeader.displayName = "CardHeader"
+
+const CardTitle = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLHeadingElement>
+>(({ className, ...props }, ref) => (
+  <h3
+    ref={ref}
+    className={cn(
+      "text-2xl font-semibold leading-none tracking-tight",
+      className
+    )}
+    {...props}
+  />
+))
+CardTitle.displayName = "CardTitle"
+
+const CardDescription = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => (
+  <p
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+))
+CardDescription.displayName = "CardDescription"
+
+const CardContent = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
+))
+CardContent.displayName = "CardContent"
+
+const CardFooter = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("flex items-center p-6 pt-0", className)}
+    {...props}
+  />
+))
+CardFooter.displayName = "CardFooter"
+
+export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }

components/utils/NavBar.tsx

@@ -33,8 +33,8 @@ export const NavBar = () => {
 
   return (
     <Sheet open={isSideNavOpen} onOpenChange={(open) => setIsSideNavOpen(open)}>
-      <nav className="sticky top-0 z-50 flex flex-wrap justify-between py-3 backdrop-blur bg-white/50 dark:bg-gray-950/50">
-        <Link href="/" className="cursor-pointer my-auto text-xl font-bold">
+      <div className="sticky top-0 z-50 border-gray-200 dark:border-gray-700 border-b flex flex-wrap justify-between py-3 backdrop-blur bg-white/50 dark:bg-gray-950/50 px-5 lg:px-20 xl:px-32 2xl:px-52">
+        <Link href="/" className="cursor-pointer my-auto text-2xl font-bold">
           <h1 className={`${fontFangZhengXiaoBiaoSongCN.className}`}>{Config.SiteTitle}</h1>
         </Link>
         <div className="my-auto hidden sm:flex">
@@ -74,7 +74,7 @@ export const NavBar = () => {
             />
           </SheetTrigger>
         </div>
-      </nav>
+      </div>
       <SheetContent className="bg:white border-none shadow-md dark:bg-black flex flex-col justify-end text-end">
         {MenuItems.map((menuItem) => (
           <Link

components/utils/PostList.tsx

@@ -3,36 +3,38 @@ import { fontSourceSerifScreenCN } from "@/styles/font";
 import { TPostListItem } from "@/types/post-list";
 import { nanoid } from "nanoid";
 import Link from "next/link";
-import { TagBadge } from "./TagBadge";
+import { Badge } from "../ui/badge";
 
 export const PostList = (props: { data: TPostListItem[] }) => {
   return (
     <div>
-      {props.data.map((postListItem, index) => (
-        <Link className="cursor-pointer" href={`/blog/${postListItem.id}`} key={`post-list-${nanoid()}`}>
+      {props.data.map((postItem, index) => (
+        <Link className="cursor-pointer" href={`/blog/${postItem.id}`} key={`post-list-${nanoid()}`}>
           <div
-            className={`${fontSourceSerifScreenCN.className} flex flex-col justify-center ${
+            className={`flex flex-col justify-center ${
               index !== props.data.length - 1 && "border-b"
             } border-gray-200 hover:bg-gray-50 dark:hover:bg-gray-950 dark:border-gray-800 p-3`}
           >
-            <div className="flex-center flex flex-col py-2">
-              <h3 className="mx-auto text-lg font-extrabold capitalize">{postListItem.frontMatter.title}</h3>
-              {postListItem.frontMatter.subtitle && (
+            <div className={`${fontSourceSerifScreenCN.className} text-center flex-col py-2`}>
+              <h3 className="mx-auto text-lg font-extrabold capitalize">{postItem.frontMatter.title}</h3>
+              {postItem.frontMatter.subtitle && (
                 <div className="mx-auto text-base font-semibold capitalize text-gray-700 dark:text-gray-300">
-                  {postListItem.frontMatter.subtitle}
+                  {postItem.frontMatter.subtitle}
                 </div>
               )}
             </div>
-            <div className="text-center">{normalizeDate(postListItem.frontMatter.time)}</div>
-            {postListItem.frontMatter.summary && (
-              <div className="flex my-1 justify-center">
-                <p>{postListItem.frontMatter.summary}</p>
+            <div className="text-center">{normalizeDate(postItem.frontMatter.time)}</div>
+            {postItem.frontMatter.summary && (
+              <div className={`${fontSourceSerifScreenCN.className} flex my-1 justify-center`}>
+                <p>{postItem.frontMatter.summary}</p>
               </div>
             )}
-            {postListItem.frontMatter.tags && (
+            {postItem.frontMatter.tags && (
               <div className="my-2 flex justify-center">
-                {postListItem.frontMatter.tags.map((tagName) => (
-                  <TagBadge name={tagName} size="sm" key={`tags-${nanoid()}`} />
+                {postItem.frontMatter.tags.map((tagName) => (
+                  <Badge className="mx-1" key={`tags-${nanoid()}`}>
+                    {tagName}
+                  </Badge>
                 ))}
               </div>
             )}