wisesplit/components/Person.tsx

34 lines
719 B
TypeScript
Raw Normal View History

2022-10-24 07:10:52 +00:00
import { Atom, useAtom } from "jotai";
import { Badge, ListGroup } from "react-bootstrap";
2022-10-24 07:10:52 +00:00
export interface IPerson {
name: string;
}
export interface Props {
personAtom: Atom<IPerson>;
}
export default function Person({ personAtom, splitBetweenAtom }: Props) {
const [person] = useAtom(personAtom);
const [splitBetween, setSplitBetween] = useAtom(splitBetweenAtom);
const removeSelf = (_) => {
setSplitBetween([...splitBetween.filter((x) => x != personAtom)]);
};
return (
<ListGroup.Item>
{person.name}
<Badge
bg="danger"
pill
onClick={removeSelf}
style={{ cursor: "pointer" }}
>
&times;
</Badge>
</ListGroup.Item>
);
2022-10-24 07:10:52 +00:00
}