Untitled

<template>
  <main>
    <div class="container mx-auto">
      <div class="flex justify-center items-center h-screen">
        <div
          class="flex bg-secondary border-2 border-gray-200 rounded-2xl hover:shadow-xl transition-all"
        >
          <div class="w-1/2 h-full hidden lg:block bg-cover rounded-lg">
            <img
              src="../components/icons/logimage.jpg"
              alt=""
              class="rounded-lg"
            />
          </div>
          <div
            class="flex flex-col justify-center p-2 border-l-2 border-gray-200"
          >
            <h1 class="text-heading text-2xl text-gray-700 text-center mb-3">
              Login
            </h1>
            <div class="flex flex-col content-center justify-center">
              <label for="" class="font-body text-xl my-2 tracking-wider"
                >Email</label
              >
              <input
                type="text"
                v-model="inputEmail"
                placeholder="Email"
                class="border-2 focus:outline-none ring-1 ring-gray-400 focus:ring-accent bg-gray-100 rounded-md p-1 mb-4 w-full"
              />
            </div>
            <div>
              <label for="" class="font-body text-xl my-2 tracking-wider"
                >Password</label
              >
              <input
                v-model="inputPassword"
                type="text"
                placeholder="Password"
                class="border-2 focus:outline-none ring-1 ring-gray-400 focus:ring-accent bg-gray-100 rounded-md p-1 mb-4 w-full"
              />
            </div>
            <button
              @click="login"
              class="bg-transparent uppercase border border-gray-400 hover:bg-accent font-semibold tracking-wide transition ease-in-out hover:translate-y-2 hover:shadow-md mt-4 rounded-lg p-2"
            >
              Login
            </button>
          </div>
        </div>
      </div>
    </div>
  </main>
</template>

<script setup>
import { ref } from "vue";
import { useRouter } from "vue-router";

const inputEmail = ref("");
const inputPassword = ref("");
const router = useRouter();

const login = () => {
  if (
    inputEmail.value === "admin@admin.com" &&
    inputPassword.value === "admin123"
  ) {
    router.push({ path: "home" });
  }
  inputEmail = "";
  inputPassword = "";
};
</script>