react-icons/md#MdEmail JavaScript Examples

StepOne = ({ activeStep, setNextStep }) => {
	return (
		<Form>
			<StepTitle>{activeStep.title}</StepTitle>
			<StepSubtitle>{activeStep.subtitle}</StepSubtitle>

			<S.RegisterTypeTitle>
				Como você quer
				<p>realizar o cadastro?</p>
			</S.RegisterTypeTitle>

			<RectangularButton variant="round" colorVariant="green" onClick={setNextStep} fullWidth>
				<MdEmail fontSize="2rem" />
				Utilizando o e-mail
			</RectangularButton>
		</Form>
	);
}

export default function Login() {
    const router = useRouter();
    const [errorMsg, setErrorMsg] = useState("");
    const [user, { mutate }] = useUser();
    const [loading, isLoading] = useState(false);
    useEffect(() => {
        // redirect to home if user is authenticated
        if (user) router.replace("/");
    }, [user]);

    async function onSubmit(e) {
        isLoading(true);
        e.preventDefault();
        const body = {
            email: e.currentTarget.email.value,
            password: e.currentTarget.password.value
        };
        const res = await fetch("/api/auth", {
            method: "POST",
            headers: { "Content-Type": "application/json" },
            body: JSON.stringify(body)
        });
        if (res.status === 200) {
            const userObj = await res.json();
            mutate(userObj);
        } else {
            isLoading(false);
            setErrorMsg("Incorrect username or password. Try again!");
        }
    }

    return (
        <>
            <div className="card-form d-flex justify-content-center">
                <form onSubmit={onSubmit}>
                    <div className="mb-3">
                        {errorMsg ? <p style={{ color: "red" }}>{errorMsg}</p> : null}
                    </div>
                    <div class="mb-3">
                        <label for="email" class="form-label"><MdEmail /> Email address</label>
                        <input type="email" class="form-control" id="email" required/>
                        <div id="emailHelp" class="form-text">We'll never share your email with anyone else.</div>
                    </div>
                    <div class="mb-3">
                        <label for="password" class="form-label"><RiLockPasswordFill /> Password</label>
                        <input type="password" class="form-control" id="password" required/>
                    </div>
                    <div className="mb-3">
                        <p>New here? <Link href="/signup">Sign up</Link></p>
                    </div>
                    <button type="submit" class="btn btn-primary w-100">{loading ? <div class="spinner-border" role="status" style={{width:'1.5rem',height:'1.5rem'}}>
                        <span class="visually-hidden">Loading...</span>
                    </div> : <>Login</>}</button>
                </form>
            </div>
        </>
    );
}

export default function Login() {
    const [user, { mutate }] = useUser();
    const [errorMsg, setErrorMsg] = useState("");
    const [loading, isLoading] = useState(false);

    useEffect(() => {
        // redirect to home if user is authenticated
        if (user) Router.replace("/");
    }, [user]);

    const handleSubmit = async (e) => {
        e.preventDefault();
        if (e.currentTarget.password.value !== e.currentTarget.cpassword.value) {
            setErrorMsg("Passwords does not match")
        } else {
            isLoading(true);
            const body = {
                email: e.currentTarget.email.value,
                name: e.currentTarget.name.value,
                password: e.currentTarget.password.value
            };
            const res = await fetch("/api/users", {
                method: "POST",
                headers: { "Content-Type": "application/json" },
                body: JSON.stringify(body)
            });
            if (res.status === 201) {
                const userObj = await res.json();
                // writing our user object to the state
                mutate(userObj);
            } else {
                isLoading(false);
                setErrorMsg(await res.text());
            }
        }
    };
    return (
        <>
            <div className="card-form d-flex justify-content-center">
                <form onSubmit={handleSubmit}>
                    <div className="mb-3">
                        {errorMsg ? <p style={{ color: "red" }}>{errorMsg}</p> : null}
                    </div>
                    <div class="mb-3">
                        <label for="Name" class="form-label"><FaUserCircle /> Name</label>
                        <input type="text" class="form-control" id="name" required />
                    </div>
                    <div class="mb-3">
                        <label for="email" class="form-label"><MdEmail /> Email address</label>
                        <input type="email" class="form-control" id="email" required />
                        <div id="emailHelp" class="form-text">We'll never share your email with anyone else.</div>
                    </div>
                    <div class="mb-3">
                        <label for="password" class="form-label"><RiLockPasswordFill /> Password</label>
                        <input type="password" class="form-control" id="password" required />
                    </div>
                    <div class="mb-3">
                        <label for="cpassword" class="form-label"><RiLockPasswordFill /> Confirm Password</label>
                        <input type="password" class="form-control" id="cpassword" required />
                    </div>
                    <div className="mb-3">
                        <p>Already registered ? <Link href="/login">Login</Link></p>
                    </div>
                    <button type="submit" class="btn btn-primary w-100 mb-3">{loading ? <div class="spinner-border" role="status" style={{ width: '1.5rem', height: '1.5rem' }}>
                        <span class="visually-hidden">Loading...</span>
                    </div> : <>Sign up</>}</button>
                </form>
            </div>
        </>
    );
}

Profile = () => {
	const [showSkeleton, setShowSkeleton] = useState(false);
	const Creds = getRole();
	const [user, setUser] = useState(null);
	const [profileDrawer, setProfileDrawer] = useState(false);
	const [passwordDrawer, setPasswordDrawer] = useState(false);
	const [refresh, setRefresh] = useState(false);
	const Image = styled.img`
		width: 120px;
		height: 120px;
		border-radius: 50%;
		padding: 4px;
		border: 2px solid #d5d5d5;
		transition: 0.2s all ease-out;
		&:hover {
			transition: 0.2s all ease-in;
			border: 4px solid #4285f4;
		}
	`;

	const LogoStyle = styled.span`
		font-size: 28px;
		color: #595959;
		&:hover {
			transition: 0.2s all ease-in;
			color: #4285f4;
		}
	`;

	const handleUpdateUser = () => {
		setProfileDrawer(false);
	};

	const Refresh = () => {
		setRefresh(!refresh);
	};

	const handleUpdatePassword = () => {
		setPasswordDrawer(false);
	};

	useEffect(() => {
		(async () => {
			setShowSkeleton(true);
			try {
				if (true) {
					const res = await getUserService(Creds.id);
					if (res.message === "success") {
						setUser(res.data);
						setShowSkeleton(false);
					} else {
						_notification("warning", "Error", res.message);
					}
				}
			} catch (err) {
				_notification("error", "Error", err.message);
				setShowSkeleton(false);
			}
		})();
		// eslint-disable-next-line react-hooks/exhaustive-deps
	}, [refresh]);

	return (
		<>
			<PageTitle title="Profile" bgColor="#DB4437" />
			<Skeleton loading={showSkeleton} active>
				<>
					<Row gutter={16}>
						<Col xs={0} sm={0} md={4} lg={6}></Col>
						<Col
							xs={24}
							sm={24}
							md={8}
							lg={6}
							className="profile-image-container"
						>
							<Image
								src={
									user && user.image
										? user.image
										: "https://avatars.dicebear.com/v2/identicon/16042.svg"
								}
								alt="Profilepic"
							/>
						</Col>

						<Col xs={24} sm={24} md={9} lg={6}>
							<Row className="name center-align-row">
								{user && user.name
									? user.name
									: "Not Available"}
							</Row>
							<Row className="center-align-row tag">
								<Tag
									color={
										user && user.role === "lead"
											? "red"
											: user && user.role === "core"
											? "geekblue"
											: "orange"
									}
									style={{
										textTransform: "capitalize",
										fontSize: "14px",
										textAlign: "center"
									}}
								>
									{user && user.role ? user.role : "member"}
								</Tag>
							</Row>
							<Row className="branch center-align-row">
								<Col xs={0} sm={3} md={0}></Col>
								<Col
									xs={3}
									sm={2}
									md={4}
									lg={3}
									className="icon"
								>
									<FaUserGraduate />
								</Col>
								<Col
									xs={5}
									sm={3}
									md={6}
									lg={6}
									className="text"
								>
									{user && user.branch ? user.branch : "N/A"}
								</Col>
								<Col
									xs={3}
									sm={2}
									md={4}
									lg={3}
									className="icon"
								>
									<AiFillCalendar />
								</Col>
								<Col
									xs={5}
									sm={5}
									md={6}
									lg={6}
									className="text"
								>
									{user && user.year ? user.year : "N/A"}
								</Col>
								<Col xs={0} sm={0}></Col>
							</Row>
						</Col>
						<Col xs={0} sm={0} md={3} lg={6}></Col>
					</Row>
					<Divider style={{ color: "rgba(0,0,0,.25)" }}>
						Personal Information
					</Divider>
					<Row>
						<Col xs={0} sm={0} md={2} lg={6}></Col>
						<Col xs={24} sm={12} md={10} lg={6}>
							<Row
								style={{ justifyContent: "center" }}
								className="contact-container"
							>
								<Col
									xs={6}
									sm={6}
									md={6}
									lg={8}
									className="logos"
								>
									<AiFillPhone style={{ fontSize: "26px" }} />
								</Col>
								<Col
									xs={10}
									sm={10}
									md={12}
									lg={16}
									className="info"
								>
									{user && user.contact
										? user.contact
										: "Not Provided"}
								</Col>
							</Row>
						</Col>
						<Col xs={24} sm={12} md={10} lg={6}>
							<Row
								style={{
									justifyContent: "center"
								}}
								className="dob-container"
							>
								<Col xs={6} sm={6} lg={8} className="logos">
									<FaBirthdayCake
										style={{ fontSize: "24px" }}
									/>
								</Col>
								<Col xs={10} sm={12} lg={12} className="info">
									{user && user.dob
										? user.dob.split("T")[0]
										: "Not Provided"}
								</Col>
							</Row>
						</Col>
						<Col xs={0} sm={0} md={2} lg={6}></Col>
					</Row>
					<Divider style={{ color: "rgba(0,0,0,.25)" }}>
						Contact Information
					</Divider>
					<Row className="social-links-container">
						{user ? (
							<>
								{user.linkedin ? (
									<Col xs={4} sm={4} md={3} lg={2}>
										<a
											href={user.linkedin}
											target="_blank"
											rel="noopener noreferrer"
										>
											<LogoStyle>
												<AiFillLinkedin />
											</LogoStyle>
										</a>
									</Col>
								) : null}
								{user.twitter ? (
									<Col xs={4} sm={4} md={3} lg={2}>
										<a
											href={user.twitter}
											target="_blank"
											rel="noopener noreferrer"
										>
											<LogoStyle>
												<FaTwitterSquare />
											</LogoStyle>
										</a>
									</Col>
								) : null}

								<Col xs={4} sm={4} md={3} lg={2}>
									<a
										href={`mailto:${user.email}`}
										target="_blank"
										rel="noopener noreferrer"
									>
										<LogoStyle>
											<MdEmail />
										</LogoStyle>
									</a>
								</Col>

								{user.portfolio ? (
									<Col xs={4} sm={4} md={3} lg={2}>
										<a
											href={user.portfolio}
											target="_blank"
											rel="noopener noreferrer"
										>
											<LogoStyle>
												<FiLink />
											</LogoStyle>
										</a>
									</Col>
								) : null}

								{user.github ? (
									<Col xs={4} sm={4} md={3} lg={2}>
										<a
											href={user.github}
											target="_blank"
											rel="noopener noreferrer"
										>
											<LogoStyle>
												<FaGithubSquare />
											</LogoStyle>
										</a>
									</Col>
								) : null}
							</>
						) : null}
					</Row>
					<Divider
						style={{
							color: "rgba(0,0,0,.25)"
						}}
					>
						Bio
					</Divider>
					<Row
						style={{
							justifyContent: "center",
							textAlign: "center"
						}}
					>
						<Col sm={0} md={4} lg={6}></Col>
						<Col sm={24} md={16} lg={12}>
							{user && user.bio ? user.bio : "No Bio Available"}
						</Col>
						<Col sm={0} md={4} lg={6}></Col>
					</Row>
					<Divider style={{ color: "rgba(0,0,0,.25)" }}>
						Update Details
					</Divider>
					<Row>
						<Col sm={0} md={4} lg={6}></Col>
						<Col
							xs={24}
							sm={12}
							md={8}
							lg={6}
							className="button-container"
						>
							<Button
								type="primary"
								className="login-form-button"
								onClick={() => {
									setProfileDrawer(true);
								}}
							>
								Update Details
							</Button>
						</Col>

						<Col
							xs={24}
							sm={12}
							md={8}
							lg={6}
							className="button-container"
						>
							<Button
								type="primary"
								className="login-form-button"
								onClick={() => {
									setPasswordDrawer(true);
								}}
							>
								Change Password
							</Button>
						</Col>
						<Col sm={0} md={4} lg={6}></Col>
					</Row>
				</>
				<UpdateOptions
					profileDrawer={profileDrawer}
					setProfileDrawer={setProfileDrawer}
					userData={Creds}
					handleUpdateUser={handleUpdateUser}
					Refresh={Refresh}
				/>
				<UpdateOptions
					passwordDrawer={passwordDrawer}
					setPasswordDrawer={setPasswordDrawer}
					userData={Creds}
					handleUpdatePassword={handleUpdatePassword}
				/>
			</Skeleton>
		</>
	);
}

UserProfile = ({ visible, openProfile, uid }) => {
	const [user, setUser] = useState(null);
	const [showSkeleton, setShowSkeleton] = useState(false);

	useEffect(() => {
		(async () => {
			setShowSkeleton(true);
			try {
				if (uid) {
					const res = await getUserService(uid);

					if (res.message === "success") {
						setUser(res.data);
						setShowSkeleton(false);
					} else {
						_notification("warning", "Error", res.message);
					}
				}
			} catch (err) {
				_notification("error", "Error", err.message);
			}
		})();
	}, [uid]);

	return (
		<div>
			<Modal
				visible={visible}
				footer={null}
				closable={false}
				onCancel={() => openProfile(false)}
				style={{ top: "20px" }}
			>
				<IoIosArrowRoundBack
					onClick={() => openProfile(false)}
					style={{ fontSize: "28px", cursor: "pointer" }}
				/>
				<Skeleton loading={showSkeleton} active>
					{user ? (
						<Wrapper>
							<Row gutter={16}>
								<Col span={10}>
									<Avatar
										size={120}
										src={
											<Image
												src={user.image}
												alt="Profilepic"
											/>
										}
									/>
								</Col>
								<Col span={14}>
									<NameContainer>
										<Name>
											{user.name} <br />
											<Row style={{ paddingTop: "10px" }}>
												<Col span={12}>
													<Tag
														color={
															user.role === "lead"
																? "red"
																: user.role ===
																  "core"
																? "geekblue"
																: "orange"
														}
														style={{
															marginBottom: "5px",
															textTransform:
																"capitalize",
															fontSize: "14px",
															width: "75%",
															textAlign: "center"
														}}
													>
														{user.role}
													</Tag>
												</Col>
												<Designation span="12">
													{user.designation}
												</Designation>
											</Row>
										</Name>
										<Branch>
											<Row gutter={12}>
												<Col
													span={2}
													style={{
														paddingTop: "2px"
													}}
												>
													<FaUserGraduate />
												</Col>
												<Col span={6}>
													{user.branch
														? user.branch
														: "N/A"}
												</Col>
												<Col
													span={3}
													style={{
														marginTop: "2px"
													}}
												>
													<AiFillCalendar />
												</Col>
												<Col>
													{user.year
														? user.year
														: "N/A"}
												</Col>
											</Row>
										</Branch>
									</NameContainer>
								</Col>
							</Row>
							<Divider style={{ color: "rgba(0,0,0,.25)" }}>
								Personal Information
							</Divider>
							<Row>
								<Col span={12}>
									<Row>
										<Col span={6}>
											<Logo>
												<AiFillPhone
													style={{ fontSize: "26px" }}
												/>
											</Logo>
										</Col>
										<Col span={218}>
											<Info>
												{user.contact
													? user.contact
													: "Not Provided"}
											</Info>
										</Col>
									</Row>
								</Col>
								<Col span={12}>
									<Row>
										<Col span={6}>
											<Logo>
												<FaBirthdayCake
													style={{ fontSize: "24px" }}
												/>
											</Logo>
										</Col>
										<Col span={18}>
											<Info>
												{user.dob
													? user.dob.split("T")[0]
													: "Not Provided"}
											</Info>
										</Col>
									</Row>
								</Col>
							</Row>
							<Divider style={{ color: "rgba(0,0,0,.25)" }}>
								Bio
							</Divider>
							<Row
								style={{
									textAlign: "center",
									marginRight: "auto !important",
									marginLeft: "auto !important",
									justifyContent: "center",
									display: "flex"
								}}
							>
								<Col span={24}>
									{user.bio ? user.bio : "No Bio Available"}
								</Col>
							</Row>
							<Divider style={{ color: "rgba(0,0,0,.25)" }}>
								Contact Me
							</Divider>
							<Row
								style={{
									textAlign: "center",
									marginRight: "auto !important",
									marginLeft: "auto !important",
									justifyContent: "center",
									display: "flex"
								}}
							>
								<Col span={2}></Col>
								{user.linkedin ? (
									<Col span={4}>
										<a
											href={user.linkedin}
											target="_blank"
											rel="noopener noreferrer"
										>
											<LogoStyle>
												<AiFillLinkedin />
											</LogoStyle>
										</a>
									</Col>
								) : null}
								{user.twitter ? (
									<Col span={4}>
										<a
											href={user.twitter}
											target="_blank"
											rel="noopener noreferrer"
										>
											<LogoStyle>
												<FaTwitterSquare />
											</LogoStyle>
										</a>
									</Col>
								) : null}

								<Col span={4}>
									<a
										href={`mailto:${user.email}`}
										target="_blank"
										rel="noopener noreferrer"
									>
										<LogoStyle>
											<MdEmail />
										</LogoStyle>
									</a>
								</Col>

								{user.portfolio ? (
									<Col span={4}>
										<a
											href={user.portfolio}
											target="_blank"
											rel="noopener noreferrer"
										>
											<LogoStyle>
												<FiLink />
											</LogoStyle>
										</a>
									</Col>
								) : null}

								{user.github ? (
									<Col span={4}>
										<a
											href={user.github}
											target="_blank"
											rel="noopener noreferrer"
										>
											<LogoStyle>
												<FaGithubSquare />
											</LogoStyle>
										</a>
									</Col>
								) : null}

								<Col span={2}></Col>
							</Row>
							<Row
								style={{
									float: "right",
									paddingBottom: "10px"
								}}
							>
								<span style={{ paddingRight: "10px" }}>
									Last active
								</span>

								<Tag color="green">
									{user.lastActiveAt
										? moment(user.lastActiveAt).format(
												"DD MMM YYYY hh:mm"
										  )
										: "never"}
								</Tag>
							</Row>
						</Wrapper>
					) : null}
				</Skeleton>
			</Modal>
		</div>
	);
}

export default function BadgePage() {
  const isPreview = document.location.href.includes('examplePreview');
  return (
    <Page>
      <Navbar
        title="Badge"
        left={!isPreview && <NavbarBackLink onClick={() => history.back()} />}
        right={
          <Link navbar iconOnly>
            <Icon
              ios={<PersonCircleFill className="w-7 h-7" />}
              material={<MdPerson className="w-6 h-6" />}
              badge="5"
              badgeColors={{ bg: 'bg-red-500' }}
            />
          </Link>
        }
      />
      <Tabbar labels className="left-0 bottom-0 fixed">
        <TabbarLink
          active
          icon={
            <Icon
              ios={<EnvelopeFill className="w-7 h-7" />}
              material={<MdEmail className="w-6 h-6" />}
              badge="5"
              badgeColors={{ bg: 'bg-green-500' }}
            />
          }
          label="Inbox"
        />
        <TabbarLink
          icon={
            <Icon
              ios={<Calendar className="w-7 h-7" />}
              material={<MdToday className="w-6 h-6" />}
              badge="7"
              badgeColors={{ bg: 'bg-red-500' }}
            />
          }
          label="Calendar"
        />
        <TabbarLink
          icon={
            <Icon
              ios={<CloudUploadFill className="w-7 h-7" />}
              material={<MdFileUpload className="w-6 h-6" />}
              badge="1"
              badgeColors={{ bg: 'bg-red-500' }}
            />
          }
          label="Upload"
        />
      </Tabbar>
      <List>
        <ListItem
          media={<DemoIcon />}
          title="Foo Bar"
          after={<Badge colors={{ bg: 'bg-gray-500' }}>0</Badge>}
        />

        <ListItem
          media={<DemoIcon />}
          title="Ivan Petrov"
          after={<Badge>CEO</Badge>}
        />

        <ListItem
          media={<DemoIcon />}
          title="John Doe"
          after={<Badge colors={{ bg: 'bg-green-500' }}>5</Badge>}
        />

        <ListItem
          media={<DemoIcon />}
          title="Jane Doe"
          after={<Badge colors={{ bg: 'bg-yellow-500' }}>NEW</Badge>}
        />
      </List>
    </Page>
  );
}

export default function TabbarPage() {
  const isPreview = document.location.href.includes('examplePreview');
  const [activeTab, setActiveTab] = useState('tab-1');
  const [isTabbarLabels, setIsTabbarLabels] = useState(false);
  return (
    <Page>
      <Navbar
        title="Tabbar"
        left={!isPreview && <NavbarBackLink onClick={() => history.back()} />}
      />

      <Tabbar labels={isTabbarLabels} className="left-0 bottom-0 fixed">
        <TabbarLink
          active={activeTab === 'tab-1'}
          onClick={() => setActiveTab('tab-1')}
          icon={
            isTabbarLabels && (
              <Icon
                ios={<EnvelopeFill className="w-7 h-7" />}
                material={<MdEmail className="w-6 h-6" />}
              />
            )
          }
          label="Tab 1"
        />
        <TabbarLink
          active={activeTab === 'tab-2'}
          onClick={() => setActiveTab('tab-2')}
          icon={
            isTabbarLabels && (
              <Icon
                ios={<Calendar className="w-7 h-7" />}
                material={<MdToday className="w-6 h-6" />}
              />
            )
          }
          label="Tab 2"
        />
        <TabbarLink
          active={activeTab === 'tab-3'}
          onClick={() => setActiveTab('tab-3')}
          icon={
            isTabbarLabels && (
              <Icon
                ios={<CloudUploadFill className="w-7 h-7" />}
                material={<MdFileUpload className="w-6 h-6" />}
              />
            )
          }
          label="Tab 3"
        />
      </Tabbar>

      <List>
        <ListItem
          title="Tabbar Labels"
          after={
            <Toggle
              checked={isTabbarLabels}
              onChange={() => setIsTabbarLabels(!isTabbarLabels)}
            />
          }
        />
      </List>

      {activeTab === 'tab-1' && (
        <Block strong className="space-y-4">
          <p>
            <b>Tab 1</b>
          </p>
          <p>
            <span>
              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias
              accusantium necessitatibus, nihil quas praesentium at quibusdam
              cupiditate possimus et repudiandae dolorum delectus quo, similique
              voluptatem magni explicabo adipisci magnam ratione!
            </span>
            <span>
              Quod praesentium consequatur autem veritatis, magni alias
              consectetur ut quo, voluptatum earum in repellat! Id, autem! Minus
              suscipit, ad possimus non voluptatem aliquam praesentium earum
              corrupti optio velit tenetur numquam?
            </span>
            <span>
              Illo id ipsa natus quidem dignissimos odio dolore veniam,
              accusamus vel assumenda nulla aliquam amet distinctio! Debitis
              deserunt, et, cum voluptate similique culpa assumenda inventore,
              facilis eveniet iure optio velit.
            </span>
            <span>
              Maiores minus laborum placeat harum impedit, saepe veniam iusto
              voluptates delectus omnis consectetur tenetur ex ipsa error
              debitis aspernatur amet et alias! Sit odit cum voluptas quae? Est,
              omnis eos?
            </span>
          </p>
        </Block>
      )}
      {activeTab === 'tab-2' && (
        <Block strong className="space-y-4">
          <p>
            <b>Tab 2</b>
          </p>
          <p>
            <span>
              Dicta beatae repudiandae ab pariatur mollitia praesentium fuga
              ipsum adipisci, quia nam expedita, est dolore eveniet, dolorum
              obcaecati? Veniam repellendus mollitia sapiente minus saepe
              voluptatibus necessitatibus laboriosam incidunt nihil autem.
            </span>
            <span>
              Officia pariatur qui, deleniti eum, et minus nisi aliquam nobis
              hic provident quisquam quidem voluptatem eveniet ducimus. Commodi
              ea dolorem, impedit eaque dolor, sint blanditiis magni accusantium
              natus reprehenderit minima?
            </span>
            <span>
              Dicta reiciendis ut vitae laborum aut repellendus quasi beatae
              nulla sapiente et. Quod distinctio velit, modi ipsam
              exercitationem iste quia eaque blanditiis neque rerum optio, nulla
              tenetur pariatur ex officiis.
            </span>
            <span>
              Consectetur accusamus delectus sit voluptatem at esse! Aperiam
              unde maxime est nemo dicta minus autem esse nobis quibusdam iusto,
              reprehenderit harum, perferendis quae. Ipsum sit fugit similique
              recusandae quas inventore?
            </span>
          </p>
        </Block>
      )}
      {activeTab === 'tab-3' && (
        <Block strong className="space-y-4">
          <p>
            <b>Tab 3</b>
          </p>
          <p>
            <span>
              Vero esse ab natus neque commodi aut quidem nobis. Unde, quam
              asperiores. A labore quod commodi autem explicabo distinctio saepe
              ex amet iste recusandae porro consectetur, sed dolorum sapiente
              voluptatibus?
            </span>
            <span>
              Commodi ipsum, voluptatem obcaecati voluptatibus illum hic aliquam
              veritatis modi natus unde, assumenda expedita, esse eum fugit?
              Saepe aliquam ipsam illum nihil facilis, laborum quia, eius ea
              dolores molestias dicta.
            </span>
            <span>
              Consequatur quam laudantium, magnam facere ducimus tempora
              temporibus omnis cupiditate obcaecati tempore? Odit qui a,
              voluptas eveniet similique, doloribus eum dolorum ad, enim ea
              itaque voluptates porro minima. Omnis, magnam.
            </span>
            <span>
              Debitis, delectus! Eligendi excepturi rem veritatis, ad
              exercitationem tempore eveniet voluptates aut labore harum dolorem
              nemo repellendus accusantium quibusdam neque? Itaque iusto
              quisquam reprehenderit aperiam maiores dicta iure necessitatibus
              est.
            </span>
          </p>
        </Block>
      )}
    </Page>
  );
}

function App() {
  const [name, setName] = useState('');
  const [email,setEmail] = useState('');
  const [phone, setPhone] = useState('');
  const [cep, setCep] = useState('');
  const [address, setAddress] = useState('');
  const [neighborhood, setNeighborhood] = useState('');

  const [ufs, setUfs] = useState([]);
  const [cities, setCities] = useState([]);
  const [selectedUf, setSelectedUf] = useState('0');
  const [selectedCity, setSelectedCity] = useState('0');

  const [disableInput, setDisableInput] = useState(false);

  //carregar ufs do ibge
  useEffect(()=>{
    async function loadUfs(){
      const {data} = await axios.get('https://servicodados.ibge.gov.br/api/v1/localidades/estados/');
      const ufInitials = data.map(uf => uf.sigla);
      setUfs(ufInitials);
    }

    loadUfs();
  }, [])

  //carregar cidades por UF
  useEffect(()=>{
    if(selectedUf === ''){
      return;
    }

    async function loadCities(){
      const {data} = await axios.get(`https://servicodados.ibge.gov.br/api/v1/localidades/estados/${selectedUf}/municipios`);

      const cityNames = data.map(city=>city.nome);
      setCities(cityNames);
    }

    loadCities();
  }, [selectedUf]);

  //carregar informações do cep
  useEffect(()=>{
    //não realizar a consulta caso o cep não esteja completo
    if(cep.length < 8){
      setDisableInput(false);
      return;
    }

    async function loadAddress(){
      try{
        //consultar cep
        const {data} = await axios.get(`https://viacep.com.br/ws/${cep}/json/`);
        
        setSelectedUf(data.uf);
        setSelectedCity(data.localidade);
        setAddress(data.logradouro);
        setNeighborhood(data.bairro);
        setDisableInput(true);
      } catch(err){
        console.log("Houve um erro ao tentar consultar o CEP. " + err);
      }
    }

    loadAddress();
  }, [cep]);

  function handleSelectedUf(event){
    const uf = event.target.value;
    setSelectedUf(uf);
  }

  function handleSelectedCity(event){
    const city = event.target.value;
    setSelectedCity(city);
  }

  async function handleSubmit(event){
    event.preventDefault();
    
    const userData = {
      name,
      email,
      phone,
      cep,
      uf: selectedUf,
      city: selectedCity,
      address,
      neighborhood,
    }

    try{
      await axios.post('http://localhost:3333/users/', userData, {
        'content-type': 'application/json'
      });

      return Modal.fire(<h1>Usuário inserido com sucesso</h1>);
    } catch(err){
      console.log("Houve um erro ao tentar criar o usuário. " + err);
    }
  }

  return (
    <Container>
      <h1>Formulário legal</h1>
      <Form onSubmit={handleSubmit}>
        <Input placeholder={'nome'} icon={MdPerson} type={'text'} setState={setName}/>
        <Input placeholder={'email'} icon={MdEmail} type={'email'} setState={setEmail}/>
        <Input placeholder={'telefone'} icon={MdSmartphone} type={'tel'} setState={setPhone}/>
        <Input placeholder={'CEP'} icon={MdHome} type={'text'} setState={setCep}/>
        <CitySelect>
          <select 
            name="uf" 
            id="uf" 
            onChange={handleSelectedUf} 
            disabled={disableInput} 
            required
          >
            <option value="0" hidden>{selectedUf !== '0' ? selectedUf : 'UF'}</option>
            {ufs.map(uf => (
              <option key={uf} value={uf}>{uf}</option>
            ))}
          </select>
          <select 
            name="city" 
            id="city" 
            onChange={handleSelectedCity} 
            disabled={disableInput}
          >
            <option value="0" hidden>{selectedCity !== '0' ? selectedCity : 'Selecione uma cidade'}</option>
            {cities.map(city=>(
              <option key={city} value={city}>{city}</option>
            ))}
          </select>
        </CitySelect>
        <Input 
          placeholder={'endereço'} 
          type={'text'} 
          icon={MdPlace}
          setState={setAddress} 
          state={address} 
          disable={disableInput}
        />
        <Input 
          placeholder={'bairro'} 
          type={'text'} 
          icon={FaMapSigns}
          setState={setNeighborhood} 
          state={neighborhood}
          disable={disableInput}
        />
        <button type="submit">
          <p>Enviar</p>
          <MdKeyboardTab />
        </button> 
      </Form>
    </Container>
  );
}