63 lines
1.8 KiB
TypeScript
63 lines
1.8 KiB
TypeScript
import { useQuery } from '@tanstack/react-query';
|
|
|
|
import { type Profile, UserProfile } from '@app/space/components/userProfile';
|
|
|
|
import { NoteSkeleton } from '@shared/notes/skeleton';
|
|
import { TitleBar } from '@shared/titleBar';
|
|
|
|
import { Widget } from '@utils/types';
|
|
|
|
interface Response {
|
|
profiles: Array<{ pubkey: string }>;
|
|
}
|
|
|
|
export function TrendingProfilesWidget({ params }: { params: Widget }) {
|
|
const { status, data } = useQuery(
|
|
['trending-profiles-widget'],
|
|
async () => {
|
|
const res = await fetch(params.content);
|
|
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 (
|
|
<div className="scrollbar-hide relative shrink-0 grow-0 basis-[400px] overflow-y-auto bg-white/10">
|
|
<TitleBar id={params.id} title={params.title} />
|
|
<div className="h-full">
|
|
{status === 'loading' ? (
|
|
<div className="px-3 py-1.5">
|
|
<div className="rounded-xl bg-white/10 px-3 py-3">
|
|
<NoteSkeleton />
|
|
</div>
|
|
</div>
|
|
) : status === 'error' ? (
|
|
<div className="px-3 py-1.5">
|
|
<div className="rounded-xl bg-white/10 px-3 py-3">
|
|
<p className="text-center text-sm font-medium text-white">
|
|
Sorry, an unexpected error has occurred.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
) : (
|
|
<div className="relative flex w-full flex-col gap-3 px-3 pt-1.5">
|
|
{data.map((item: Profile) => (
|
|
<UserProfile key={item.pubkey} data={item} />
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|