git.iko.soy/bridge
on df0c310 help sign in
bridge/src/views/Ops/ResidentRow.tsx
64 lines 1.8 kB history raw
1import ob from 'urbit-ob';
2import { Box, Icon, Text } from '@tlon/indigo-react';
3import { Ship } from '@urbit/roller-api';
4import Sigil from 'components/Sigil';
5import { useCallback, useRef, useState } from 'react';
6import useOnClickOutside from 'lib/useOnClickOutside';
8interface ResidentRowProps {
9 point: Ship;
10 onKick: (point: Ship) => Promise<void>;
13export const ResidentRow = ({ point, onKick }: ResidentRowProps) => {
14 const [showDropdown, setShowDropdown] = useState<boolean>(false);
15 const dropdownRef = useRef<HTMLDivElement | null>(null);
17 const handleClickOutside = useCallback((event: MouseEvent | TouchEvent) => {
18 event.stopImmediatePropagation();
19 setShowDropdown(false);
20 }, []);
22 useOnClickOutside(dropdownRef, handleClickOutside);
24 const handleKickClick = useCallback(async () => {
25 setShowDropdown(false);
26 await onKick(point);
27 }, [onKick, point]);
29 return (
30 <li key={point}>
31 <Box className={'point-wrapper'}>
32 <Box className="sigil">
33 <Box className="sigil-container">
34 <Sigil
35 icon
36 patp={ob.patp(point)}
37 size={16}
38 colors={['#000000', '#FFFFFF']}
39 />
40 </Box>
41 </Box>
42 <Box className={'patp'}>{ob.patp(point)}</Box>
43 </Box>
44 <Box className="button-wrapper" ref={dropdownRef}>
45 <Icon
46 icon="Ellipsis"
47 size="18px"
48 onClick={() => setShowDropdown(!showDropdown)}
49 />
50 {showDropdown && (
51 <>
52 <Box
53 className="close-background"
54 onClick={() => setShowDropdown(false)}
55 />
56 <Box className="kick-dropdown" onClick={handleKickClick}>
57 <Text>Kick</Text>
58 </Box>
59 </>
60 )}
61 </Box>
62 </li>
63 );
64};