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 { SystemsGmstnDevelopmentLattice } from "@/lib/types/lexicon/systems.gmstn.development.lattice";
5import { useCurrentPalette } from "@/providers/ThemeProvider";
6import { useLatticeInfoQuery } from "@/queries/hooks/useLatticeInfoQuery";
7import { BadgeCheck, X } from "lucide-react-native";
8import { View } from "react-native";
9
10export const LatticeInfo = ({
11 lattice,
12}: {
13 lattice: {
14 uri: Required<AtUri>;
15 value: SystemsGmstnDevelopmentLattice;
16 };
17}) => {
18 const latticeDomain = lattice.uri.rKey;
19 const { useQuery } = useLatticeInfoQuery(latticeDomain);
20 const { isLoading, data: latticeInfo } = 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>{latticeDomain}</Text>
30 {latticeInfo ? (
31 latticeInfo.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};