frontend client for gemstone. decentralised workplace app
gmstn.systems
1import { Text } from "@/components/primitives/Text";
2import type { Did } from "@/lib/types/atproto";
3import { getBskyProfile } from "@/queries/get-profile";
4import { useQuery } from "@tanstack/react-query";
5import React from "react";
6import { Image, View } from "react-native";
7
8export const Avatar = React.memo(({ did }: { did: Did }) => {
9 const {
10 data: profile,
11 isPending,
12 isError,
13 } = useQuery({
14 queryKey: ["profile", did],
15 queryFn: async () => {
16 return await getBskyProfile(did);
17 },
18 });
19
20 return isPending ? (
21 <View></View>
22 ) : isError ? (
23 <Text>:(</Text>
24 ) : (
25 profile && (
26 <Image
27 style={{
28 width: 32,
29 height: 32,
30 borderRadius: 2000000000,
31 }}
32 source={{ uri: profile.avatar ?? profile.handle }}
33 />
34 )
35 );
36});
37
38Avatar.displayName = "Avatar";