From b10ce77b0081198a0d91f8592991c11a84c7a833 Mon Sep 17 00:00:00 2001
From: PrinOrange <prinorange@outlook.com>
Date: Mon, 8 Jan 2024 18:18:21 +0800
Subject: [PATCH] Improve some ui visual effects

---
 components/mdx/H2.tsx         |  2 +-
 components/utils/NavBar.tsx   | 40 +++++++++++++++++------------------
 components/utils/PostList.tsx | 39 +++++++++++++++++-----------------
 components/utils/TagBadge.tsx | 14 ++++++------
 pages/index.tsx               |  3 ++-
 pages/posts/[[...slug]].tsx   |  5 ++++-
 pages/search.tsx              |  2 +-
 pages/tags/[...slug].tsx      |  1 +
 8 files changed, 56 insertions(+), 50 deletions(-)

diff --git a/components/mdx/H2.tsx b/components/mdx/H2.tsx
index 328c0d9..49886a2 100644
--- a/components/mdx/H2.tsx
+++ b/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>
   );
diff --git a/components/utils/NavBar.tsx b/components/utils/NavBar.tsx
index fb750d3..3fe020e 100644
--- a/components/utils/NavBar.tsx
+++ b/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">
-        <Link href="/" className="cursor-pointer">
-          <h1
-            className={`${fontFangZhengXiaoBiaoSongCN.className} my-auto border-b-4 border-b-black text-xl font-bold dark:border-b-white`}
-          >
-            {Config.SiteTitle}
-          </h1>
+      <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">
+          <h1 className={`${fontFangZhengXiaoBiaoSongCN.className}`}>{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>
   );
diff --git a/components/utils/PostList.tsx b/components/utils/PostList.tsx
index a34fcad..40c2737 100644
--- a/components/utils/PostList.tsx
+++ b/components/utils/PostList.tsx
@@ -9,17 +9,18 @@ export const PostList = (props: { data: TPostListItem[] }) => {
   return (
     <div>
       {props.data.map((postListItem, index) => (
-        <div
-          key={`post-list-${nanoid()}`}
-          className={`${fontSourceSerifScreenCN.className} flex flex-col justify-center ${
-            index !== props.data.length - 1 && "border-b"
-          } border-gray-200 dark:border-gray-800 py-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 ">
-              <h3 className="mx-auto text-xl font-extrabold capitalize">{postListItem.frontMatter.title}</h3>
+        <Link className="cursor-pointer" href={`/blog/${postListItem.id}`} key={`post-list-${nanoid()}`}>
+          <div
+            className={`${fontSourceSerifScreenCN.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="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 && (
-            <div className="my-2 flex justify-center">
-              {postListItem.frontMatter.tags.map((tagName) => (
-                <TagBadge name={tagName} size="sm" key={`tags-${nanoid()}`} />
-              ))}
-            </div>
-          )}
-        </div>
+            {postListItem.frontMatter.tags && (
+              <div className="my-2 flex justify-center">
+                {postListItem.frontMatter.tags.map((tagName) => (
+                  <TagBadge name={tagName} size="sm" key={`tags-${nanoid()}`} />
+                ))}
+              </div>
+            )}
+          </div>
+        </Link>
       ))}
     </div>
   );
diff --git a/components/utils/TagBadge.tsx b/components/utils/TagBadge.tsx
index f4cba63..f68e263 100644
--- a/components/utils/TagBadge.tsx
+++ b/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 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">
-        {`${props.name}${props.count ? ` (${props.count})` : ""}`}
-      </div>
-    </Link>
+    <div
+      className={`mx-1 my-1 ${fontSourceSerifScreenCN.className} ${
+        props.size === "sm" ? "text-sm" : "text-base"
+      } border-2 border-black px-2  dark:border-white  dark:text-white`}
+    >
+      {`${props.name}${props.count ? ` (${props.count})` : ""}`}
+    </div>
   );
 };
diff --git a/pages/index.tsx b/pages/index.tsx
index 0ece09c..dfee306 100644
--- a/pages/index.tsx
+++ b/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 >"}
diff --git a/pages/posts/[[...slug]].tsx b/pages/posts/[[...slug]].tsx
index 01cd077..c54596a 100644
--- a/pages/posts/[[...slug]].tsx
+++ b/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>
diff --git a/pages/search.tsx b/pages/search.tsx
index 84212c4..0eeff8d 100644
--- a/pages/search.tsx
+++ b/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">
diff --git a/pages/tags/[...slug].tsx b/pages/tags/[...slug].tsx
index 0380d8b..35e9105 100644
--- a/pages/tags/[...slug].tsx
+++ b/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>