80 lines
2.0 KiB
TypeScript
80 lines
2.0 KiB
TypeScript
import { Box, Text } from "ink";
|
|
import { Popup } from "../ui/Popup.js";
|
|
import { useFreeSize } from "../../hooks/size.js";
|
|
import { useDataResidentsByAbodeId } from "../../../react/hooks/data/residents.js";
|
|
import { AbodeName } from "../ui/AbodeName.js";
|
|
import { SearchPanel } from "../ui/SearchPanel.js";
|
|
import type { Resident } from "../../../db/types/Resident.js";
|
|
import { UserName } from "../ui/UserName.js";
|
|
import { ButtonList } from "../ui/Button.js";
|
|
|
|
function AbodeResidentComponent({
|
|
item,
|
|
selected,
|
|
}: {
|
|
item: Resident;
|
|
selected: boolean;
|
|
}) {
|
|
return (
|
|
<Box height={1} flexDirection="row" justifyContent="space-between">
|
|
<Text underline={selected}>
|
|
<UserName uid={item.uid} />
|
|
</Text>
|
|
{selected && (
|
|
<ButtonList
|
|
isFocused
|
|
buttons={[
|
|
{
|
|
children: "Delete",
|
|
onClick: () => {},
|
|
},
|
|
{
|
|
children: "Delete",
|
|
onClick: () => {},
|
|
},
|
|
{
|
|
children: "Delete",
|
|
onClick: () => {},
|
|
},
|
|
]}
|
|
/>
|
|
)}
|
|
</Box>
|
|
);
|
|
}
|
|
|
|
export function AbodeResidentsPopup({
|
|
aid,
|
|
onClose,
|
|
}: {
|
|
aid: string;
|
|
onClose: () => void;
|
|
}) {
|
|
const { width, height } = useFreeSize();
|
|
const { residents, status, refresh } = useDataResidentsByAbodeId(aid);
|
|
|
|
return (
|
|
<Popup onClose={onClose}>
|
|
<Box flexDirection="column" minWidth={width / 3}>
|
|
<Box justifyContent="center" flexDirection="row">
|
|
<Text>
|
|
Residents of{" "}
|
|
<Text color="yellow" bold>
|
|
<AbodeName aid={aid} />
|
|
</Text>
|
|
</Text>
|
|
<Box height={1} />
|
|
</Box>
|
|
<SearchPanel
|
|
sub
|
|
status={status}
|
|
items={residents}
|
|
refresh={refresh}
|
|
height={Math.min(height, Math.max(Math.floor(height / 2), 20))}
|
|
ItemComponent={AbodeResidentComponent}
|
|
/>
|
|
</Box>
|
|
</Popup>
|
|
);
|
|
}
|