55 lines
1.4 KiB
TypeScript
55 lines
1.4 KiB
TypeScript
import { NDKAppHandlerEvent } from "@nostr-dev-kit/ndk";
|
|
import { useQuery } from "@tanstack/react-query";
|
|
import { useArk } from "../../hooks/useArk";
|
|
|
|
export function AppHandler({ tag }: { tag: string[] }) {
|
|
const ark = useArk();
|
|
|
|
const { isLoading, isError, data } = useQuery({
|
|
queryKey: ["app-handler", tag[1]],
|
|
queryFn: async () => {
|
|
const ref = tag[1].split(":");
|
|
const event = await ark.getEventByFilter({
|
|
filter: {
|
|
kinds: [Number(ref[0])],
|
|
authors: [ref[1]],
|
|
"#d": [ref[2]],
|
|
},
|
|
});
|
|
|
|
if (!event) return null;
|
|
|
|
const app = NDKAppHandlerEvent.from(event);
|
|
return await app.fetchProfile();
|
|
},
|
|
refetchOnWindowFocus: false,
|
|
});
|
|
|
|
if (isLoading) {
|
|
<div>Loading...</div>;
|
|
}
|
|
|
|
if (isError || !data) {
|
|
return <div>Error</div>;
|
|
}
|
|
|
|
return (
|
|
<div className="flex items-center gap-2 p-2 rounded-md bg-neutral-200 dark:bg-neutral-800 hover:ring-1 hover:ring-blue-500">
|
|
<img
|
|
src={data?.picture || data?.image}
|
|
alt={data.pubkey}
|
|
decoding="async"
|
|
className="object-cover bg-white rounded-lg h-9 w-9 shrink-0 ring-1 ring-neutral-200/50 dark:ring-neutral-800/50"
|
|
/>
|
|
<div className="flex flex-col">
|
|
<div className="max-w-[15rem] truncate font-semibold text-neutral-950 dark:text-neutral-50">
|
|
{data.name}
|
|
</div>
|
|
<div className="text-sm text-neutral-600 dark:text-neutral-400 line-clamp-1">
|
|
{data.about}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|