Errors fix

Author: luloxi

packages/nextjs/app/profile/[address]/page.tsx

@@ -21,7 +21,7 @@ export interface Post extends Partial<NFTMetaData> {
 }
 
 const ProfilePage: NextPage = () => {
-  const [activeTab, setActiveTab] = useState("Listed");
+  const [activeTab, setActiveTab] = useState("Bought");
 
   const handleTabClick = (tab: any) => {
     setActiveTab(tab);
@@ -38,34 +38,29 @@ const ProfilePage: NextPage = () => {
   return (
     <>
       <ProfileInfo address={address} />
-      <div className="flex flex-col items-center justify-center">
-        <div className="tabs-bar ">
-          <button className={`tab  ${activeTab === "Listed" ? "active" : ""}`} onClick={() => handleTabClick("Listed")}>
-            Listed
-          </button>
+      <div className="flex items-center justify-center">
+        <div className="tabs-bar overflow-x-auto whitespace-nowrap flex">
           <button className={`tab ${activeTab === "Bought" ? "active" : ""}`} onClick={() => handleTabClick("Bought")}>
             Bought
           </button>
-          <button className={`tab 0 ${activeTab === "Saved" ? "active" : ""}`} onClick={() => handleTabClick("Saved")}>
+          <button className={`tab ${activeTab === "Saved" ? "active" : ""}`} onClick={() => handleTabClick("Saved")}>
             Saved
           </button>
+          <button className={`tab ${activeTab === "Listed" ? "active" : ""}`} onClick={() => handleTabClick("Listed")}>
+            Listed
+          </button>
           <button
             className={`tab text-red-600 ${activeTab === "Activity" ? "active" : ""}`}
             onClick={() => handleTabClick("Activity")}
           >
             Activity
           </button>
-          <button
-            className={`tab text-red-600 ${activeTab === "Revenue" ? "active" : ""}`}
-            onClick={() => handleTabClick("Revenue")}
-          >
-            Revenue
-          </button>
         </div>
-        {activeTab === "Listed" && <ListedArticles />}
-        {activeTab === "Bought" && <BoughtArticles />}
-        {activeTab === "Saved" && <BookmarkedArticles />}
       </div>
+
+      {activeTab === "Bought" && <BoughtArticles />}
+      {activeTab === "Saved" && <BookmarkedArticles />}
+      {activeTab === "Listed" && <ListedArticles />}
     </>
   );
 };

packages/nextjs/app/profile/_components/ProfileInfo.tsx

@@ -87,13 +87,13 @@ const ProfileInfo: React.FC<ProfileInfoProps> = ({ address }) => {
     <div>
       {/* User Profile Section */}
       {loadingProfile ? (
-        <div className="relative flex flex-col md:flex-row justify-between items-center bg-base-100 p-6 rounded-lg shadow-md w-full m-2">
-          <div className="flex items-center justify-center w-full h-full">
+        <div className="relative flex flex-col md:flex-row justify-between items-center bg-base-100 p-6 rounded-lg shadow-md w-full my-2">
+          <div className="flex items-center justify-center w-full">
             <LoadingBars />
           </div>
         </div>
       ) : (
-        <div className="relative flex flex-col md:flex-row justify-between items-center bg-base-100 p-6 rounded-lg shadow-md w-full m-2">
+        <div className="relative flex flex-col md:flex-row justify-between items-center bg-base-100 p-6 rounded-lg shadow-md w-full my-2">
           {/* Profile Picture */}
           <div className="avatar ">
             <ProfilePictureUpload

packages/nextjs/styles/globals.css

@@ -31,7 +31,7 @@
   display: flex;
   justify-content: center;
   items-align: center;
-  padding-bottom: 7px;
+  padding-bottom: 8px;
   border-bottom: 1px solid;
   max-width: 500px;
 }