62 lines
1.8 KiB
TypeScript
62 lines
1.8 KiB
TypeScript
import { cn } from "@/commons";
|
|
import { settingsQueryOptions } from "@/routes/__root";
|
|
import * as Avatar from "@radix-ui/react-avatar";
|
|
import { useSuspenseQuery } from "@tanstack/react-query";
|
|
import { minidenticon } from "minidenticons";
|
|
import { useMemo } from "react";
|
|
import { useUserContext } from "./provider";
|
|
|
|
export function UserAvatar({ className }: { className?: string }) {
|
|
const settings = useSuspenseQuery(settingsQueryOptions);
|
|
|
|
const user = useUserContext();
|
|
|
|
const picture = useMemo(() => {
|
|
if (settings.data.resize_service && user?.profile?.picture?.length) {
|
|
if (user.profile?.picture.includes("_next/")) {
|
|
return user.profile?.picture;
|
|
}
|
|
if (user.profile?.picture.includes("bsky.network")) {
|
|
return user.profile?.picture;
|
|
}
|
|
return `https://wsrv.nl?url=${user.profile?.picture}&w=100&h=100&n=-1&default=${user.profile?.picture}`;
|
|
} else {
|
|
return user?.profile?.picture;
|
|
}
|
|
}, [user]);
|
|
|
|
const fallback = useMemo(
|
|
() =>
|
|
`data:image/svg+xml;utf8,${encodeURIComponent(
|
|
minidenticon(user ? user.pubkey : "lume", 60, 50),
|
|
)}`,
|
|
[user],
|
|
);
|
|
|
|
return (
|
|
<Avatar.Root
|
|
className={cn(
|
|
"shrink-0 block overflow-hidden bg-neutral-200 dark:bg-neutral-800",
|
|
className,
|
|
)}
|
|
>
|
|
{settings.data.display_avatar ? (
|
|
<Avatar.Image
|
|
src={picture}
|
|
alt={user?.pubkey}
|
|
decoding="async"
|
|
onContextMenu={(e) => e.preventDefault()}
|
|
className="w-full aspect-square object-cover outline-[.5px] outline-black/5 content-visibility-auto contain-intrinsic-size-[auto]"
|
|
/>
|
|
) : null}
|
|
<Avatar.Fallback>
|
|
<img
|
|
src={fallback}
|
|
alt={user?.pubkey}
|
|
className="size-full bg-black dark:bg-white outline-[.5px] outline-black/5 content-visibility-auto contain-intrinsic-size-[auto]"
|
|
/>
|
|
</Avatar.Fallback>
|
|
</Avatar.Root>
|
|
);
|
|
}
|