39 lines
1.3 KiB
TypeScript
39 lines
1.3 KiB
TypeScript
import { useQuery } from '@tanstack/react-query';
|
|
|
|
import { Profile } from '@app/trending/components/profile';
|
|
|
|
import { NoteSkeleton } from '@shared/notes/skeleton';
|
|
import { TitleBar } from '@shared/titleBar';
|
|
|
|
export function TrendingProfiles() {
|
|
const { status, data, error } = useQuery(['trending-profiles'], async () => {
|
|
const res = await fetch('https://api.nostr.band/v0/trending/profiles');
|
|
if (!res.ok) {
|
|
throw new Error('Error');
|
|
}
|
|
return res.json();
|
|
});
|
|
|
|
return (
|
|
<div className="flex w-[360px] shrink-0 flex-col border-r border-zinc-900">
|
|
<TitleBar title="Trending Profiles" />
|
|
<div className="scrollbar-hide flex h-full w-full flex-col justify-between gap-1.5 overflow-y-auto pb-20 pt-1.5">
|
|
{error && <p>Failed to fetch</p>}
|
|
{status === 'loading' ? (
|
|
<div className="px-3 py-1.5">
|
|
<div className="shadow-input rounded-md bg-zinc-900 px-3 py-3 shadow-black/20">
|
|
<NoteSkeleton />
|
|
</div>
|
|
</div>
|
|
) : (
|
|
<div className="relative flex w-full flex-col gap-3 px-3 pt-3">
|
|
{data.profiles.map((item) => (
|
|
<Profile key={item.pubkey} data={item} />
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|