leaflet.pub
a tool for shared writing and social publishing
added tab component, rm activity tab from profile
cozylittle.house
+38
-56
+2
-6
app/p/[didOrHandle]/ProfilePageLayout.tsx
+2
-6
app/p/[didOrHandle]/ProfilePageLayout.tsx
···
39
39
);
40
40
};
41
41
42
-
export type profileTabsType =
43
-
| "activity"
44
-
| "posts"
45
-
| "comments"
46
-
| "subscriptions";
42
+
export type profileTabsType = "posts" | "comments" | "subscriptions";
47
43
const ProfilePageContent = (props: {
48
44
profile: {
49
45
did: string;
···
52
48
record: Json;
53
49
} | null;
54
50
}) => {
55
-
let [tab, setTab] = useState<profileTabsType>("activity");
51
+
let [tab, setTab] = useState<profileTabsType>("posts");
56
52
57
53
let profileRecord = props.profile?.record as AppBskyActorProfile.Record;
58
54
console.log(profileRecord);
+16
-29
app/p/[didOrHandle]/ProfileTabs/Tabs.tsx
+16
-29
app/p/[didOrHandle]/ProfileTabs/Tabs.tsx
···
1
+
import { Tab } from "components/Tab";
1
2
import { profileTabsType } from "../ProfilePageLayout";
2
3
3
4
export const ProfileTabs = (props: {
4
5
tab: profileTabsType;
5
6
setTab: (t: profileTabsType) => void;
6
7
}) => {
7
-
let buttonStyle = "text-secondary";
8
8
return (
9
9
<div className="flex flex-col w-full">
10
10
<div className="flex gap-2 justify-between">
11
11
<div className="flex gap-2">
12
-
<button
13
-
className={buttonStyle}
14
-
onClick={() => {
15
-
props.setTab("activity");
16
-
}}
17
-
>
18
-
Activity
19
-
</button>
20
-
<button
21
-
className={buttonStyle}
22
-
onClick={() => {
12
+
<Tab
13
+
name="Posts"
14
+
selected={props.tab === "posts"}
15
+
onSelect={() => {
23
16
props.setTab("posts");
24
17
}}
25
-
>
26
-
Posts
27
-
</button>
28
-
<button
29
-
className={buttonStyle}
30
-
onClick={() => {
18
+
/>
19
+
<Tab
20
+
name="Comments"
21
+
selected={props.tab === "comments"}
22
+
onSelect={() => {
31
23
props.setTab("comments");
32
24
}}
33
-
>
34
-
Comments
35
-
</button>
25
+
/>
36
26
</div>
37
-
<button
38
-
className={buttonStyle}
39
-
onClick={() => {
27
+
<Tab
28
+
name="Subscriptions"
29
+
selected={props.tab === "subscriptions"}
30
+
onSelect={() => {
40
31
props.setTab("subscriptions");
41
32
}}
42
-
>
43
-
Subscriptions
44
-
</button>
33
+
/>
45
34
</div>
46
35
<hr className="border-border-light mb-2 mt-1" />
47
36
</div>
···
50
39
51
40
export const TabContent = (props: { tab: profileTabsType }) => {
52
41
switch (props.tab) {
53
-
case "activity":
54
-
return <div>activty stuff here!</div>;
55
42
case "posts":
56
43
return <div>posts here!</div>;
57
44
case "comments":
+2
-21
components/PageLayouts/DashboardLayout.tsx
+2
-21
components/PageLayouts/DashboardLayout.tsx
···
25
25
import Link from "next/link";
26
26
import { ExternalLinkTiny } from "components/Icons/ExternalLinkTiny";
27
27
import { usePreserveScroll } from "src/hooks/usePreserveScroll";
28
+
import { Tab } from "components/Tab";
28
29
29
30
export type DashboardState = {
30
31
display?: "grid" | "list";
···
355
356
);
356
357
};
357
358
358
-
function Tab(props: {
359
-
name: string;
360
-
selected: boolean;
361
-
onSelect: () => void;
362
-
href?: string;
363
-
}) {
364
-
return (
365
-
<div
366
-
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"}`}
367
-
onClick={() => props.onSelect()}
368
-
>
369
-
{props.name}
370
-
{props.href && <ExternalLinkTiny />}
371
-
</div>
372
-
);
373
-
}
374
-
375
-
const FilterOptions = (props: {
376
-
hasPubs: boolean;
377
-
hasArchived: boolean;
378
-
}) => {
359
+
const FilterOptions = (props: { hasPubs: boolean; hasArchived: boolean }) => {
379
360
let { filter } = useDashboardState();
380
361
let setState = useSetDashboardState();
381
362
let filterCount = Object.values(filter).filter(Boolean).length;
+18
components/Tab.tsx
+18
components/Tab.tsx
···
1
+
import { ExternalLinkTiny } from "./Icons/ExternalLinkTiny";
2
+
3
+
export const Tab = (props: {
4
+
name: string;
5
+
selected: boolean;
6
+
onSelect: () => void;
7
+
href?: string;
8
+
}) => {
9
+
return (
10
+
<div
11
+
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"}`}
12
+
onClick={() => props.onSelect()}
13
+
>
14
+
{props.name}
15
+
{props.href && <ExternalLinkTiny />}
16
+
</div>
17
+
);
18
+
};