frontend client for gemstone. decentralised workplace app
gmstn.systems
1import { Loading } from "@/components/primitives/Loading";
2import { Text } from "@/components/primitives/Text";
3import type { AtUri } from "@/lib/types/atproto";
4import type { SystemsGmstnDevelopmentShard } from "@/lib/types/lexicon/systems.gmstn.development.shard";
5import { useCurrentPalette } from "@/providers/ThemeProvider";
6import { useShardInfoQuery } from "@/queries/hooks/useShardInfoQuery";
7import { BadgeCheck, X } from "lucide-react-native";
8import { View } from "react-native";
9
10export const ShardInfo = ({
11 shard,
12}: {
13 shard: {
14 uri: Required<AtUri>;
15 value: SystemsGmstnDevelopmentShard;
16 };
17}) => {
18 const shardDomain = shard.uri.rKey;
19 const { useQuery } = useShardInfoQuery(shardDomain);
20 const { isLoading, data: shardInfo } = useQuery();
21 const { semantic } = useCurrentPalette();
22
23 return (
24 <View style={{ flexDirection: "row", gap: 6, alignItems: "center" }}>
25 {isLoading ? (
26 <Loading size="small" />
27 ) : (
28 <>
29 <Text>{shardDomain}</Text>
30 {shardInfo ? (
31 shardInfo.registered ? (
32 <BadgeCheck
33 height={16}
34 width={16}
35 color={semantic.positive}
36 />
37 ) : (
38 <X
39 height={16}
40 width={16}
41 color={semantic.negative}
42 />
43 )
44 ) : (
45 <X height={16} width={16} color={semantic.negative} />
46 )}
47 </>
48 )}
49 </View>
50 );
51};