Remove custom component styles and use shadcn components instead, then format the code.

components/homepage/HomeCover.tsx

@@ -19,7 +19,9 @@ export const HomeCover = () => {
           src={Config.AvatarURL}
         />
       </div>
-      <div className={`${fontFangZhengXiaoBiaoSongCN.className} my-8 text-center text-4xl font-bold`}>{Config.Nickname}</div>
+      <div className={`${fontFangZhengXiaoBiaoSongCN.className} my-8 text-center text-4xl font-bold`}>
+        {Config.Nickname}
+      </div>
       <SocialIcons />
       {Config.Sentence && (
         <div className="my-8 flex justify-center">

components/ui/button.tsx

@@ -4,7 +4,7 @@ import { cva, type VariantProps } from "class-variance-authority";
 import * as React from "react";
 
 const buttonVariants = cva(
-  "inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
+  "inline-flex items-center justify-center rounded-md text-base ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
   {
     variants: {
       variant: {
@@ -16,7 +16,7 @@ const buttonVariants = cva(
         link: "text-primary underline-offset-4 hover:underline",
       },
       size: {
-        default: "h-10 px-4 py-2",
+        default: "h-9 px-5 py-1",
         sm: "h-9 rounded-md px-3",
         lg: "h-11 rounded-md px-8",
         icon: "h-10 w-10",

pages/about.tsx

@@ -17,7 +17,9 @@ export default function AboutPage() {
       />
       <NavBar />
       <ContentContainer>
-        <h2 className={`my-5 flex justify-around text-2xl font-bold ${fontFangZhengXiaoBiaoSongCN.className}`}>{"ABOUT ME"}</h2>
+        <h2 className={`my-5 flex justify-around text-2xl font-bold ${fontFangZhengXiaoBiaoSongCN.className}`}>
+          {"ABOUT ME"}
+        </h2>
         <hr />
         <div className={`${fontSourceSerifScreenCN.className} my-5 justify-center md:flex md:space-x-10`}>
           <div className="my-auto flex md:w-1/3">

pages/blog/[id].tsx

@@ -65,7 +65,9 @@ const ReaderPage = (props: ReaderPageProps) => {
                 {props.frontMatter?.title}
               </h2>
               {props.frontMatter?.subtitle && (
-                <div className={`${fontFangZhengXiaoBiaoSongCN.className} my-1 flex justify-center text-xl font-bold capitalize`}>
+                <div
+                  className={`${fontFangZhengXiaoBiaoSongCN.className} my-1 flex justify-center text-xl font-bold capitalize`}
+                >
                   {props.frontMatter.subtitle}
                 </div>
               )}

pages/friends.tsx

@@ -14,7 +14,9 @@ export default function FriendsPage() {
       <SEO title={`${Config.SiteTitle} - Friends`} description={"My Friend Links"} />
       <NavBar />
       <ContentContainer>
-        <h2 className={`my-5 flex justify-center text-2xl font-bold ${fontFangZhengXiaoBiaoSongCN.className}`}>{"FRIENDS"}</h2>
+        <h2 className={`my-5 flex justify-center text-2xl font-bold ${fontFangZhengXiaoBiaoSongCN.className}`}>
+          {"FRIENDS"}
+        </h2>
         <hr />
         <div className={`my-5 py-3 flex flex-wrap justify-center text-2xl ${fontSourceSerifScreenCN.className}`}>
           {FriendsList.map((item) => (

pages/index.tsx

@@ -1,5 +1,6 @@
 import { HomeCover } from "@/components/homepage/HomeCover";
 import { ContentContainer, Page } from "@/components/layouts/layouts";
+import { Button } from "@/components/ui/button";
 import { Footer } from "@/components/utils/Footer";
 import { NavBar } from "@/components/utils/NavBar";
 import { PostList } from "@/components/utils/PostList";
@@ -52,9 +53,11 @@ export default function Home(props: HomePageProps) {
             <hr />
             <PostList data={props.latestPostList} />
             <div className="my-2 flex justify-end">
-              <Link href="/posts" className="link-button font-bold text-base">
+              <Button asChild>
-                {"MORE POSTS >"}
+                <Link href="/posts" className="font-bold">
-              </Link>
+                  {"MORE POSTS >"}
+                </Link>
+              </Button>
             </div>
           </div>
         )}

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

@@ -1,4 +1,5 @@
 import { ContentContainer, Page } from "@/components/layouts/layouts";
+import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Footer } from "@/components/utils/Footer";
 import { NavBar } from "@/components/utils/NavBar";
@@ -59,9 +60,11 @@ export default function PostsPage(props: PostsPageProps) {
         <PostList data={props.postList} />
         <div className="my-5 flex justify-between text-base font-bold">
           {props.pageNumber !== 1 && (
-            <Link href={`/posts/${props.pageNumber - 1}`} className="link-button my-auto">
+            <Button asChild>
-              {"< PREV"}
+              <Link href={`/posts/${props.pageNumber - 1}/`} className="font-bold">
-            </Link>
+                {"< PREV"}
+              </Link>
+            </Button>
           )}
           <div className="my-auto font-bold flex justify-center">
             <Input
@@ -73,9 +76,11 @@ export default function PostsPage(props: PostsPageProps) {
             <div className="my-auto">{`  /  ${props.pageAmount}`}</div>
           </div>
           {props.pageNumber !== props.pageAmount && (
-            <Link href={`/posts/${props.pageNumber + 1}`} className="link-button my-auto">
+            <Button asChild>
-              {"NEXT >"}
+              <Link href={`/posts/${props.pageNumber + 1}/`} className="font-bold">
-            </Link>
+                {"NEXT >"}
+              </Link>
+            </Button>
           )}
         </div>
       </ContentContainer>

pages/sponsor.tsx

@@ -24,7 +24,9 @@ export default function AboutPage() {
       <ContentContainer>
         <div className="md:flex">
           <div className="flex flex-col justify-center md:w-1/2">
-            <h2 className={`my-5 flex justify-center text-2xl font-bold text-red-500 ${fontFangZhengXiaoBiaoSongCN.className}`}>
+            <h2
+              className={`my-5 flex justify-center text-2xl font-bold text-red-500 ${fontFangZhengXiaoBiaoSongCN.className}`}
+            >
               <GoHeartFill className="mx-2 my-auto" />
               {"SPONSOR"}
             </h2>

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

@@ -1,4 +1,5 @@
 import { ContentContainer, Page } from "@/components/layouts/layouts";
+import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Footer } from "@/components/utils/Footer";
 import { NavBar } from "@/components/utils/NavBar";
@@ -51,16 +52,20 @@ export default function TagsContentPage(props: TagsContentPageProps) {
       />
       <NavBar />
       <ContentContainer>
-        <h2 className={`my-5 flex flex-col justify-center text-center text-3xl font-bold ${fontFangZhengXiaoBiaoSongCN.className}`}>
+        <h2
+          className={`my-5 flex flex-col justify-center text-center text-3xl font-bold ${fontFangZhengXiaoBiaoSongCN.className}`}
+        >
           {`Posts of ${props.tagName}`}
         </h2>
         <hr />
         <PostList data={props.postList} />
         <div className="my-5 flex justify-between text-base font-bold">
           {props.pageNumber !== 1 && (
-            <Link href={`/tags/${props.tagName}/${props.pageNumber - 1}/`} className="link-button my-auto">
+            <Button asChild>
-              {"< PREV"}
+              <Link href={`/tags/${props.tagName}/${props.pageNumber - 1}/`} className="font-bold">
-            </Link>
+                {"< PREV"}
+              </Link>
+            </Button>
           )}
           <div className="my-auto font-bold flex justify-center">
             <Input
@@ -72,9 +77,11 @@ export default function TagsContentPage(props: TagsContentPageProps) {
             <div className="my-auto">{`  /  ${props.pageAmount}`}</div>
           </div>
           {props.pageNumber !== props.pageAmount && (
-            <Link href={`/tags/${props.tagName}/${props.pageNumber + 1}/`} className="link-button my-auto">
+            <Button asChild>
-              {"NEXT >"}
+              <Link href={`/tags/${props.tagName}/${props.pageNumber + 1}/`} className="font-bold">
-            </Link>
+                {"NEXT >"}
+              </Link>
+            </Button>
           )}
         </div>
       </ContentContainer>

styles/globals.css

@@ -3,8 +3,7 @@
 @tailwind utilities;
 
 @import "./typesetting.css";
-@import "./formuation.css";
+@import "./formulation.css";
-@import "./ui.css";
 @import "./layout.css";
 @import "./scrollbar.css";
 
@@ -82,3 +81,14 @@
     @apply bg-background text-foreground;
   }
 }
+
+.selection-style {
+  @apply selection:bg-black
+      selection:text-white
+      dark:selection:bg-white
+      dark:selection:text-black;
+}
+
+* {
+  @apply selection-style;
+}

styles/ui.css

@@ -1,26 +0,0 @@
-.selection-style {
-  @apply selection:bg-black
-      selection:text-white
-      dark:selection:bg-white
-      dark:selection:text-black;
-}
-
-.tag-link {
-  @apply border-2 border-black px-2 hover:border-gray-600 hover:text-gray-600 dark:border-white  dark:text-white  dark:hover:border-gray-200  dark:hover:text-gray-200;
-}
-
-.link-button {
-  @apply rounded-md
-  bg-black
-  px-5
-  py-1
-  text-white
-  hover:bg-gray-600
-  dark:bg-white
-  dark:text-black
-  dark:hover:bg-gray-200;
-}
-
-* {
-  @apply selection-style;
-}