From 16b6fa89ebfffe0ef08814c009e7cf633300001a Mon Sep 17 00:00:00 2001
From: celine <celine@hyperlink.academy>
Date: Fri, 12 Dec 2025 06:48:44 +0000
Subject: [PATCH] added tab component, rm activity tab from profile

---
 components/Tab.tsx | 18 ++++++++++++++++++
 components/PageLayouts/DashboardLayout.tsx | 23 ++---------------------
 app/p/[didOrHandle]/ProfilePageLayout.tsx | 8 ++------
 app/p/[didOrHandle]/ProfileTabs/Tabs.tsx | 45 ++++++++++++++++-----------------------------
 4 file(s) changed, 38 insertion(s)(+), 56 deletion(s)(-)

diff --git a/components/Tab.tsx b/components/Tab.tsx
new file mode 100644
--- /dev/null
+++ b/components/Tab.tsx
@@ -0,0 +1,18 @@
+import { ExternalLinkTiny } from "./Icons/ExternalLinkTiny";
+
+export const Tab = (props: {
+  name: string;
+  selected: boolean;
+  onSelect: () => void;
+  href?: string;
+}) => {
+  return (
+    <div
+      className={`pubTabs px-1 py-0 flex gap-1 items-center rounded-md hover:cursor-pointer ${props.selected ? "text-accent-2 bg-accent-1 font-bold -mb-px" : "text-tertiary"}`}
+      onClick={() => props.onSelect()}
+    >
+      {props.name}
+      {props.href && <ExternalLinkTiny />}
+    </div>
+  );
+};
diff --git a/components/PageLayouts/DashboardLayout.tsx b/components/PageLayouts/DashboardLayout.tsx
--- a/components/PageLayouts/DashboardLayout.tsx
+++ b/components/PageLayouts/DashboardLayout.tsx
@@ -25,6 +25,7 @@
 import Link from "next/link";
 import { ExternalLinkTiny } from "components/Icons/ExternalLinkTiny";
 import { usePreserveScroll } from "src/hooks/usePreserveScroll";
+import { Tab } from "components/Tab";
 
 export type DashboardState = {
   display?: "grid" | "list";
@@ -355,27 +356,7 @@
   );
 };
 
-function Tab(props: {
-  name: string;
-  selected: boolean;
-  onSelect: () => void;
-  href?: string;
-}) {
-  return (
-    <div
-      className={`pubTabs px-1 py-0 flex gap-1 items-center rounded-md hover:cursor-pointer ${props.selected ? "text-accent-2 bg-accent-1 font-bold -mb-px" : "text-tertiary"}`}
-      onClick={() => props.onSelect()}
-    >
-      {props.name}
-      {props.href && <ExternalLinkTiny />}
-    </div>
-  );
-}
-
-const FilterOptions = (props: {
-  hasPubs: boolean;
-  hasArchived: boolean;
-}) => {
+const FilterOptions = (props: { hasPubs: boolean; hasArchived: boolean }) => {
   let { filter } = useDashboardState();
   let setState = useSetDashboardState();
   let filterCount = Object.values(filter).filter(Boolean).length;
diff --git a/app/p/[didOrHandle]/ProfilePageLayout.tsx b/app/p/[didOrHandle]/ProfilePageLayout.tsx
--- a/app/p/[didOrHandle]/ProfilePageLayout.tsx
+++ b/app/p/[didOrHandle]/ProfilePageLayout.tsx
@@ -39,11 +39,7 @@
   );
 };
 
-export type profileTabsType =
-  | "activity"
-  | "posts"
-  | "comments"
-  | "subscriptions";
+export type profileTabsType = "posts" | "comments" | "subscriptions";
 const ProfilePageContent = (props: {
   profile: {
     did: string;
@@ -52,7 +48,7 @@
     record: Json;
   } | null;
 }) => {
-  let [tab, setTab] = useState<profileTabsType>("activity");
+  let [tab, setTab] = useState<profileTabsType>("posts");
 
   let profileRecord = props.profile?.record as AppBskyActorProfile.Record;
   console.log(profileRecord);
diff --git a/app/p/[didOrHandle]/ProfileTabs/Tabs.tsx b/app/p/[didOrHandle]/ProfileTabs/Tabs.tsx
--- a/app/p/[didOrHandle]/ProfileTabs/Tabs.tsx
+++ b/app/p/[didOrHandle]/ProfileTabs/Tabs.tsx
@@ -1,47 +1,36 @@
+import { Tab } from "components/Tab";
 import { profileTabsType } from "../ProfilePageLayout";
 
 export const ProfileTabs = (props: {
   tab: profileTabsType;
   setTab: (t: profileTabsType) => void;
 }) => {
-  let buttonStyle = "text-secondary";
   return (
     <div className="flex flex-col w-full">
       <div className="flex gap-2 justify-between">
         <div className="flex gap-2">
-          <button
-            className={buttonStyle}
-            onClick={() => {
-              props.setTab("activity");
-            }}
-          >
-            Activity
-          </button>
-          <button
-            className={buttonStyle}
-            onClick={() => {
+          <Tab
+            name="Posts"
+            selected={props.tab === "posts"}
+            onSelect={() => {
               props.setTab("posts");
             }}
-          >
-            Posts
-          </button>
-          <button
-            className={buttonStyle}
-            onClick={() => {
+          />
+          <Tab
+            name="Comments"
+            selected={props.tab === "comments"}
+            onSelect={() => {
               props.setTab("comments");
             }}
-          >
-            Comments
-          </button>
+          />
         </div>
-        <button
-          className={buttonStyle}
-          onClick={() => {
+        <Tab
+          name="Subscriptions"
+          selected={props.tab === "subscriptions"}
+          onSelect={() => {
             props.setTab("subscriptions");
           }}
-        >
-          Subscriptions
-        </button>
+        />
       </div>
       <hr className="border-border-light mb-2 mt-1" />
     </div>
@@ -50,8 +39,6 @@
 
 export const TabContent = (props: { tab: profileTabsType }) => {
   switch (props.tab) {
-    case "activity":
-      return <div>activty stuff here!</div>;
     case "posts":
       return <div>posts here!</div>;
     case "comments":

--
tangled.sh