loginpage

  <MainColorSwitcher /> */}
          <div className="container flex items-center justify-center h-full">
            <div className="flex flex-col justify-center w-full max-w-md bg-white rounded-lg shadow dark:border dark:bg-gray-800 dark:border-gray-700">
              <div className="p-6 space-y-4 md:space-y-6">
                <h1
                  style={{ textAlign: "center" }}
                  className="text-xl font-bold leading-tight tracking-tight text-gray-900 md:text-2xl dark:text-white"
                >
                  Sign In
                </h1>
                <form className="space-y-4 md:space-y-6" action="#">
                  <FormLabel
                    htmlFor="username-input"
                    className="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
                  >
                    User ID
                  </FormLabel>
                  <InputGroup className="mt-1">
                    <InputGroup.Text
                      style={{
                        cursor: "pointer",
                        background: "transparent",
                      }}
                      id="show-password"
                    >
                      <Lottie options={userOption} height={25} width={25} />
                    </InputGroup.Text>
                    <FormInput
                      id="username-input"
                      type="text"
                      className={isEmptyUsername ? "border-danger" : ""}
                      placeholder="User ID"
                      onChange={(e) => onChageUsername(e.target.value)}
                    />
                  </InputGroup>
                  <div style={{ marginTop: 25 }}>
                    <FormLabel
                      htmlFor="password-input"
                      className="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
                    >
                      Password
                    </FormLabel>
                    <InputGroup className="mt-1">
                      <InputGroup.Text
                        style={{
                          cursor: "pointer",
                          background: "transparent",
                        }}
                        id="show-password"
                      >
                        <Lottie
                          options={lockOption}
                          height={25}
                          width={25}
                        />
                      </InputGroup.Text>
                      <FormInput
                        style={{ marginTop: 0, borderRightWidth: 0 }}
                        aria-describedby="show-password"
                        id="password-input"
                        type={isShowPassword ? "text" : "password"}
                        className={isEmptyPassword ? "border-danger" : ""}
                        placeholder="Password"
                        onChange={(e) => onChagePassword(e.target.value)}
                      />
                      <InputGroup.Text
                        onClick={onShowHidePassword}
                        style={{
                          cursor: "pointer",
                          background: "transparent",
                        }}
                        id="show-password"
                      >
                        {isShowPassword ? (
                          <img
                            style={{ marginTop: 3 }}
                            height={25}
                            width={25}
                            src={eyeHideIcon}
                          />
                        ) : (
                          <img
                            style={{ marginTop: 3 }}
                            height={25}
                            width={25}
                            src={eyeShowIcon}
                          />
                        )}
                      </InputGroup.Text>
                    </InputGroup>
                  </div>
                  <Button
                    variant="primary"
                    className="w-full px-4 py-3"
                    onClick={(e: React.MouseEvent) => onLogin(e)}
                  >
                    Login
                    <div className="h-5 ml-2 justify-self-end">
                      <Lottie
                        options={chevRightOption}
                      />
                    </div>
                  </Button>
                </form>
              </div>
            </div>
          </div>