frontend client for gemstone. decentralised workplace app
gmstn.systems
1import { Text } from "@/components/primitives/Text";
2import { Avatar } from "@/components/Profile/Avatar";
3import { Name } from "@/components/Profile/Name";
4import { useFacet } from "@/lib/facet";
5import type { ShardMessage } from "@/lib/types/messages";
6import { useCurrentPalette } from "@/providers/ThemeProvider";
7import { format } from "date-fns";
8import { View } from "react-native";
9
10export const Message = ({ message }: { message: ShardMessage }) => {
11 const { typography } = useFacet();
12 const { semantic } = useCurrentPalette();
13
14 const sentAtString = format(new Date(message.sentAt), "h:mm aaa");
15
16 return (
17 <View
18 style={{
19 display: "flex",
20 flexDirection: "row",
21 justifyContent: "flex-start",
22 alignItems: "flex-start",
23 }}
24 >
25 <Avatar did={message.sentBy} />
26 <View
27 style={{
28 paddingLeft: 12,
29 borderRadius: 8,
30 }}
31 >
32 <View
33 style={{
34 flex: 1,
35 flexDirection: "row",
36 alignItems: "center",
37 gap: 4,
38 }}
39 >
40 <Name did={message.sentBy} />
41 <Text
42 style={{
43 fontSize: 12,
44 color: semantic.textTertiary,
45 }}
46 >
47 {sentAtString}
48 </Text>
49 </View>
50 <View>
51 <Text
52 style={[
53 {
54 marginBottom: 4,
55 },
56 typography.weights.byName.extralight,
57 typography.sizes.sm,
58 ]}
59 >
60 {message.content}
61 </Text>
62 </View>
63 </View>
64 </View>
65 );
66};