revite/src/context/intermediate/popovers/PendingRequests.tsx

import styles from "./UserPicker.module.scss";
import { Text } from "preact-i18n";

import Modal from "../../../components/ui/Modal";

import { Friend } from "../../../pages/friends/Friend";
import { useUsers } from "../../revoltjs/hooks";

interface Props {
	users: string[];
	onClose: () => void;
}

export function PendingRequests({ users: ids, onClose }: Props) {
	const users = useUsers(ids);

	return (
		<Modal
			visible={true}
			title={<Text id="app.special.friends.pending" />}
			onClose={onClose}>
			<div className={styles.list}>
				{users
					.filter((x) => typeof x !== "undefined")
					.map((x) => (
						<Friend user={x!} key={x!._id} />
					))}
			</div>
		</Modal>
	);
}