35 lines
897 B
TypeScript
35 lines
897 B
TypeScript
import { useArk } from "@lume/ark";
|
|
import { LoaderIcon } from "@lume/icons";
|
|
import { User } from "@lume/ui";
|
|
import { useQuery } from "@tanstack/react-query";
|
|
|
|
export function EditContactScreen() {
|
|
const ark = useArk();
|
|
const { status, data } = useQuery({
|
|
queryKey: ["contacts"],
|
|
queryFn: async () => {
|
|
return await ark.getUserContacts();
|
|
},
|
|
refetchOnWindowFocus: false,
|
|
});
|
|
|
|
return (
|
|
<div className="mx-auto flex w-full max-w-xl flex-col gap-3">
|
|
{status === "pending" ? (
|
|
<div className="flex h-10 w-full items-center justify-center">
|
|
<LoaderIcon className="h-4 w-4 animate-spin" />
|
|
</div>
|
|
) : (
|
|
data.map((item) => (
|
|
<div
|
|
key={item}
|
|
className="flex h-16 w-full items-center justify-between rounded-xl bg-neutral-100 px-2.5 dark:bg-neutral-900"
|
|
>
|
|
<User pubkey={item} variant="simple" />
|
|
</div>
|
|
))
|
|
)}
|
|
</div>
|
|
);
|
|
}
|