nostr/lume
1
0
Fork 0
mirror of https://github.com/luminous-devs/lume.git synced 2024-09-19 11:43:30 +00:00
Code Issues Packages Projects Releases Wiki Activity

add trending profiles

Browse Source
This commit is contained in:
Ren Amamiya 2023-06-15 09:16:59 +07:00
parent 415552301f
commit e44ed3f58c
8 changed files with 156 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/app/space/components/notes/mentions/note.tsx
View File

@ -15,7 +15,8 @@ export const MentionNote = memo(function MentionNote({ id }: { id: string }) {
return (
<NoteWrapper
href={`/app/note?id=${id}`}
thread={id}
block={1}
className="mt-3 rounded-lg border border-zinc-800 px-3 py-3"
>
{data ? (

2
src/app/space/components/notes/metadata.tsx
View File

@ -71,7 +71,7 @@ export function NoteMetadata({
<div
onClick={(e) => e.stopPropagation()}
onKeyDown={(e) => e.stopPropagation()}
className="inline-flex items-center gap-2 w-full h-12 mt-4"
className="inline-flex items-center gap-2 w-full h-12"
>
{!data ? (
<>

1
src/app/trending/_default.page.tsx Normal file
View File

@ -0,0 +1 @@
export { LayoutTrending as Layout } from "./layout";

89
src/app/trending/components/profile.tsx Normal file
View File

@ -0,0 +1,89 @@
import { Image } from "@shared/image";
import { DEFAULT_AVATAR } from "@stores/constants";
import { compactNumber } from "@utils/number";
import { shortenKey } from "@utils/shortenKey";
import useSWR from "swr";
const fetcher = (url: string) => fetch(url).then((r) => r.json());
export function Profile({ data }: { data: any }) {
const { data: userStats, error } = useSWR(
`https://api.nostr.band/v0/stats/profile/${data.pubkey}`,
fetcher,
);
const embedProfile = data.profile ? JSON.parse(data.profile.content) : null;
const profile = embedProfile;
if (!profile)
return (
<div className="rounded-md bg-zinc-900 px-5 py-5">
<p>Can't fetch profile</p>
</div>
);
console.log(userStats);
return (
<div className="rounded-md bg-zinc-900 px-5 py-5">
<div className="flex items-center gap-2">
<div className="w-12 h-12 shrink-0">
<Image
src={profile.picture || DEFAULT_AVATAR}
className="w-12 h-12 object-cover rounded"
/>
</div>
<div className="inline-flex flex-col gap-1">
<h3 className="max-w-[15rem] truncate font-semibold text-zinc-100 leading-none">
{profile.display_name || profile.name}
</h3>
<p className="text-sm text-zinc-400 leading-none">
{profile.nip05 || shortenKey(data.pubkey)}
</p>
</div>
</div>
<div className="mt-2">
<p className="whitespace-pre-line break-words text-zinc-100">
{profile.about || profile.bio}
</p>
</div>
<div className="mt-8">
{error && <p>Failed to fetch</p>}
{!userStats ? (
<p>Loading...</p>
) : (
<div className="w-full flex items-center gap-8">
<div className="inline-flex flex-col gap-1">
<span className="leading-none font-semibold text-zinc-100">
{userStats.stats[data.pubkey].followers_pubkey_count ?? 0}
</span>
<span className="leading-none text-sm text-zinc-400">
Followers
</span>
</div>
<div className="inline-flex flex-col gap-1">
<span className="leading-none font-semibold text-zinc-100">
{userStats.stats[data.pubkey].pub_following_pubkey_count ?? 0}
</span>
<span className="leading-none text-sm text-zinc-400">
Following
</span>
</div>
<div className="inline-flex flex-col gap-1">
<span className="leading-none font-semibold text-zinc-100">
{userStats.stats[data.pubkey].zaps_received
? compactNumber.format(
userStats.stats[data.pubkey].zaps_received.msats / 1000,
)
: 0}
</span>
<span className="leading-none text-sm text-zinc-400">
Zaps received
</span>
</div>
</div>
)}
</div>
</div>
);
}

39
src/app/trending/components/trendingProfiles.tsx Normal file
View File

@ -0,0 +1,39 @@
import { NoteSkeleton } from "@app/space/components/notes/skeleton";
import { Profile } from "@app/trending/components/profile";
import useSWR from "swr";
const fetcher = (url: string) => fetch(url).then((r) => r.json());
export function TrendingProfiles() {
const { data, error } = useSWR(
"https://api.nostr.band/v0/trending/profiles",
fetcher,
);
return (
<div className="shrink-0 w-[360px] flex-col flex border-r border-zinc-900">
<div
data-tauri-drag-region
className="h-11 w-full flex items-center justify-center px-3 border-b border-zinc-900"
>
<h3 className="font-semibold text-zinc-100">Trending Profiles</h3>
</div>
<div className="scrollbar-hide flex w-full h-full flex-col justify-between gap-1.5 pt-1.5 pb-20 overflow-y-auto">
{error && <p>Failed to load...</p>}
{!data ? (
<div className="px-3 py-1.5">
<div className="rounded-md bg-zinc-900 px-3 py-3 shadow-input shadow-black/20">
<NoteSkeleton />
</div>
</div>
) : (
<div className="relative w-full flex flex-col gap-3 px-3 pt-1.5">
{data.profiles.map((item) => (
<Profile key={item.pubkey} data={item} />
))}
</div>
)}
</div>
</div>
);
}

14
src/app/trending/layout.tsx Normal file
View File

@ -0,0 +1,14 @@
import { MultiAccounts } from "@shared/multiAccounts";
import { Navigation } from "@shared/navigation";
export function LayoutTrending({ children }: { children: React.ReactNode }) {
return (
<div className="flex w-screen h-screen">
<div className="relative flex flex-row shrink-0">
<MultiAccounts />
<Navigation />
</div>
<div className="w-full h-full">{children}</div>
</div>
);
}

9
src/app/trending/pages/index.page.tsx Normal file
View File

@ -0,0 +1,9 @@
import { TrendingProfiles } from "@app/trending/components/trendingProfiles";
export function Page() {
return (
<div className="h-full w-full flex flex-nowrap overflow-x-auto overflow-y-hidden scrollbar-hide">
<TrendingProfiles />
</div>
);
}

2
src/renderer/index.css
View File

@ -15,7 +15,7 @@ button {
}
.markdown {
@apply prose prose-zinc max-w-none select-text break-words dark:prose-invert prose-p:m-0 prose-p:leading-tight prose-a:font-normal prose-a:leading-tight prose-a:text-fuchsia-500 hover:prose-a:text-fuchsia-600 prose-ol:mb-1 prose-ul:mb-1 prose-li:leading-tight prose-blockquote:m-0 prose-ol:m-0 prose-hr:mx-0 prose-hr:my-2;
@apply prose prose-zinc max-w-none select-text break-words dark:prose-invert prose-p:mt-0 prose-p:mb-2 prose-p:last:mb-0 prose-p:leading-tight prose-a:font-normal prose-a:leading-tight prose-a:text-fuchsia-500 hover:prose-a:text-fuchsia-600 prose-ol:mb-1 prose-ul:mb-1 prose-li:leading-tight prose-blockquote:m-0 prose-ol:m-0 prose-hr:mx-0 prose-hr:my-2;
}
/* For Webkit-based browsers (Chrome, Safari and Opera) */