40 lines
1.2 KiB
TypeScript
40 lines
1.2 KiB
TypeScript
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>
|
|
);
|
|
}
|