69 lines
2.4 KiB
TypeScript
69 lines
2.4 KiB
TypeScript
import { useQuery } from '@tanstack/react-query';
|
|
import { VList } from 'virtua';
|
|
|
|
import { LoaderIcon } from '@shared/icons';
|
|
import { TitleBar } from '@shared/titleBar';
|
|
import { WidgetWrapper } from '@shared/widgets';
|
|
import { NostrBandUserProfile, type Profile } from '@shared/widgets/nostrBandUserProfile';
|
|
|
|
import { Widget } from '@utils/types';
|
|
|
|
interface Response {
|
|
profiles: Array<{ pubkey: string }>;
|
|
}
|
|
|
|
export function TrendingAccountsWidget({ params }: { params: Widget }) {
|
|
const { status, data } = useQuery({
|
|
queryKey: ['trending-profiles-widget'],
|
|
queryFn: async () => {
|
|
const res = await fetch('https://api.nostr.band/v0/trending/profiles');
|
|
if (!res.ok) {
|
|
throw new Error('Error');
|
|
}
|
|
const json: Response = await res.json();
|
|
if (!json.profiles) return [];
|
|
return json.profiles;
|
|
},
|
|
refetchOnMount: false,
|
|
refetchOnReconnect: false,
|
|
refetchOnWindowFocus: false,
|
|
staleTime: Infinity,
|
|
});
|
|
|
|
return (
|
|
<WidgetWrapper>
|
|
<TitleBar id={params.id} title="Trending Accounts" />
|
|
<div className="flex-1">
|
|
{status === 'pending' ? (
|
|
<div className="flex h-full w-full items-center justify-center ">
|
|
<div className="inline-flex flex-col items-center justify-center gap-2">
|
|
<LoaderIcon className="h-5 w-5 animate-spin text-black dark:text-white" />
|
|
<p className="text-sm font-medium text-neutral-500 dark:text-neutral-300">
|
|
Loading trending accounts...
|
|
</p>
|
|
</div>
|
|
</div>
|
|
) : status === 'error' ? (
|
|
<div className="flex h-full w-full flex-col items-center justify-center px-3">
|
|
<div className="flex flex-col items-center gap-4">
|
|
<img src="/ghost.png" alt="empty feeds" className="h-16 w-16" />
|
|
<div className="text-center">
|
|
<h3 className="font-semibold leading-tight text-neutral-500 dark:text-neutral-300">
|
|
Sorry, an unexpected error has occurred.
|
|
</h3>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
) : (
|
|
<VList className="h-full">
|
|
{data.map((item: Profile) => (
|
|
<NostrBandUserProfile key={item.pubkey} data={item} />
|
|
))}
|
|
<div className="h-16" />
|
|
</VList>
|
|
)}
|
|
</div>
|
|
</WidgetWrapper>
|
|
);
|
|
}
|