react-icons/ai#AiOutlineClose JavaScript Examples

Navbar = () => {
    const [toggleMenu, setToggleMenu] = React.useState(false)

    return (
        <nav className="w-full flex md:justify-center justify-between items-center p-4">
            <div className="md:flex-[0.5] flex-initial justify-center items-center">
                <img src={logo} alt="logo" className="w-32 cursor-pointer" />
            </div>
            {/* <ul className="text-white md:flex hidden list-none flex-row justify-between items-center flex-initial">
                {['Market', 'Exchange', 'Tutorials', 'Wallets'].map((item, index) => (
                    <NavBarItem key={item + index} title={item} />
                ))}
                <li className="bg-[#2952e3] py-2 px-7 mx-4 rounded-full cursor-pointer hover:bg-[#2546bd]">
                    Login
                </li>
            </ul> */}
            <div className="flex relative">
                {!toggleMenu && (
                    <HiMenuAlt4
                        fontSize={28}
                        className="text-white md:hidden cursor-pointer"
                        onClick={() => setToggleMenu(true)}
                    />
                )}
                {toggleMenu && (
                    <AiOutlineClose
                        fontSize={28}
                        className="text-white md:hidden cursor-pointer"
                        onClick={() => setToggleMenu(false)}
                    />
                )}
                {toggleMenu && (
                    <ul
                        className="z-10 fixed -top-0 -right-2 p-3 w-[70vw] h-screen shadow-2xl md:hidden list-none
            flex flex-col justify-start items-end rounded-md blue-glassmorphism text-white animate-slide-in"
                    >
                        <li className="text-xl w-full my-2">
                            <AiOutlineClose onClick={() => setToggleMenu(false)} />
                        </li>
                        {['Market', 'Exchange', 'Tutorials', 'Wallets'].map((item, index) => (
                            <NavBarItem key={item + index} title={item} classprops="my-2 text-lg" />
                        ))}
                    </ul>
                )}
            </div>
        </nav>
    )
}

CommentSection = ({ details }) => {
	const [replyingTo, setReplyingTo] = useState(null);
	const myRef = useRef();
	const formRef = useRef();
	const [refresh, setRefresh] = useState(false);
	const [comments, setComments] = useState([]);
	const [user, setUser] = useState({});
	const userData = getRole();

	const [form] = Form.useForm();

	const handleReply = id => {
		myRef.current.scrollIntoView({ behavior: "smooth" });
		formRef.current.focus();
		setReplyingTo(id);
	};

	useEffect(() => {
		details &&
			(async () => {
				try {
					const res = await getCommentService(details._id);
					console.log(res.data);
					setUser((await getUserService(userData.id)).data);
					if (!res.error && res.message === "success") {
						setComments(res.data);
					}
				} catch (err) {
					console.log(err);
				}
			})();
		//eslint-disable-next-line
	}, [refresh, details]);

	const onSubmit = async val => {
		let data = { text: val.comment };
		try {
			const res = await addCommentService(details._id, data);
			if (!res.error && res.message === "success") {
				form.setFieldsValue({ comment: "" });
				setRefresh(!refresh);
			}
		} catch (err) {
			_notification("error", "Error", err.message);
		}
	};

	return (
		<div className="comment-section-container">
			{comments?.map((comment, id) => (
				<div key={id}>
					<Comment
						className={`comment-container ${
							comment.userData[0].role === "lead"
								? "comment-lead"
								: comment.userData[0].role === "head"
								? "comment-head"
								: "comment-member"
						}`}
						actions={[
							<span
								className="reply-button"
								key="comment-nested-reply-to"
								onClick={() => handleReply(comment._id)}
							>
								<GoReply style={{ marginRight: ".25rem" }} />
								Reply{" "}
							</span>
						]}
						author={<h3>{comment.userData[0].name}</h3>}
						avatar={
							<Avatar
								src={comment.userData[0].image}
								alt={comment.userData[0].name}
							/>
						}
						content={<p>{comment.text}</p>}
					/>
					{/* {comment.replies.length > 0
						? comment.replies.map((reply, id) => (
								<Comment
									key={id}
									className={`reply-container ${
										reply.role === "lead"
											? "comment-lead"
											: reply.role === "head"
											? "comment-head"
											: "comment-member"
									}`}
									author={<h3>{reply.author}</h3>}
									avatar={
										<Avatar
											src={reply.image}
											alt={reply.image}
										/>
									}
									content={<p>{reply.comment}</p>}
								/>
						  ))
						: null} */}
				</div>
			))}

			<Comment
				style={{ padding: "0 .5rem" }}
				avatar={<Avatar src={user && user.image} alt={userData.name} />}
				content={
					<Form form={form} onFinish={onSubmit}>
						{replyingTo ? (
							<>
								<Row
									style={{
										border: "1px solid #D9D9D9",
										borderRadius: "3px",
										marginBottom: ".5rem",
										padding: ".25rem .75rem ",
										color: "#BFBFBF",
										justifyContent: "space-between"
									}}
								>
									<Col>
										<Row>
											<p>
												replying to :{" "}
												<span
													style={{ color: "#262626" }}
												>
													{
														comments.filter(
															comment =>
																comment._id ===
																replyingTo
														)[0].text
													}
												</span>
											</p>
										</Row>
										<Row>
											<p>
												author :{" "}
												<span
													style={{ color: "#262626" }}
												>
													{
														comments.filter(
															comment =>
																comment.id ===
																replyingTo
														)[0].userData[0].name
													}
												</span>
											</p>
										</Row>
									</Col>
									<Col
										style={{
											display: "flex",
											alignItems: "center",
											color: "#262626",
											padding: ".5rem"
										}}
										onClick={() => setReplyingTo(null)}
									>
										<AiOutlineClose
											style={{ cursor: "pointer" }}
										/>
									</Col>
								</Row>
							</>
						) : null}
						<Form.Item name="comment">
							<TextArea
								ref={formRef}
								type="text"
								placeholder="Enter your comment ..."
								rows={3}
							/>
						</Form.Item>
						<Form.Item>
							<Button
								ref={myRef}
								htmlType="submit"
								// loading={submitting}
								type="primary"
							>
								Add Comment
							</Button>
						</Form.Item>
					</Form>
				}
			/>
		</div>
	);
}

StatusBar = ({ status, modal, data, refresh, setRefresh }) => {
	let color =
		status === "pending"
			? "orange"
			: status === "completed"
			? "green"
			: status === "closed"
			? "blue"
			: status === "overdue"
			? "red"
			: "gold";

	const [edit, setEdit] = useState(false);
	const { Option } = Select;
	const editTaskStatus = async val => {
		try {
			const res = await updateTaskStatus(data._id, { status: val });
			if (!res.error && res.message === "success") {
				setEdit(false);
				setRefresh(!refresh);
			}
		} catch (err) {
			console.log(err);
		}
	};
	return (
		<>
			<Row style={{ alignItems: "center", fontSize: "16px" }}>
				Task Status :
				{!edit ? (
					<Tag
						color={color}
						style={{
							textTransform: "capitalize",
							fontSize: "14px",
							marginLeft: "8px",
							width: "120px",
							textAlign: "center"
						}}
					>
						{status}
					</Tag>
				) : (
					<div style={{ margin: "0px 12px" }}>
						<Select
							defaultValue={status}
							style={{ width: 120 }}
							onChange={editTaskStatus}
						>
							<Option value="ongoing">On going</Option>
							<Option value="pending">Pending</Option>
							<Option value="completed">Completed</Option>
							<Option value="overdue">Overdue</Option>
							<Option value="closed">Closed</Option>
						</Select>
					</div>
				)}
				{!modal &&
					(!edit ? (
						<AiOutlineEdit
							onClick={() => setEdit(true)}
							style={{
								color: `${color}`,
								width: "1.25em",
								height: "1.25em",
								cursor: "pointer"
							}}
						/>
					) : (
						<AiOutlineClose
							onClick={() => setEdit(false)}
							style={{
								width: "1.25em",
								height: "1.25em",
								cursor: "pointer"
							}}
						/>
					))}
			</Row>
		</>
	);
}

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>
		// </>
	);
}

MainSearch = ({
	searchState,
	resultsState,
	onSearchStateChange,
	createURL,
	onSearchParameters,
	widgetsCollector,
}) => {
	const { t } = useTranslation(['search', 'common']);
	const [openMobileFilters, setOpenMobileFilters] = useState(false);

	const tabs = useMemo(() => getTabs(t), [t]);
	const solutionsComponents = useMemo(() => getSolutionsComponents(t), [t]);

	const [activeSolutionTab, setActiveSolutionTab] = useState(
		tabs.find((tab) => tab.slug === searchState.solution)?.slug || 'technologies',
	);

	const handleOpenMobileFilters = () => {
		setOpenMobileFilters(true);
		window.scrollTo({ top: 0 });
	};

	return (
		<AlgoliaSearchProvider
			indexName={solutionsComponents[activeSolutionTab].indexName}
			widgetsCollector={widgetsCollector}
			searchState={searchState}
			resultsState={resultsState}
			onSearchStateChange={onSearchStateChange}
			createURL={createURL}
			onSearchParameters={onSearchParameters}
		>
			<ThemeProvider>
				<ScrollTo alignToTop={false} scrollOn="query">
					<DebouncedSearchBox placeholder={t('search:searchPlaceholder')} />
				</ScrollTo>
				<Wrapper>
					<Container
						onSelect={(index) => {
							setActiveSolutionTab(tabs[index].slug);
						}}
						selectedIndex={tabs.findIndex((tab) => tab.slug === activeSolutionTab)}
					>
						<FilterContainer openMobile={openMobileFilters}>
							<FilterContainerHeader>
								<h2>{t('common:filters')}</h2>
								<ClearRefinements placeholder={t('common:clear')} />
								<MobileCloseButton onClick={() => setOpenMobileFilters(false)}>
									<AiOutlineClose />
								</MobileCloseButton>
							</FilterContainerHeader>
							<Stats />
							<FilterContainerBody>
								{solutionsComponents[activeSolutionTab].filters.map((filter) => (
									<Panel key={filter.header} header={filter.header}>
										<filter.component
											{...filter.componentProps}
											placeholder={filter.componentProps.placeholder}
											label={filter.componentProps.label}
										/>
									</Panel>
								))}
								<MobileButtonsContainer>
									<ResultsButton onClick={() => setOpenMobileFilters(false)} />
									<ClearFiltersButton />
								</MobileButtonsContainer>
							</FilterContainerBody>
						</FilterContainer>
						<ResultsContainer>
							<TabsHeader>
								<TabList>
									{tabs.map((tab) => (
										<Tab key={tab.slug} data-testid={tab.id}>
											{tab.label}
										</Tab>
									))}
								</TabList>
							</TabsHeader>

							{tabs.map((tab) => (
								<TabPanel key={tab.id}>
									<ResultsContainerHeader>
										<SortBy
											defaultRefinement={
												tab.components.sortBy.defaultRefinement
											}
											items={tab.components.sortBy.items.map((item) => ({
												label: item.label,
												value: item.value,
											}))}
										/>
										<HitsPerPage
											items={[
												{
													label: t('search:perPage', { results: 12 }),
													value: 12,
												},
												{
													label: t('search:perPage', { results: 24 }),
													value: 24,
												},
												{
													label: t('search:perPage', { results: 36 }),
													value: 36,
												},
											]}
											defaultRefinement={12}
										/>
									</ResultsContainerHeader>
									<HitsWrapper>
										<Hits hitComponent={tab.components.hits.hitComponent} />
									</HitsWrapper>
								</TabPanel>
							))}

							<MobileFilterButton onClick={handleOpenMobileFilters}>
								{t('search:filter')}
							</MobileFilterButton>
							<ResultsFooter>
								<Pagination />
							</ResultsFooter>
						</ResultsContainer>
					</Container>
				</Wrapper>
			</ThemeProvider>
		</AlgoliaSearchProvider>
	);
}