frontend client for gemstone. decentralised workplace app
gmstn.systems
1import { GmstnLogoColor } from "@/components/icons/gmstn/GmstnLogoColor";
2import { ProfileModalContent } from "@/components/Navigation/TopBar/ProfileModalContent";
3import { useFacet } from "@/lib/facet";
4import { useProfile } from "@/providers/authed/ProfileProvider";
5import { useCurrentPalette } from "@/providers/ThemeProvider";
6import { Image } from "expo-image";
7import { Link } from "expo-router";
8import { useState } from "react";
9import { Modal, Pressable, View } from "react-native";
10
11export const TopBar = () => {
12 const { atoms } = useFacet();
13 const { profile } = useProfile();
14 const { semantic } = useCurrentPalette();
15 const [showProfileModal, setShowProfileModal] = useState(false);
16
17 return (
18 <View
19 style={{
20 flexDirection: "row",
21 justifyContent: "space-between",
22 alignItems: "center",
23 paddingRight: 16,
24 paddingVertical: 4,
25 backgroundColor: semantic.backgroundDark,
26 boxShadow: atoms.boxShadows.sm,
27 zIndex: 2,
28 }}
29 >
30 <Link href="/">
31 <View style={{ padding: 8, paddingLeft: 12, paddingTop: 12 }}>
32 <GmstnLogoColor height={36} width={36} />
33 </View>
34 </Link>
35 <Modal
36 visible={showProfileModal}
37 transparent
38 onRequestClose={() => {
39 setShowProfileModal(!showProfileModal);
40 }}
41 >
42 <Pressable
43 style={{ flex: 1, cursor: "auto" }}
44 onPress={() => {
45 setShowProfileModal(false);
46 }}
47 >
48 <Pressable
49 style={{
50 flex: 0,
51 cursor: "auto",
52 alignItems: "flex-end",
53 }}
54 onPress={(e) => {
55 e.stopPropagation();
56 }}
57 >
58 <ProfileModalContent />
59 </Pressable>
60 </Pressable>
61 </Modal>
62 <Pressable
63 hitSlop={20}
64 onPress={() => {
65 setShowProfileModal(true);
66 }}
67 >
68 {profile?.avatar && (
69 <Image
70 style={{
71 width: 42,
72 height: 42,
73 borderRadius: atoms.radii.full,
74 }}
75 source={{ uri: profile.avatar }}
76 />
77 )}
78 </Pressable>
79 </View>
80 );
81};