react-icons/ai#AiOutlineDelete JavaScript Examples

The following examples show how to use react-icons/ai#AiOutlineDelete. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: Todos.js    From react-portal with MIT License 4 votes vote down vote up
Todos = () => {
	const [todo, setTodo] = useState("");
	const [refresh, setRefresh] = useState(false);
	const [todos, setTodos] = useState(null);
	const [edit, setEdit] = useState(null);
	const [visible, setVisible] = useState(false);
	const [isTodoInputValid, setIsTodoInputValid] = useState(true);
	const [isRateLimited, setIsRateLimited] = useState(false);

	useEffect(() => {
		(async () => {
			try {
				const res = await getTodo();
				if (!res.error && res.message === "success") {
					setTodos(res.data);
				}
			} catch (err) {
				console.log(err);
			}
		})();
		if (todos) {
			localStorage.setItem("todos", JSON.stringify(todos));
		}
		// eslint-disable-next-line react-hooks/exhaustive-deps
	}, [refresh]);

	const handleOnChangeTodo = val => {
		if (todo && !val) {
			if (!isTodoInputValid) setIsTodoInputValid(true);
			setTodo("");
			return;
		}
		if (val.length < 7 && isTodoInputValid) setIsTodoInputValid(false);
		if (val.length >= 7 && !isTodoInputValid) setIsTodoInputValid(true);
		setTodo(val);
	};

	const handleAddTodo = async val => {
		if (!val || val.trim().length < 7) return;
		try {
			const res = await addTodo({ title: val.trim() });
			if (!res.error && res.message === "success") {
				setRefresh(!refresh);
			}
		} catch (err) {
			console.log(err);
			if (err.message.includes("Temporarily blocked") && !isRateLimited) {
				setTodo("");
				setIsTodoInputValid(true);
				setIsRateLimited(true);
				_notification("error", "Warning", err.message);
				setTimeout(() => {
					setIsRateLimited(false);
				}, 60000);
			}
		}
		setTodo("");
	};

	const handleTodoCompletion = async todo => {
		try {
			const res = await updateTodo(todo._id, {
				status: todo.status === "pending" ? "complete" : "pending"
			});
			if (!res.error && res.message === "success") {
				setRefresh(!refresh);
			}
		} catch (err) {
			console.log(err);
		}
	};

	const handleDeleteTodo = async todo => {
		try {
			const res = await deleteTodo(todo._id);
			if (!res.error && res.message === "success") {
				setRefresh(!refresh);
			}
		} catch (err) {
			console.log(err);
		}
	};

	const handleDeleteAllTodo = async () => {
		try {
			const res = await deleteAllTodo();
			if (!res.error && res.message === "success") {
				setRefresh(!refresh);
				_notification(
					"success",
					"ToDo Deleted",
					"All ToDo were successfully deleted"
				);
			}
		} catch (err) {
			_notification("error", "Error", err.message);
		}
	};

	return (
		<>
			<Card>
				<div
					style={{
						display: "flex",
						justifyContent: "space-between"
					}}
				>
					<h2 style={{ fontWeight: 700 }}>Todo</h2>
					<span>
						<Popconfirm
							title="Do you want to delete all Todo ?"
							onConfirm={handleDeleteAllTodo}
							okText="Yes"
							cancelText="No"
							disabled={
								todos && todos.length === 0 ? true : false
							}
						>
							<Tooltip title="Delete All">
								<Button
									danger
									disabled={
										todos && todos.length === 0
											? true
											: false
									}
								>
									<AiOutlineDelete
										style={{
											paddingTop: "3px",
											color: "#ffffff",
											fontSize: "20px"
										}}
									/>
								</Button>
							</Tooltip>
						</Popconfirm>
					</span>
				</div>
				<hr />
				<div>
					{todos && todos.length > 0
						? todos.map(todo => (
								<Row
									key={todo._id}
									style={
										todo.status !== "pending"
											? {
													display: "flex",
													flexDirection: "row",
													overflowWrap: "anywhere",
													alignItems: "center",
													margin: "5px 0px",
													padding: "2px 5px",
													borderRadius: "4px",
													border: "1px solid rgb(24,144,255,0.3)",
													backgroundColor:
														"rgb(24,144,255,0.05)"
											  }
											: {
													display: "flex",
													flexDirection: "row",
													overflowWrap: "anywhere",
													alignItems: "center",
													margin: "5px 0px",
													padding: "2px 5px",
													borderRadius: "4px",
													border: "1px solid rgb(191,191,191,.3)",
													backgroundColor:
														"rgb(191,191,191,.05)"
											  }
									}
								>
									<Col span={20}>
										<Checkbox
											style={{
												display: "flex",
												flexDirection: "row",
												overflowWrap: "anywhere",
												alignItems: "center",
												paddingBottom: "3px"
											}}
											checked={
												todo.status === "complete"
													? true
													: false
											}
											onChange={() =>
												handleTodoCompletion(todo)
											}
										>
											<span
												style={
													todo.status === "complete"
														? {
																textDecoration:
																	"line-through"
														  }
														: {}
												}
											>
												{todo.title}
											</span>
										</Checkbox>
									</Col>
									<Col span={2}>
										<AiOutlineEdit
											type="edit"
											onClick={() => {
												setVisible(true);
												setEdit(todo);
											}}
											style={{
												fontSize: "16px",
												color: "#F4B400",
												float: "right",
												cursor: "pointer"
											}}
										/>
									</Col>
									<Col span={2}>
										<Popconfirm
											title="Do you want to delete this Todo ?"
											onConfirm={() =>
												handleDeleteTodo(todo)
											}
											okText="Yes"
											cancelText="No"
										>
											<AiOutlineDelete
												style={{
													fonTSize: "16px",
													color: "#DB4437",
													float: "right",
													cursor: "pointer"
												}}
											/>
										</Popconfirm>
									</Col>
								</Row>
						  ))
						: "No Todo"}
				</div>
				<div
					style={{
						backgroundColor: "#F4B400",
						padding: 2,
						marginBottom: 8,
						marginTop: 16
					}}
				></div>
				<Input
					maxLength="72"
					width={100}
					placeholder="Type your To Do"
					allowClear
					value={todo}
					onChange={e => handleOnChangeTodo(e.target.value)}
					onPressEnter={e => handleAddTodo(e.target.value)}
					style={!isTodoInputValid ? { borderColor: "red" } : {}}
					disabled={isRateLimited}
				/>
			</Card>
			<EditTodoModal
				visible={visible}
				handleVisible={setVisible}
				todo={edit}
				refresh={refresh}
				setRefresh={setRefresh}
			/>
		</>
	);
}
Example #2
Source File: TaskInfoCard.js    From react-portal with MIT License 4 votes vote down vote up
TaskInfoCard = ({
	data,
	refreshTasks,
	setRefreshTasks,
	onClick,
	userData
}) => {
	const [showInfo, setShowInfo] = useState(false);
	const [show, setShow] = useState(false);

	const deleteTask = async (e, id) => {
		e.stopPropagation();
		try {
			const res = await deleteTaskService(id);
			if (!res.error && res.message === "success") {
				setRefreshTasks(!refreshTasks);
				_notification("success", "Success", "Successfully Deleted!");
			}
		} catch (err) {
			_notification("error", "Error", err.message);
		}
	};

	const showTaskInfo = e => {
		e.stopPropagation();
		setShowInfo(true);
	};

	const editTask = e => {
		e.stopPropagation();
		setShow(true);
	};

	return (
		<>
			<Card hoverable onClick={onClick}>
				<Row
					style={{
						display: "flex",
						justifyContent: "space-between",
						alignItems: "center",
						textTransform: "capitalize",
						paddingBottom: "6px"
					}}
				>
					<Col style={{ overflowWrap: "anywhere" }}>{data.title}</Col>
					<Col>
						<Row>
							<AiOutlineInfoCircle
								color="#4285F4"
								style={{
									marginLeft: "8px",
									height: "1.25em",
									width: "1.25em"
								}}
								onClick={e => showTaskInfo(e)}
							/>
							{(userData.role === "lead" ||
								data.headIds.includes(userData.id)) && (
								<>
									<Popconfirm
										onClick={e => e.stopPropagation()}
										okText="Yes"
										cancelText="No"
										title="Are you sure to delete this task?"
										onConfirm={e => {
											deleteTask(e, data._id);
										}}
										onCancel={e => e.stopPropagation()}
									>
										<AiOutlineDelete
											color="#DB4437"
											style={{
												marginLeft: "8px",
												height: "1.25em",
												width: "1.25em"
											}}
										/>
									</Popconfirm>

									<BiEditAlt
										color="#F4B400"
										style={{
											marginLeft: "8px",
											height: "1.25em",
											width: "1.25em"
										}}
										onClick={e => editTask(e, data._id)}
									/>
								</>
							)}
						</Row>
					</Col>
				</Row>
				<Row
					style={{
						alignItems: "center",
						justifyContent: "space-between",
						paddingTop: "12px"
					}}
				>
					<Tag color="green">{data.createdAt.split("T")[0]}</Tag>
					<Avatar.Group
						size="small"
						maxCount={3}
						maxStyle={{
							color: "#f56a00",
							backgroundColor: "#fde3cf"
						}}
					>
						{data.taskAssigneeData.map(data => (
							<Tooltip
								title={data.userData[0].name}
								placement="top"
								key={data._id}
							>
								<Avatar src={data.userData[0].image} />
							</Tooltip>
						))}
					</Avatar.Group>
				</Row>
			</Card>

			<InfoModal
				setShowInfo={setShowInfo}
				showInfo={showInfo}
				data={data}
			/>

			<Drawer
				title="Edit Task"
				placement="right"
				closable={true}
				width={"100%"}
				destroyOnClose={true}
				onClose={() => setShow(false)}
				visible={show}
			>
				<EditTask data={data} setShow={setShow} />
			</Drawer>
		</>
	);
}
Example #3
Source File: TeamList.js    From react-portal with MIT License 4 votes vote down vote up
TeamList = props => {
	const [users, setUsers] = useState([]);
	const [refresh, toggleRefresh] = useState(false);
	const [isLoading, setIsLoading] = useState(false);
	const [uid, setUID] = useState(null);
	const [profileModal, setProfileModal] = useState(false);
	const [userData] = useState(getRole());
	const [editRole, setEditRole] = useState(null);
	const [editDesignation, setEditDesignation] = useState(null);
	const [newDesignation, setNewDesignation] = useState(null);
	const [branchOptions, setBranchOptions] = useState([]);
	const [yearOptions, setYearOptions] = useState([]);
	const [searchText, setSearchText] = useState("");
	const [searchedColumn, setSearchedColumn] = useState("");
	const [page, setPage] = useState(1);
	const ref = useRef();

	const { Option } = Select;

	useEffect(() => {
		let arrayBranches = [];
		let arrayYears = [];
		(async () => {
			setIsLoading(true);
			try {
				let params = {
					sortBy: "name"
				};
				const { data } = await getUsersService(params);
				setUsers(data);
				data.map(item => {
					if (
						item.branch &&
						!arrayBranches.filter(
							branch => branch.text === item.branch
						).length
					) {
						arrayBranches.push({
							text: item.branch,
							value: item.branch
						});
					}
					if (
						item.year &&
						!arrayYears.filter(
							year => year.text === String(item.year)
						).length
					) {
						arrayYears.push({
							text: String(item.year),
							value: String(item.year)
						});
					}
					return null;
				});
				setBranchOptions(arrayBranches);
				setYearOptions(arrayYears);

				setIsLoading(false);
			} catch (err) {
				_notification("warning", "Error", err.message);
			}
		})();
		// eslint-disable-next-line react-hooks/exhaustive-deps
	}, [refresh]);

	const getColumnSearchProps = dataIndex => ({
		filterDropdown: ({
			setSelectedKeys,
			selectedKeys,
			confirm,
			clearFilters
		}) => (
			<div style={{ padding: 8 }}>
				<Input
					ref={ref}
					placeholder={`Search ${dataIndex}`}
					value={selectedKeys[0]}
					onChange={e =>
						setSelectedKeys(e.target.value ? [e.target.value] : [])
					}
					onPressEnter={() =>
						handleSearch(selectedKeys, confirm, dataIndex)
					}
					style={{ width: 188, marginBottom: 8, display: "block" }}
				/>
				<Space>
					<Button
						type="primary"
						size="small"
						onClick={() =>
							handleSearch(selectedKeys, confirm, dataIndex)
						}
						icon={
							<AiOutlineSearch style={{ marginRight: "8px" }} />
						}
						style={{
							width: 90,
							display: "flex",
							justifyContent: "center",
							alignItems: "center"
						}}
					>
						Search
					</Button>
					<Button
						onClick={() => handleReset(clearFilters)}
						size="small"
						style={{ width: 90 }}
					>
						Reset
					</Button>
				</Space>
			</div>
		),
		filterIcon: filtered => (
			<div
				style={{
					height: "100%",
					justifyContent: "center",
					display: "flex",
					alignItems: "center"
				}}
			>
				<AiOutlineSearch
					style={{
						color: filtered ? "#1890ff" : undefined,
						fontSize: "16px"
					}}
				/>
			</div>
		),
		onFilter: (value, record) =>
			record[dataIndex]
				? record[dataIndex]
						.toString()
						.toLowerCase()
						.includes(value.toLowerCase())
				: "",
		render: text =>
			searchedColumn === dataIndex ? (
				<Highlighter
					highlightStyle={{ backgroundColor: "#ffc069", padding: 0 }}
					searchWords={[searchText]}
					autoEscape
					textToHighlight={text ? text.toString() : ""}
				/>
			) : (
				text
			)
	});

	const handleSearch = (selectedKeys, confirm, dataIndex) => {
		confirm();
		setSearchText(selectedKeys[0]);
		setSearchedColumn(dataIndex);
	};

	const handleReset = clearFilters => {
		clearFilters();
		setSearchText(" ");
	};

	const handleAddMember = () => {
		toggleRefresh(!refresh);
	};

	const handleEdit = async val => {
		if (editRole) {
			try {
				const res = await editService(editRole, { role: val });
				if (!res.error && res.message === "success") {
					_notification(
						"success",
						"Success",
						"Role changed successfully !"
					);
					toggleRefresh(!refresh);
				}
			} catch (err) {
				_notification("error", "Error", err.message);
			}
			setEditRole(null);
		}
		if (editDesignation) {
			try {
				const res = await editService(editDesignation, {
					designation: val
				});
				if (!res.error && res.message === "success") {
					_notification(
						"success",
						"Success",
						"Designation changed successfully !"
					);
					toggleRefresh(!refresh);
				}
			} catch (err) {
				_notification("error", "Error", err.message);
			}
			setEditDesignation(null);
		}
	};

	const handleChangeWebsiteSeen = async userId => {
		try {
			const res = await toggleWebsiteSeen(userId);
			if (res.message === "success") {
				toggleRefresh(!refresh);
				_notification("success", "Success", "Show on website changed");
			} else {
				_notification("warning", "Error", res.message);
			}
		} catch (err) {
			_notification("error", "Error", err.message);
		}
	};

	const handleUserRevoke = async userId => {
		try {
			const res = await toggleUserRevoke(userId);
			if (res.message === "success") {
				toggleRefresh(!refresh);
				_notification("success", "Success", "Toggle User Revoke");
			} else {
				_notification("warning", "Error", res.message);
			}
		} catch (err) {
			_notification("error", "Error", err.message);
		}
	};

	const handleUserDelete = async userId => {
		try {
			const res = await deleteUser(userId);
			if (res.message === "success") {
				toggleRefresh(!refresh);
				_notification("success", "Success", "User deleted");
			} else {
				_notification("warning", "Error", res.message);
			}
		} catch (err) {
			_notification("error", "Error", err.message);
		}
	};
	const handleHover = (value, uid) => {
		setProfileModal(value);
		setUID(uid);
	};

	const columns = [
		{
			title: "#",
			dataIndex: "key",
			key: "key",
			render: (value, item, index) => (page - 1) * 10 + index + 1
		},
		{
			title: "Name",
			dataIndex: "profile",
			key: "profile",
			...getColumnSearchProps("name"),
			render: profile => (
				<Link to="#" onClick={() => handleHover(true, profile[1])}>
					{profile[0]}
				</Link>
			)
		},
		{
			title: "Email",
			dataIndex: "email",
			key: "email",
			...getColumnSearchProps(`email`)
		},
		{
			title: "Branch",
			dataIndex: "branch",
			key: "branch",
			filters: branchOptions,
			onFilter: (value, record) => record.branch === value
		},
		{
			title: "Year",
			dataIndex: "year",
			key: "year",
			filters: yearOptions,
			onFilter: (value, record) =>
				String(record.year).indexOf(String(value)) === 0
		},
		{
			title: "Role",
			dataIndex: "role",
			key: "role",
			filters: [
				{ text: "Lead", value: "lead" },
				{ text: "Core", value: "core" },
				{ text: "Member", value: "member" }
			],
			onFilter: (value, record) => record.role.indexOf(value) === 0,
			render: role => (
				<>
					{role[1] === editRole ? (
						<Select
							size="small"
							defaultValue={role[0]}
							label="Role"
							name="role"
							style={{ marginRight: "10px", width: "75%" }}
							onChange={val => handleEdit(val)}
						>
							<Option value="lead" disabled>
								Lead
							</Option>
							<Option value="core">Core</Option>
							<Option value="member">Member</Option>
							{role[2] &&
							Number(role[2]) === new Date().getFullYear() &&
							new Date().getMonth() >= 4 ? (
								<Option value="graduate">Graduate</Option>
							) : null}
						</Select>
					) : (
						<Tag
							color={
								role[0] === "lead"
									? "red"
									: role[0] === "core"
									? "geekblue"
									: "orange"
							}
							className={
								userData.role === "lead" ? "w-lead" : "w-else"
							}
						>
							{role[0]}
						</Tag>
					)}

					{userData.role === "lead" && role[0] !== "lead" ? (
						<>
							{editRole && editRole === role[1] ? (
								<AiOutlineClose
									style={{
										cursor: "pointer",
										fontSize: "16px"
									}}
									onClick={() => {
										setEditRole(null);
									}}
								/>
							) : (
								<Popconfirm
									title="Do you want to edit Roles?"
									okText="Yes"
									cancelText="No"
									onConfirm={() => {
										if (editDesignation) {
											setEditDesignation(null);
										}
										setEditRole(role[1]);
									}}
								>
									<AiOutlineEdit
										type="edit"
										style={{
											fontSize: "16px",
											color: `${
												role[0] === "lead"
													? "#F5222D"
													: role[0] === "core"
													? "#5A85EF"
													: "#FA8C16"
											}`,
											cursor: "pointer"
										}}
									/>
								</Popconfirm>
							)}
							<Divider type="vertical" />
						</>
					) : null}
				</>
			)
		},
		{
			title: "Show on website",
			dataIndex: "show",
			key: "show",
			className: "websiteShow",
			filters: [
				{ text: "Shown", value: true },
				{ text: "Not Shown", value: false }
			],
			onFilter: (value, record) => record.show.indexOf(value) === 0,
			render: show => (
				<div
					style={{
						display: "flex",
						flexDirection: "row",
						alignItems: "center"
					}}
				>
					<>
						<Tag
							color={show[0] ? "green" : "red"}
							style={{
								textAlign: "center",
								width: "70%",
								textTransform: "capitalize"
							}}
						>
							{show[0] ? "Shown" : "Not shown"}
						</Tag>
						<Popconfirm
							title="Do you want to toggle website seen?"
							onConfirm={() => handleChangeWebsiteSeen(show[1])}
							okText="Yes"
							cancelText="No"
						>
							<AiOutlineRedo
								style={{ cursor: "pointer", fontSize: "16px" }}
							/>
						</Popconfirm>
						<Divider type="vertical" />
					</>
				</div>
			)
		},
		{
			title: "Designation",
			dataIndex: "designation",
			key: "designation",
			...getColumnSearchProps("designation"),
			render: designation => (
				<>
					{editDesignation === designation[1] ? (
						<Input
							size="small"
							name="designation"
							defaultValue={designation[0]}
							onChange={e => setNewDesignation(e.target.value)}
							onPressEnter={() => {
								if (newDesignation !== "")
									handleEdit(newDesignation);
							}}
						/>
					) : (
						<span>{designation[0]}</span>
					)}
				</>
			)
		},

		{
			title: "Action",
			key: "action",
			dataIndex: "action",
			className: "userAction",
			render: action => (
				<div
					style={{
						display: "flex",
						flexDirection: "row",
						alignItems: "center"
					}}
				>
					<>
						{userData.role === "lead" ? (
							<>
								{editDesignation &&
								editDesignation === action[1] ? (
									<AiOutlineClose
										style={{
											cursor: "pointer",
											fontSize: "16px"
										}}
										onClick={() => {
											setEditDesignation(null);
										}}
									/>
								) : (
									<Popconfirm
										title="Do you want to change Designation ?"
										okText="Yes"
										cancelText="No"
										onConfirm={() => {
											if (editRole) {
												setEditRole(null);
											}
											setEditDesignation(action[1]);
										}}
									>
										<AiOutlineEdit
											type="edit"
											style={{
												fontSize: "16px",
												cursor: "pointer",
												color: "#FA8C16"
											}}
										/>
									</Popconfirm>
								)}
								<Divider type="vertical" />
							</>
						) : null}
						{action[2] !== "lead" ? (
							<>
								<Popconfirm
									title="Do you want to toggle user revoke?"
									onConfirm={() =>
										handleUserRevoke(action[1])
									}
									okText="Yes"
									cancelText="No"
								>
									{action[0] ? (
										<AiOutlineClose
											type="close"
											style={{
												fontSize: "16px",
												color: "#F4B400",
												cursor: "pointer"
											}}
										/>
									) : (
										<AiOutlineCheck
											type="check"
											style={{
												fontSize: "16px",
												color: "green",
												cursor: "pointer"
											}}
										/>
									)}
								</Popconfirm>
								<Divider type="vertical" />
								<Popconfirm
									title="Are you sure delete this user?"
									onConfirm={() =>
										handleUserDelete(action[1])
									}
									okText="Yes"
									cancelText="No"
								>
									<AiOutlineDelete
										style={{
											fontSize: "16px",
											color: "#DB4437",
											cursor: "pointer"
										}}
										type="delete"
									/>
								</Popconfirm>
							</>
						) : null}
					</>
				</div>
			)
		}
	];

	const data = users
		? users.map((user, id) => {
				const {
					_id,
					name,
					email,
					branch,
					year,
					role,
					designation,
					showOnWebsite,
					isRevoked
				} = user;
				return {
					key: ++id,
					_id,
					name,
					profile: [name, _id],
					email,
					branch: branch ? branch : "N/A",
					year: year ? year : "N/A",
					role: [role, _id, year],
					designation: [designation, _id],
					isRevoked,
					show: [showOnWebsite, _id],
					action: [isRevoked, _id, role, designation]
				};
		  })
		: null;

	return (
		<>
			<PageTitle title="Team" bgColor="#0F9D58" />

			<div className="table-wrapper-card">
				<UserOptions onAddMember={handleAddMember} />

				<Card style={{ padding: 0, width: "100%", overflowX: "auto" }}>
					<StyledTable
						loading={isLoading}
						columns={columns}
						dataSource={data}
						role={userData.role}
						pagination={{
							onChange(current) {
								setPage(current);
							}
						}}
					/>
				</Card>
			</div>
			<UserProfile
				openProfile={handleHover}
				visible={profileModal}
				uid={uid}
			/>
		</>
		// <>
		// 	<PageTitle title="Team" bgColor="#0F9D58" />
		// 	<Row gutter={(24, 24)}>
		// 		{users.map(user => (
		// 			<Col span={6}>
		// 				<Card>
		// 					<Row style={{ justifyContent: "center" }}>
		// 						<Avatar
		// 							size={80}
		// 							src={
		// 								<Image
		// 									src={user.image}
		// 									alt="Profilepic"
		// 								/>
		// 							}
		// 						/>
		// 					</Row>
		// 					<Row
		// 						style={{
		// 							justifyContent: "center",
		// 							paddingTop: ".5rem"
		// 						}}
		// 					>
		// 						<h3 style={{ fontSize: "18px" }}>
		// 							{user.name}
		// 						</h3>
		// 					</Row>
		// 					<Row style={{ justifyContent: "center" }}>
		// 						<Col
		// 							span={6}
		// 							style={{
		// 								justifyContent: "center",
		// 								display: "flex"
		// 							}}
		// 						>
		// 							<h3>{user.branch ? user.branch : "N/A"}</h3>
		// 						</Col>
		// 						<Col
		// 							span={8}
		// 							style={{
		// 								justifyContent: "center",
		// 								display: "flex"
		// 							}}
		// 						>
		// 							<h3>{user.year ? user.year : "N/A"}</h3>
		// 						</Col>
		// 					</Row>
		// 					<Row style={{ justifyContent: "center" }}>
		// 						<h3>{user.designation}</h3>
		// 					</Row>
		// 					<Row style={{ justifyContent: "center" }}>
		// 						<h3>
		// 							{user.bio ? user.bio : "no bio available"}
		// 						</h3>
		// 					</Row>
		// 				</Card>
		// 			</Col>
		// 		))}
		// 	</Row>
		// </>
	);
}