imphnen-frontend-service/apps/dimentorin/src/app/auth/login/page.tsx

import { FC, ReactElement } from 'react';
import { LoginBanner } from '@imphnen-frontend-service/ui/organisms';
import { Button } from '@imphnen-frontend-service/ui/atoms';
import { useSearchParams } from 'react-router-dom';
import { InputField } from '@imphnen-frontend-service/ui/molecules';

export const Components: FC = (): ReactElement => {
  const [searchParams] = useSearchParams();
  const error = searchParams.get('error'); // Ambil nilai ?error=

  return (
    <div className="flex flex-col justify-center items-center min-h-screen py-[60px] px-[80px]">
      <div className="bg-white min-w-[1120px] min-h-[712px] p-10 rounded-2xl shadow-md flex gap-6">
        <LoginBanner />
        <div className="border-2 border-primary-500/50 w-[596px] rounded-lg py-[70px] px-[96px] flex justify-center">
          <div className="w-[404px]">
            <h2 className="text-4xl font-semibold text-primary-500 text-center mb-2">
              Hallo Minna-san
            </h2>
            <h5 className="text-xl font-medium text-primary-500 text-center">
              Welcome to Dimentorin by IMPHNEN
            </h5>
            <InputField
              label="Email"
              error={error ? error : undefined}
              size="lg"
              className="w-full"
              placeholder="Masukkan email-mu, Senpai~! ✨ (Pastikan tidak typo, ya~ 😆)"
            />
            <InputField
              label="password"
              error={error ? error : undefined}
              className="w-full"
              size="lg"
              type="password"
              placeholder="Masukkan password rahasiamu!"
            />
            <div className="flex justify-end my-5">
              <a href="/auth/forgot" className="text-primary-500 font-medium">
                Lupa Password ?
              </a>
            </div>
            <Button className="w-full">Enter Isekai</Button>
            <div className="flex my-3 gap-3 justify-center">
              <h5>Belum Punya akun ?</h5>
              <a href="/auth/register" className="text-primary-500 font-medium">
                Daftar Disini
              </a>
            </div>
            <div className="flex items-center w-full">
              <div className="flex-grow border-t border-blue-400 opacity-50"></div>
              <span className="px-3 text-blue-400">Or</span>
              <div className="flex-grow border-t border-blue-400 opacity-50"></div>
            </div>
            <Button
              className="w-full my-3 text-gray-500 gap-2"
              variant="secondary"
            >
              <p>Log In With Google</p>
              <img
                src="/image/33978ce5bed2da9bf9d73acad802182a.webp"
                alt="Google Icon"
                width={24}
              />
            </Button>
          </div>
        </div>
      </div>
    </div>
  );
};

export default Components;