56 lines
1.5 KiB
TypeScript
56 lines
1.5 KiB
TypeScript
import { useQuery } from "@tanstack/react-query";
|
|
import { useTranslation } from "react-i18next";
|
|
import { useArk } from "../../provider";
|
|
import { AppHandler } from "./appHandler";
|
|
import { useNoteContext } from "./provider";
|
|
|
|
export function NIP89({ className }: { className?: string }) {
|
|
const ark = useArk();
|
|
const event = useNoteContext();
|
|
|
|
const { t } = useTranslation();
|
|
const { isLoading, isError, data } = useQuery({
|
|
queryKey: ["app-recommend", event.id],
|
|
queryFn: () => {
|
|
return ark.getAppRecommend({
|
|
unknownKind: event.kind.toString(),
|
|
author: event.pubkey,
|
|
});
|
|
},
|
|
refetchOnWindowFocus: false,
|
|
refetchOnMount: false,
|
|
staleTime: Infinity,
|
|
});
|
|
|
|
if (isLoading) {
|
|
<div>Loading...</div>;
|
|
}
|
|
|
|
if (isError || !data) {
|
|
return <div>Error</div>;
|
|
}
|
|
|
|
return (
|
|
<div className={className}>
|
|
<div className="flex flex-col rounded-lg bg-neutral-100 dark:bg-neutral-900">
|
|
<div className="inline-flex items-center justify-between h-10 px-3 border-b shrink-0 border-neutral-200 dark:border-neutral-800">
|
|
<p className="text-sm font-medium text-amber-400">
|
|
{t("nip89.unsupported")}
|
|
</p>
|
|
<p className="text-sm text-neutral-600 dark:text-neutral-400">
|
|
{event.kind}
|
|
</p>
|
|
</div>
|
|
<div className="flex flex-col flex-1 gap-2 px-3 py-3">
|
|
<span className="text-sm font-medium uppercase text-neutral-600 dark:text-neutral-400">
|
|
{t("nip89.openWith")}
|
|
</span>
|
|
{data.map((item) => (
|
|
<AppHandler key={item[1]} tag={item} />
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|