From 099795ab4c56782067873be5e2ee395af48478ce Mon Sep 17 00:00:00 2001
From: PrinOrange <prinorange@outlook.com>
Date: Sat, 6 Jan 2024 20:53:18 +0800
Subject: [PATCH] Fix some UI flaws

---
 components/readerpage/TOC.tsx | 2 +-
 components/utils/PostList.tsx | 2 +-
 lib/utils.ts                  | 4 ++--
 pages/about.tsx               | 5 +++--
 pages/friends.tsx             | 5 +++--
 pages/index.tsx               | 7 ++++---
 pages/posts/[[...slug]].tsx   | 7 ++++---
 pages/sponsor.tsx             | 2 +-
 pages/tags/[...slug].tsx      | 5 +++--
 9 files changed, 22 insertions(+), 17 deletions(-)

diff --git a/components/readerpage/TOC.tsx b/components/readerpage/TOC.tsx
index ef11445..f6c3d11 100644
--- a/components/readerpage/TOC.tsx
+++ b/components/readerpage/TOC.tsx
@@ -3,7 +3,7 @@ import Link from "next/link";
 
 export const TOC = (props: { data: TTOCItem[] }) => {
   return (
-    <div className="sticky top-[5em] mx-5 p-2 border border-black dark:border-gray-400 rounded-sm">
+    <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>
diff --git a/components/utils/PostList.tsx b/components/utils/PostList.tsx
index 1880cec..a34fcad 100644
--- a/components/utils/PostList.tsx
+++ b/components/utils/PostList.tsx
@@ -13,7 +13,7 @@ export const PostList = (props: { data: TPostListItem[] }) => {
           key={`post-list-${nanoid()}`}
           className={`${fontSourceSerifScreenCN.className} flex flex-col justify-center ${
             index !== props.data.length - 1 && "border-b"
-          } border-dashed border-gray-400 py-3`}
+          } 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 ">
diff --git a/lib/utils.ts b/lib/utils.ts
index f760959..094637a 100644
--- a/lib/utils.ts
+++ b/lib/utils.ts
@@ -61,7 +61,7 @@ export function isEmptyString(value: string | null | undefined): boolean {
  * @returns The array without empty values.
  * @template T - The type of the array elements.
  */
-export function removeEmptyValuesFromArray<T = any>(value: any[]): T[] {
+export function removeEmptyValuesFromArray<T>(value: T[]): T[] {
   return value.filter((item) => item != null);
 }
 
@@ -74,7 +74,7 @@ export function isEmptyArray(value: any[] | null | undefined): boolean {
   if (value === null || value === undefined) {
     return true;
   }
-  return removeEmptyValuesFromArray(value).length !== 0;
+  return removeEmptyValuesFromArray(value).length === 0;
 }
 
 /**
diff --git a/pages/about.tsx b/pages/about.tsx
index fe56444..e2eb300 100644
--- a/pages/about.tsx
+++ b/pages/about.tsx
@@ -1,4 +1,5 @@
 import { ContentContainer, Page } from "@/components/layouts/layouts";
+import { Separator } from "@/components/ui/separator";
 import { Footer } from "@/components/utils/Footer";
 import { NavBar } from "@/components/utils/NavBar";
 import { SEO } from "@/components/utils/SEO";
@@ -17,10 +18,10 @@ export default function AboutPage() {
       />
       <ContentContainer>
         <NavBar />
-        <h2 className={`my-10 flex justify-around text-2xl font-bold ${fontFangZhengXiaoBiaoSongCN.className}`}>
+        <h2 className={`my-5 flex justify-around text-2xl font-bold ${fontFangZhengXiaoBiaoSongCN.className}`}>
           {"ABOUT ME"}
         </h2>
-        <hr />
+        <Separator />
         <div className={`${fontSourceSerifScreenCN.className} my-5 justify-center md:flex md:space-x-10`}>
           <div className="my-auto flex md:w-1/3">
             <img alt="my-profile" className="mx-auto my-auto max-h-[23rem] rounded-lg" src="/images/profile.webp" />
diff --git a/pages/friends.tsx b/pages/friends.tsx
index 565d190..5076115 100644
--- a/pages/friends.tsx
+++ b/pages/friends.tsx
@@ -1,4 +1,5 @@
 import { ContentContainer, Page } from "@/components/layouts/layouts";
+import { Separator } from "@/components/ui/separator";
 import { Footer } from "@/components/utils/Footer";
 import { NavBar } from "@/components/utils/NavBar";
 import { SEO } from "@/components/utils/SEO";
@@ -17,7 +18,7 @@ export default function FriendsPage() {
         <h2 className={`my-10 flex justify-center text-2xl font-bold ${fontFangZhengXiaoBiaoSongCN.className}`}>
           {"FRIENDS"}
         </h2>
-        <hr />
+        <Separator />
         <div className={`my-5 py-3 flex flex-wrap justify-center text-2xl ${fontSourceSerifScreenCN.className}`}>
           {FriendsList.map((item) => (
             <Link className="mx-3 p-2 underline" href={item.url} key={nanoid()}>
@@ -25,7 +26,7 @@ export default function FriendsPage() {
             </Link>
           ))}
         </div>
-        <hr />
+        <Separator />
         <div className="my-3 text-base flex-col flex justify-start">
           <div className="mx-auto">
             {"Welcome to exchange our friend links and every high-quality blog websites are welcomed. "}
diff --git a/pages/index.tsx b/pages/index.tsx
index a647dbd..ab34067 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -1,6 +1,7 @@
 import { HomeCover } from "@/components/homepage/HomeCover";
 import { ContentContainer, Page } from "@/components/layouts/layouts";
 import { Button } from "@/components/ui/button";
+import { Separator } from "@/components/ui/separator";
 import { Footer } from "@/components/utils/Footer";
 import { NavBar } from "@/components/utils/NavBar";
 import { PostList } from "@/components/utils/PostList";
@@ -34,12 +35,12 @@ export default function Home(props: HomePageProps) {
         <HomeCover />
         {props.pinnedPostList.length !== 0 && (
           <div>
-            <hr />
+            <Separator />
             <h2 className={`my-5 flex justify-center text-2xl font-bold ${fontFangZhengXiaoBiaoSongCN.className}`}>
               <RiStarFill className="mx-2 my-auto" />
               {"PINNED POSTS"}
             </h2>
-            <hr />
+            <Separator />
             <PostList data={props.pinnedPostList} />
           </div>
         )}
@@ -50,7 +51,7 @@ export default function Home(props: HomePageProps) {
               <LuPenTool className="mx-2 my-auto" />
               {"LATEST POSTS"}
             </h2>
-            <hr />
+            <Separator />
             <PostList data={props.latestPostList} />
             <div className="my-2 flex justify-end">
               <Button asChild>
diff --git a/pages/posts/[[...slug]].tsx b/pages/posts/[[...slug]].tsx
index bbd82ce..b9e9c5d 100644
--- a/pages/posts/[[...slug]].tsx
+++ b/pages/posts/[[...slug]].tsx
@@ -1,6 +1,7 @@
 import { ContentContainer, Page } from "@/components/layouts/layouts";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
+import { Separator } from "@/components/ui/separator";
 import { Footer } from "@/components/utils/Footer";
 import { NavBar } from "@/components/utils/NavBar";
 import { PostList } from "@/components/utils/PostList";
@@ -55,17 +56,17 @@ export default function PostsPage(props: PostsPageProps) {
       />
       <ContentContainer>
         <NavBar />
-        <h2 className={`my-10 flex justify-center text-2xl ${fontFangZhengXiaoBiaoSongCN.className} font-bold`}>
+        <h2 className={`my-5 flex justify-center text-2xl ${fontFangZhengXiaoBiaoSongCN.className} font-bold`}>
           <LuPenTool className="mx-2 my-auto" />
           {"ALL POSTS"}
         </h2>
-        <hr />
+        <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} />
           ))}
         </div>
-        <hr />
+        <Separator />
         <PostList data={props.postList} />
         <div className="my-5 flex justify-between text-base font-bold">
           {props.pageNumber !== 1 && (
diff --git a/pages/sponsor.tsx b/pages/sponsor.tsx
index f5c1377..d54ba4f 100644
--- a/pages/sponsor.tsx
+++ b/pages/sponsor.tsx
@@ -26,7 +26,7 @@ export default function AboutPage() {
         <div className="md:flex">
           <div className="flex flex-col justify-center md:w-1/2">
             <h2
-              className={`my-10 flex justify-center text-2xl font-bold text-red-500 ${fontFangZhengXiaoBiaoSongCN.className}`}
+              className={`my-5 flex justify-center text-2xl font-bold text-red-500 ${fontFangZhengXiaoBiaoSongCN.className}`}
             >
               <GoHeartFill className="mx-2 my-auto" />
               {"SPONSOR"}
diff --git a/pages/tags/[...slug].tsx b/pages/tags/[...slug].tsx
index e040db9..0380d8b 100644
--- a/pages/tags/[...slug].tsx
+++ b/pages/tags/[...slug].tsx
@@ -1,6 +1,7 @@
 import { ContentContainer, Page } from "@/components/layouts/layouts";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
+import { Separator } from "@/components/ui/separator";
 import { Footer } from "@/components/utils/Footer";
 import { NavBar } from "@/components/utils/NavBar";
 import { PostList } from "@/components/utils/PostList";
@@ -53,11 +54,11 @@ export default function TagsContentPage(props: TagsContentPageProps) {
       <ContentContainer>
         <NavBar />
         <h2
-          className={`my-10 flex flex-col justify-center text-center text-3xl font-bold ${fontFangZhengXiaoBiaoSongCN.className}`}
+          className={`my-5 flex flex-col justify-center text-center text-3xl font-bold ${fontFangZhengXiaoBiaoSongCN.className}`}
         >
           {`Posts of ${props.tagName}`}
         </h2>
-        <hr />
+        <Separator />
         <PostList data={props.postList} />
         <div className="my-5 flex justify-between text-base font-bold">
           {props.pageNumber !== 1 && (