leaflet.pub
a tool for shared writing and social publishing
get home theme on profile pages
awarm.space
+60
-68
+28
app/(home-pages)/p/[didOrHandle]/ProfileLayout.tsx
+28
app/(home-pages)/p/[didOrHandle]/ProfileLayout.tsx
···
1
+
"use client";
2
+
3
+
import { useCardBorderHidden } from "components/Pages/useCardBorderHidden";
4
+
5
+
export function ProfileLayout(props: { children: React.ReactNode }) {
6
+
let borderHidden = useCardBorderHidden();
7
+
return (
8
+
<div className="h-full">
9
+
<div
10
+
id="profile-content"
11
+
className={`
12
+
${
13
+
borderHidden
14
+
? ""
15
+
: "h-full border border-border-light rounded-lg overflow-y-scroll"
16
+
}
17
+
max-w-prose
18
+
mx-auto
19
+
w-full
20
+
flex flex-col
21
+
text-center
22
+
`}
23
+
>
24
+
{props.children}
25
+
</div>
26
+
</div>
27
+
);
28
+
}
+2
-2
app/p/[didOrHandle]/(profile)/PostsContent.tsx
app/(home-pages)/p/[didOrHandle]/PostsContent.tsx
+2
-2
app/p/[didOrHandle]/(profile)/PostsContent.tsx
app/(home-pages)/p/[didOrHandle]/PostsContent.tsx
···
2
2
3
3
import { PostListing } from "components/PostListing";
4
4
import type { Post } from "app/(home-pages)/reader/getReaderFeed";
5
-
import type { Cursor } from "../getProfilePosts";
6
-
import { getProfilePosts } from "../getProfilePosts";
5
+
import type { Cursor } from "./getProfilePosts";
6
+
import { getProfilePosts } from "./getProfilePosts";
7
7
import useSWRInfinite from "swr/infinite";
8
8
import { useEffect, useRef } from "react";
9
9
-42
app/p/[didOrHandle]/(profile)/ProfileDashboardLayout.tsx
-42
app/p/[didOrHandle]/(profile)/ProfileDashboardLayout.tsx
···
1
-
"use client";
2
-
3
-
import { Actions } from "app/(home-pages)/home/Actions/Actions";
4
-
import { Footer } from "components/ActionBar/Footer";
5
-
import { Sidebar } from "components/ActionBar/Sidebar";
6
-
import {
7
-
DesktopNavigation,
8
-
MobileNavigation,
9
-
} from "components/ActionBar/Navigation";
10
-
import { MediaContents } from "components/Media";
11
-
import { Separator } from "components/Layout";
12
-
13
-
export function ProfileDashboardLayout(props: {
14
-
did: string;
15
-
children: React.ReactNode;
16
-
}) {
17
-
return (
18
-
<div
19
-
className={`dashboard pwa-padding relative max-w-(--breakpoint-lg) w-full h-full mx-auto flex sm:flex-row flex-col sm:items-stretch sm:px-6`}
20
-
>
21
-
<MediaContents mobile={false}>
22
-
<div className="flex flex-col gap-3 my-6">
23
-
<DesktopNavigation currentPage="home" />
24
-
<Sidebar alwaysOpen>
25
-
<Actions />
26
-
</Sidebar>
27
-
</div>
28
-
</MediaContents>
29
-
<div
30
-
className={`w-full h-full flex flex-col gap-2 relative overflow-y-scroll pt-3 pb-12 px-3 sm:pt-8 sm:pb-12 sm:pl-6 sm:pr-4`}
31
-
id="home-content"
32
-
>
33
-
{props.children}
34
-
</div>
35
-
<Footer>
36
-
<MobileNavigation currentPage="home" />
37
-
<Separator />
38
-
<Actions />
39
-
</Footer>
40
-
</div>
41
-
);
42
-
}
app/p/[didOrHandle]/(profile)/ProfileHeader.tsx
app/(home-pages)/p/[didOrHandle]/ProfileHeader.tsx
app/p/[didOrHandle]/(profile)/ProfileHeader.tsx
app/(home-pages)/p/[didOrHandle]/ProfileHeader.tsx
+1
-1
app/p/[didOrHandle]/(profile)/ProfileTabs.tsx
app/(home-pages)/p/[didOrHandle]/ProfileTabs.tsx
+1
-1
app/p/[didOrHandle]/(profile)/ProfileTabs.tsx
app/(home-pages)/p/[didOrHandle]/ProfileTabs.tsx
···
41
41
// const bgColor = !cardBorderHidden ? "var(--bg-leaflet)" : "var(--bg-page)";
42
42
43
43
return (
44
-
<div className="flex flex-col w-full sticky top-3 sm:top-4 z-10 sm:px-4 px-3">
44
+
<div className="flex flex-col w-full sticky top-3 sm:top-4 z-20 sm:px-4 px-3">
45
45
<div
46
46
style={
47
47
scrollPosWithinTabContent < 20
app/p/[didOrHandle]/(profile)/comments/CommentsContent.tsx
app/(home-pages)/p/[didOrHandle]/comments/CommentsContent.tsx
app/p/[didOrHandle]/(profile)/comments/CommentsContent.tsx
app/(home-pages)/p/[didOrHandle]/comments/CommentsContent.tsx
app/p/[didOrHandle]/(profile)/comments/getProfileComments.ts
app/(home-pages)/p/[didOrHandle]/comments/getProfileComments.ts
app/p/[didOrHandle]/(profile)/comments/getProfileComments.ts
app/(home-pages)/p/[didOrHandle]/comments/getProfileComments.ts
app/p/[didOrHandle]/(profile)/comments/page.tsx
app/(home-pages)/p/[didOrHandle]/comments/page.tsx
app/p/[didOrHandle]/(profile)/comments/page.tsx
app/(home-pages)/p/[didOrHandle]/comments/page.tsx
+26
-21
app/p/[didOrHandle]/(profile)/layout.tsx
app/(home-pages)/p/[didOrHandle]/layout.tsx
+26
-21
app/p/[didOrHandle]/(profile)/layout.tsx
app/(home-pages)/p/[didOrHandle]/layout.tsx
···
4
4
import { Json } from "supabase/database.types";
5
5
import { ProfileHeader } from "./ProfileHeader";
6
6
import { ProfileTabs } from "./ProfileTabs";
7
-
import { ProfileDashboardLayout } from "./ProfileDashboardLayout";
7
+
import { DashboardLayout } from "components/PageLayouts/DashboardLayout";
8
+
import { ProfileLayout } from "./ProfileLayout";
8
9
9
-
export default async function ProfileLayout(props: {
10
+
export default async function ProfilePageLayout(props: {
10
11
params: Promise<{ didOrHandle: string }>;
11
12
children: React.ReactNode;
12
13
}) {
···
45
46
if (!profile) return null;
46
47
47
48
return (
48
-
<ProfileDashboardLayout did={did}>
49
-
<div className="h-full">
50
-
<div
51
-
id="profile-content"
52
-
className={`
53
-
max-w-prose mx-auto w-full h-full
54
-
flex flex-col
55
-
border border-border-light rounded-lg
56
-
text-center
57
-
overflow-y-scroll `}
58
-
>
59
-
<ProfileHeader profile={profile} publications={publications || []} />
60
-
<ProfileTabs didOrHandle={params.didOrHandle} />
61
-
<div className="h-full pt-3 pb-4 px-3 sm:px-4 flex flex-col">
62
-
{props.children}
63
-
</div>
64
-
</div>
65
-
</div>
66
-
</ProfileDashboardLayout>
49
+
<DashboardLayout
50
+
id="profile"
51
+
defaultTab="default"
52
+
currentPage="profile"
53
+
actions={null}
54
+
tabs={{
55
+
default: {
56
+
controls: null,
57
+
content: (
58
+
<ProfileLayout>
59
+
<ProfileHeader
60
+
profile={profile}
61
+
publications={publications || []}
62
+
/>
63
+
<ProfileTabs didOrHandle={params.didOrHandle} />
64
+
<div className="h-full pt-3 pb-4 px-3 sm:px-4 flex flex-col">
65
+
{props.children}
66
+
</div>
67
+
</ProfileLayout>
68
+
),
69
+
},
70
+
}}
71
+
/>
67
72
);
68
73
}
69
74
+1
-1
app/p/[didOrHandle]/(profile)/page.tsx
app/(home-pages)/p/[didOrHandle]/page.tsx
+1
-1
app/p/[didOrHandle]/(profile)/page.tsx
app/(home-pages)/p/[didOrHandle]/page.tsx
···
1
1
import { idResolver } from "app/(home-pages)/reader/idResolver";
2
-
import { getProfilePosts } from "../getProfilePosts";
2
+
import { getProfilePosts } from "./getProfilePosts";
3
3
import { ProfilePostsContent } from "./PostsContent";
4
4
5
5
export default async function ProfilePostsPage(props: {
app/p/[didOrHandle]/(profile)/subscriptions/SubscriptionsContent.tsx
app/(home-pages)/p/[didOrHandle]/subscriptions/SubscriptionsContent.tsx
app/p/[didOrHandle]/(profile)/subscriptions/SubscriptionsContent.tsx
app/(home-pages)/p/[didOrHandle]/subscriptions/SubscriptionsContent.tsx
app/p/[didOrHandle]/(profile)/subscriptions/page.tsx
app/(home-pages)/p/[didOrHandle]/subscriptions/page.tsx
app/p/[didOrHandle]/(profile)/subscriptions/page.tsx
app/(home-pages)/p/[didOrHandle]/subscriptions/page.tsx
app/p/[didOrHandle]/getProfilePosts.ts
app/(home-pages)/p/[didOrHandle]/getProfilePosts.ts
app/p/[didOrHandle]/getProfilePosts.ts
app/(home-pages)/p/[didOrHandle]/getProfilePosts.ts