70 lines
1.9 KiB
Vue
Executable File
70 lines
1.9 KiB
Vue
Executable File
<template>
|
||
<div
|
||
class="min-h-[calc(100dvh-4em)] flex items-center justify-center p-4 bg-gray-100 dark:bg-dark-primary"
|
||
>
|
||
<div
|
||
class="max-w-md w-full bg-white dark:bg-dark-primary-800 rounded-2xl shadow-xl p-8 text-center border border-gray-200 dark:border-dark-primary-600"
|
||
>
|
||
<!-- Tabs -->
|
||
<ul class="flex border-b border-gray-200">
|
||
<li class="flex-1">
|
||
<button
|
||
class="w-full py-3.5 font-medium transition-all duration-200 cursor-pointer"
|
||
:class="tabClass('login')"
|
||
@click="setActive('login')"
|
||
>
|
||
ورود
|
||
</button>
|
||
</li>
|
||
<li class="flex-1">
|
||
<button
|
||
class="w-full py-3.5 font-medium transition-all duration-200 cursor-pointer"
|
||
:class="tabClass('register')"
|
||
@click="setActive('register')"
|
||
>
|
||
ثبتنام
|
||
</button>
|
||
</li>
|
||
</ul>
|
||
|
||
<!-- Content -->
|
||
<div class="mt-8">
|
||
<component :is="currentComponent" />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref } from "vue";
|
||
definePageMeta({ layout: "login-layout" });
|
||
|
||
// --- Lazy load components ---
|
||
import LoginForm from "~/components/lazy-load/auth/LoginForm.vue";
|
||
import RegisterForm from "~/components/lazy-load/auth/RegisterForm.vue";
|
||
|
||
// --- State ---
|
||
const activeTab = ref("login");
|
||
const currentComponent = ref(LoginForm);
|
||
const componentsMap = {
|
||
login: LoginForm,
|
||
register: RegisterForm,
|
||
};
|
||
|
||
// --- Methods ---
|
||
function setActive(tab) {
|
||
activeTab.value = tab;
|
||
currentComponent.value = componentsMap[tab];
|
||
}
|
||
|
||
// --- Compute class for tabs ---
|
||
function tabClass(tab) {
|
||
if (activeTab.value === tab) {
|
||
return "text-primary border-b-1 border-primary font-semibold";
|
||
} else {
|
||
return "text-gray-500 hover:text-primary";
|
||
}
|
||
}
|
||
</script>
|
||
<style></style>
|