frontend client for gemstone. decentralised workplace app
gmstn.systems
1import { Text } from "@/components/primitives/Text";
2import { useFacet } from "@/lib/facet";
3import type { AtUri } from "@/lib/types/atproto";
4import type { SystemsGmstnDevelopmentChannel } from "@/lib/types/lexicon/systems.gmstn.development.channel";
5import { useCurrentPalette } from "@/providers/ThemeProvider";
6import { Link, usePathname } from "expo-router";
7import { Hash } from "lucide-react-native";
8import { useState } from "react";
9import { View } from "react-native";
10import { Pressable } from "react-native-gesture-handler";
11
12export const ChannelPickerItem = ({
13 channel,
14 channelAtUri,
15}: {
16 channel: SystemsGmstnDevelopmentChannel;
17 channelAtUri: AtUri;
18}) => {
19 const { semantic, colors } = useCurrentPalette();
20 const { typography, atoms } = useFacet();
21 const path = usePathname();
22 const [hovered, setHovered] = useState(false);
23
24 const { authority, collection, rKey } = channelAtUri;
25
26 if (!collection || !rKey)
27 throw new Error(
28 "Channel at:// URI object provided to channel picker item must contain a collection and rkey fields.",
29 );
30
31 const pathRKey = path.split("/")[3];
32
33 const isCurrentChannel = pathRKey === rKey;
34
35 const hoverHandler = () => {
36 setHovered((hovered) => !hovered);
37 };
38
39 return (
40 <Pressable onHoverIn={hoverHandler} onHoverOut={hoverHandler}>
41 <Link href={`/${authority}/channel/${rKey}`}>
42 <View
43 style={{
44 flex: 1,
45 flexDirection: "row",
46 alignItems: "center",
47 paddingLeft: 8,
48 paddingRight: 8,
49 paddingTop: 4,
50 paddingBottom: 5,
51 gap: 8,
52 backgroundColor:
53 isCurrentChannel || hovered
54 ? semantic.surface
55 : undefined,
56 borderRadius: atoms.radii.lg,
57 width: 196,
58 }}
59 >
60 <Hash
61 style={{
62 height: 16,
63 width: 16,
64 }}
65 color={
66 isCurrentChannel || hovered
67 ? colors.text
68 : colors.overlay2
69 }
70 />
71 <Text
72 style={[
73 {
74 color:
75 isCurrentChannel || hovered
76 ? colors.text
77 : colors.overlay2,
78 },
79 typography.sizes.sm,
80 ]}
81 >
82 {channel.name}
83 </Text>
84 </View>
85 </Link>
86 </Pressable>
87 );
88};