frontend client for gemstone. decentralised workplace app
gmstn.systems
1import { Text } from "@/components/primitives/Text";
2import { InviteUserModalContent } from "@/components/Settings/InviteUserModalContent";
3import { useFacet } from "@/lib/facet";
4import { fade } from "@/lib/facet/src/lib/colors";
5import type { SystemsGmstnDevelopmentChannel } from "@/lib/types/lexicon/systems.gmstn.development.channel";
6import { useCurrentPalette } from "@/providers/ThemeProvider";
7import { Hash, UserRoundPlus } from "lucide-react-native";
8import { useState } from "react";
9import { Modal, Pressable, View } from "react-native";
10
11export const ChannelInfo = ({
12 channel,
13}: {
14 channel: {
15 value: SystemsGmstnDevelopmentChannel;
16 uriStr: string;
17 cid: string;
18 };
19}) => {
20 const { semantic } = useCurrentPalette();
21 const { atoms } = useFacet();
22 const [showInviteModal, setShowInviteModal] = useState(false);
23
24 return (
25 <View style={{ flexDirection: "row", alignItems: "center", gap: 4 }}>
26 <Hash height={16} width={16} color={semantic.text} />
27 <Text>{channel.value.name}</Text>
28 <Pressable
29 style={{ marginLeft: 2 }}
30 onPress={() => {
31 setShowInviteModal(true);
32 }}
33 >
34 {({ hovered }) => (
35 <UserRoundPlus
36 height={16}
37 width={16}
38 color={hovered ? semantic.primary : semantic.text}
39 style={{
40 backgroundColor: hovered
41 ? semantic.surfaceVariant
42 : semantic.surface,
43 padding: 4,
44 borderRadius: atoms.radii.sm,
45 }}
46 />
47 )}
48 </Pressable>
49 <Modal
50 visible={showInviteModal}
51 onRequestClose={() => {
52 setShowInviteModal(!showInviteModal);
53 }}
54 animationType="fade"
55 transparent={true}
56 >
57 <Pressable
58 style={{
59 flex: 1,
60 cursor: "auto",
61 alignItems: "center",
62 justifyContent: "center",
63 backgroundColor: fade(semantic.backgroundDarker, 60),
64 }}
65 onPress={() => {
66 setShowInviteModal(false);
67 }}
68 >
69 <Pressable
70 style={{
71 alignSelf: "center",
72 cursor: "auto",
73 }}
74 onPress={(e) => {
75 e.stopPropagation();
76 }}
77 >
78 <InviteUserModalContent
79 setShowInviteModal={setShowInviteModal}
80 channelAtUri={channel.uriStr}
81 channelCid={channel.cid}
82 />
83 </Pressable>
84 </Pressable>
85 </Modal>
86 </View>
87 );
88};