frontend client for gemstone. decentralised workplace app
gmstn.systems
1import { Text } from "@/components/primitives/Text";
2import { useFacet } from "@/lib/facet";
3import { useCurrentPalette } from "@/providers/ThemeProvider";
4import { Link } from "expo-router";
5import type { StyleProp, TextStyle } from "react-native";
6import { Pressable, View } from "react-native";
7
8export const ProfileModalContent = () => {
9 const { semantic } = useCurrentPalette();
10 const { atoms } = useFacet();
11
12 const listItemStyles: StyleProp<TextStyle> = {
13 paddingLeft: 16,
14 paddingRight: 32,
15 };
16
17 return (
18 <View
19 style={{
20 marginTop: 64,
21 marginRight: 16,
22 backgroundColor: semantic.surface,
23 borderRadius: atoms.radii.lg,
24 display: "flex",
25 paddingVertical: 16,
26 gap: 4,
27 }}
28 >
29 <Link href="/profile" style={listItemStyles} asChild>
30 <LinkText label="Profile" />
31 </Link>
32 <Link href="/invites" style={listItemStyles} asChild>
33 <LinkText label="Invites" />
34 </Link>
35 <Link href="/settings" style={listItemStyles} asChild>
36 <LinkText label="Settings" />
37 </Link>
38 <Link href="/preferences" style={listItemStyles} asChild>
39 <LinkText label="Preferences" />
40 </Link>
41 <Link href="/logout" style={listItemStyles} asChild>
42 <LinkText
43 label="Log out"
44 style={{ color: semantic.negative }}
45 />
46 </Link>
47 </View>
48 );
49};
50
51const LinkText = ({
52 label,
53 style,
54 ...props
55}: {
56 label: string;
57 style?: StyleProp<TextStyle>;
58}) => {
59 return (
60 <Pressable {...props}>
61 {({ hovered }) => (
62 <Text
63 style={[
64 {
65 textDecorationLine: hovered ? "underline" : "none",
66 },
67 style,
68 ]}
69 >
70 {label}
71 </Text>
72 )}
73 </Pressable>
74 );
75};