From 0ff22c2a49900daf435c29cbc3be77440d7cfaef Mon Sep 17 00:00:00 2001
From: DIYgod <i@diygod.me>
Date: Fri, 22 Sep 2023 21:34:22 +0800
Subject: [PATCH] feat: rounded post sorting button

---
 src/app/site/[site]/layout.tsx           |  2 +-
 src/components/site/ShortPreviewList.tsx |  2 +-
 src/components/site/SiteHome.tsx         |  2 +-
 src/components/ui/Tabs.tsx               | 15 ++++++++++++---
 4 files changed, 15 insertions(+), 6 deletions(-)

diff --git a/src/app/site/[site]/layout.tsx b/src/app/site/[site]/layout.tsx
index a84888a7..80ae94ea 100644
--- a/src/app/site/[site]/layout.tsx
+++ b/src/app/site/[site]/layout.tsx
@@ -205,7 +205,7 @@ export default async function SiteLayout({
         <main
           className={cn(
             `xlog-post-id-${page?.characterId}-${page?.noteId}`,
-            "xlog-deprecated-class xlog-post-area max-w-screen-lg mx-auto px-5 pt-12 relative",
+            "xlog-deprecated-class xlog-post-area max-w-screen-lg mx-auto px-5 pt-6 relative",
           )}
         >
           {children}
diff --git a/src/components/site/ShortPreviewList.tsx b/src/components/site/ShortPreviewList.tsx
index 35d27865..16f45a69 100644
--- a/src/components/site/ShortPreviewList.tsx
+++ b/src/components/site/ShortPreviewList.tsx
@@ -20,7 +20,7 @@ export default async function ShortList({
 
   return (
     <>
-      <div className="xlog-shorts-preview space-y-2 border-b border-zinc-100 pb-8 mb-8 -mt-6">
+      <div className="xlog-shorts-preview space-y-2 border-b border-zinc-100 pb-6 mb-6">
         <Link href="/shorts">
           <h2 className="flex items-center font-bold text-lg">
             <i className="icon-[mingcute--ins-line] mr-1" />
diff --git a/src/components/site/SiteHome.tsx b/src/components/site/SiteHome.tsx
index f50dbccb..f68257d5 100644
--- a/src/components/site/SiteHome.tsx
+++ b/src/components/site/SiteHome.tsx
@@ -69,7 +69,7 @@ export default function SiteHome({
 
   return (
     <>
-      <Tabs items={tabs} className="border-none mb-4 -mt-3" />
+      <Tabs items={tabs} className="mb-6" type="rounded" />
       {!posts.data?.pages?.length && posts.isLoading && <>Loading...</>}
       <PostList
         posts={posts}
diff --git a/src/components/ui/Tabs.tsx b/src/components/ui/Tabs.tsx
index 5e5a83f4..b41ccbb2 100644
--- a/src/components/ui/Tabs.tsx
+++ b/src/components/ui/Tabs.tsx
@@ -21,9 +21,11 @@ export type TabItem = {
 export const Tabs = ({
   items,
   className,
+  type,
 }: {
   items: TabItem[]
   className?: string
+  type?: "rounded" | "bordered"
 }) => {
   const { t } = useTranslation("dashboard")
   const pathname = usePathname()
@@ -38,7 +40,8 @@ export const Tabs = ({
   return (
     <div
       className={cn(
-        "flex border-b space-x-5 mb-8 overflow-x-auto scrollbar-hide",
+        "flex mb-8 overflow-x-auto scrollbar-hide",
+        type === "rounded" ? "space-x-3 text-sm" : "space-x-5 border-b",
         className,
       )}
     >
@@ -52,8 +55,14 @@ export const Tabs = ({
             key={item.text}
             className={cn(
               "inline-flex items-center h-10 whitespace-nowrap cursor-pointer transition-colors focus-ring relative",
-              "after:absolute after:h-[2px] after:transition-[left,right] after:bottom-0",
-              item.active
+              type === "rounded"
+                ? "rounded-full h-8 px-3 transition-colors"
+                : "after:absolute after:h-[2px] after:transition-[left,right] after:bottom-0",
+              type === "rounded"
+                ? item.active
+                  ? "bg-zinc-950 text-white"
+                  : "bg-zinc-100 text-zinc-800 hover:bg-zinc-200"
+                : item.active
                 ? "text-black font-medium after:left-0 after:right-0 after:bg-accent"
                 : "text-gray-500 hover:text-gray-700 after:left-1/2 after:right-1/2 hover:after:left-0 hover:after:right-0 after:bg-gray-700",
             )}