Improve some ui visual effects

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} mt-3 mb-1 scroll-mt-20`} id={props.id}>
+    <h2 className={`${fontFangZhengXiaoBiaoSongCN.className} scroll-mt-20`} id={props.id}>
       {props.children}
     </h2>
   );

components/utils/NavBar.tsx

@@ -33,13 +33,9 @@ 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-black/50">
+      <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">
+        <Link href="/" className="cursor-pointer my-auto text-xl font-bold">
-          <h1
+          <h1 className={`${fontFangZhengXiaoBiaoSongCN.className}`}>{Config.SiteTitle}</h1>
-            className={`${fontFangZhengXiaoBiaoSongCN.className} my-auto border-b-4 border-b-black text-xl font-bold dark:border-b-white`}
-          >
-            {Config.SiteTitle}
-          </h1>
         </Link>
         <div className="my-auto hidden sm:flex">
           {MenuItems.map((menuItem) => (
@@ -67,20 +63,6 @@ export const NavBar = () => {
           </div>
         </div>
         <div className="flex flex-wrap text-3xl space-x-2 sm:hidden">
-          <Link
-            title="Search the posts"
-            className="my-auto rounded-full p-1 text-black hover:bg-gray-200 dark:text-gray-50 dark:hover:bg-gray-800"
-            href="/search"
-          >
-            <MdSearch />
-          </Link>
-          <div
-            title={theme === "light" ? "Switch to dark mode" : "Switch to light mode"}
-            className="cursor-pointer rounded-full my-auto p-1 text-black hover:bg-gray-200 dark:text-gray-50 dark:hover:bg-gray-800"
-            onClick={handleSwitchTheme}
-          >
-            {theme === "light" ? <MdOutlineDarkMode /> : <MdOutlineLightMode />}
-          </div>
           <SheetTrigger
             title="Spread the navigation menu"
             className="text-black rounded-full p-1 hover:bg-gray-200 dark:text-gray-50 dark:hover:bg-gray-800"
@@ -106,6 +88,22 @@ export const NavBar = () => {
             </Link>
           ))}
         </div>
+        <div className="flex justify-end text-3xl">
+          <Link
+            title="Search the posts"
+            className="my-auto rounded-full p-1 text-black hover:bg-gray-200 dark:text-gray-50 dark:hover:bg-gray-800"
+            href="/search"
+          >
+            <MdSearch />
+          </Link>
+          <div
+            title={theme === "light" ? "Switch to dark mode" : "Switch to light mode"}
+            className="cursor-pointer rounded-full my-auto p-1 text-black hover:bg-gray-200 dark:text-gray-50 dark:hover:bg-gray-800"
+            onClick={handleSwitchTheme}
+          >
+            {theme === "light" ? <MdOutlineDarkMode /> : <MdOutlineLightMode />}
+          </div>
+        </div>
       </SheetContent>
     </Sheet>
   );

components/utils/PostList.tsx

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

components/utils/TagBadge.tsx

@@ -1,11 +1,13 @@
-import Link from "next/link";
+import { fontSourceSerifScreenCN } from "@/styles/font";
 
 export const TagBadge = (props: { name: string; size: "sm" | "md"; count?: number }) => {
   return (
-    <Link href={`/tags/${props.name}`} className={`mx-1 my-1 ${props.size === "sm" ? "text-sm" : "text-base"}`}>
+    <div
-      <div className="border-2 border-black px-2 hover:border-gray-600 hover:text-gray-600 dark:hover:text-gray-300  dark:border-white  dark:text-white  dark:hover:border-gray-300">
+      className={`mx-1 my-1 ${fontSourceSerifScreenCN.className} ${
-        {`${props.name}${props.count ? ` (${props.count})` : ""}`}
+        props.size === "sm" ? "text-sm" : "text-base"
-      </div>
+      } border-2 border-black px-2  dark:border-white  dark:text-white`}
-    </Link>
+    >
+      {`${props.name}${props.count ? ` (${props.count})` : ""}`}
+    </div>
   );
 };

pages/index.tsx

@@ -53,7 +53,8 @@ export default function Home(props: HomePageProps) {
             </h2>
             <Separator />
             <PostList data={props.latestPostList} />
-            <div className="my-2 flex justify-end">
+            <Separator />
+            <div className="my-5 flex justify-end">
               <Button asChild>
                 <Link href="/posts" className="font-bold">
                   {"MORE POSTS >"}

pages/posts/[[...slug]].tsx

@@ -65,13 +65,16 @@ export default function PostsPage(props: PostsPageProps) {
             <Separator />
             <div className={`my-5 flex flex-wrap justify-center px-2 ${fontSourceSerifScreenCN.className}`}>
               {props.tagList.map((item) => (
-                <TagBadge key={`tag-badge-${nanoid()}`} name={item.name} size="md" count={item.count} />
+                <Link href={`/tags/${item.name}`} key={`tag-badge-${nanoid()}`}>
+                  <TagBadge name={item.name} size="md" count={item.count} />
+                </Link>
               ))}
             </div>
           </>
         )}
         <Separator />
         <PostList data={props.postList} />
+        <Separator />
         <div className="my-5 flex justify-between text-base font-bold">
           {props.pageNumber !== 1 && (
             <Button asChild>

pages/search.tsx

@@ -73,7 +73,7 @@ export default function SearchPage() {
             onChange={handleInputSearchText}
           />
           <Button className="mx-3 my-auto" disabled={querySearch.isLoading} onClick={handleMakeSearch}>
-            {querySearch.isLoading ? "Loading" : "Search"}
+            {querySearch.isFetching ? "Loading" : "Search"}
           </Button>
         </div>
         <div className="flex flex-col justify-center">

pages/tags/[...slug].tsx

@@ -60,6 +60,7 @@ export default function TagsContentPage(props: TagsContentPageProps) {
         </h2>
         <Separator />
         <PostList data={props.postList} />
+        <Separator />
         <div className="my-5 flex justify-between text-base font-bold">
           {props.pageNumber !== 1 && (
             <Button asChild>