frontend client for gemstone. decentralised workplace app
gmstn.systems
1import { Loading } from "@/components/primitives/Loading";
2import { Text } from "@/components/primitives/Text";
3import { LatticeInfo } from "@/components/Settings/LatticeInfo";
4import { RegisterLatticeModalContent } from "@/components/Settings/RegisterLatticeModalContent";
5import { useFacet } from "@/lib/facet";
6import { fade, lighten } from "@/lib/facet/src/lib/colors";
7import { useOAuthSessionGuaranteed } from "@/providers/OAuthProvider";
8import { useCurrentPalette } from "@/providers/ThemeProvider";
9import { useLatticesQuery } from "@/queries/hooks/useLatticesQuery";
10import { Gem, Plus, Waypoints } from "lucide-react-native";
11import { useState } from "react";
12import { Modal, Pressable, View } from "react-native";
13
14export const LatticeSettings = () => {
15 const { semantic } = useCurrentPalette();
16 const { atoms, typography } = useFacet();
17 const session = useOAuthSessionGuaranteed();
18 const [showRegisterModal, setShowRegisterModal] = useState(false);
19 const { useQuery } = useLatticesQuery(session);
20
21 const { data: lattices, isLoading } = useQuery();
22
23 return isLoading ? (
24 <Loading />
25 ) : (
26 <View
27 style={{
28 borderWidth: 1,
29 borderColor: semantic.borderVariant,
30 borderRadius: atoms.radii.lg,
31 padding: 12,
32 paddingVertical: 16,
33 gap: 16,
34 width: "50%",
35 }}
36 >
37 <View
38 style={{
39 flexDirection: "row",
40 alignItems: "center",
41 marginLeft: 6,
42 gap: 6,
43 }}
44 >
45 <Waypoints height={20} width={20} color={semantic.text} />
46 <Text
47 style={[
48 typography.weights.byName.medium,
49 typography.sizes.xl,
50 ]}
51 >
52 Lattices
53 </Text>
54 </View>
55 {lattices && lattices.length > 0 && (
56 <View style={{ marginLeft: 10, gap: 8 }}>
57 <View
58 style={{
59 flexDirection: "row",
60 alignItems: "center",
61 gap: 4,
62 }}
63 >
64 <Gem height={16} width={16} color={semantic.text} />
65 <Text style={[typography.weights.byName.normal]}>
66 Your Lattices
67 </Text>
68 </View>
69 <View
70 style={{
71 gap: 4,
72 marginLeft: 8,
73 }}
74 >
75 {lattices.map((lattice, idx) => (
76 <LatticeInfo key={idx} lattice={lattice} />
77 ))}
78 </View>
79 </View>
80 )}
81 <View>
82 <Pressable
83 style={{ alignSelf: "flex-start", marginLeft: 10 }}
84 onPress={() => {
85 setShowRegisterModal(true);
86 }}
87 >
88 {({ hovered }) => (
89 <View
90 style={{
91 flexDirection: "row",
92 alignItems: "center",
93
94 gap: 4,
95 backgroundColor: hovered
96 ? lighten(semantic.primary, 7)
97 : semantic.primary,
98 alignSelf: "flex-start",
99 padding: 8,
100 paddingRight: 12,
101 borderRadius: atoms.radii.md,
102 }}
103 >
104 <Plus
105 height={16}
106 width={16}
107 color={semantic.textInverse}
108 />
109 <Text
110 style={[
111 typography.weights.byName.normal,
112 { color: semantic.textInverse },
113 ]}
114 >
115 Register
116 </Text>
117 </View>
118 )}
119 </Pressable>
120 <Modal
121 visible={showRegisterModal}
122 onRequestClose={() => {
123 setShowRegisterModal(!showRegisterModal);
124 }}
125 animationType="fade"
126 transparent={true}
127 >
128 <Pressable
129 style={{
130 flex: 1,
131 cursor: "auto",
132 alignItems: "center",
133 justifyContent: "center",
134 backgroundColor: fade(
135 semantic.backgroundDarker,
136 60,
137 ),
138 }}
139 onPress={() => {
140 setShowRegisterModal(false);
141 }}
142 >
143 <Pressable
144 style={{
145 alignSelf: "center",
146 cursor: "auto",
147 }}
148 onPress={(e) => {
149 e.stopPropagation();
150 }}
151 >
152 <RegisterLatticeModalContent
153 setShowRegisterModal={setShowRegisterModal}
154 />
155 </Pressable>
156 </Pressable>
157 </Modal>
158 </View>
159 </View>
160 );
161};