mirror of
https://github.com/ngthanhvu/kr-phim.git
synced 2026-08-10 15:27:46 +00:00
Refactor: Remove Supabase authentication and related code
- Removed Supabase authentication logic from xem/[slug].vue and yeu-thich.vue. - Updated favorite and watch later messages to be device-specific. - Removed unused user state and authentication initialization. - Deleted supabase.ts plugin file and related configurations. - Updated nuxt.config.ts to remove Supabase runtime configuration. - Removed Supabase dependencies from package.json and package-lock.json. - Adjusted Dockerfile for development environment. - Added admin layout and pages for managing settings, movies, and users. - Implemented admin dashboard with statistics and recent activities. - Created movie and user management interfaces with search functionality.
This commit is contained in:
@@ -0,0 +1,114 @@
|
||||
<script setup lang="ts">
|
||||
import {
|
||||
BarChart3,
|
||||
Film,
|
||||
Home,
|
||||
LogOut,
|
||||
Menu,
|
||||
Settings,
|
||||
Users,
|
||||
X,
|
||||
} from 'lucide-vue-next'
|
||||
|
||||
const route = useRoute()
|
||||
const sidebarOpen = ref(false)
|
||||
|
||||
const navItems = [
|
||||
{ label: 'Dashboard', icon: Home, to: '/admin' },
|
||||
{ label: 'Phim', icon: Film, to: '/admin/phim' },
|
||||
{ label: 'Thành viên', icon: Users, to: '/admin/thanh-vien' },
|
||||
{ label: 'Cài đặt', icon: Settings, to: '/admin/cai-dat' },
|
||||
]
|
||||
|
||||
function isActive(to: string) {
|
||||
if (to === '/admin') return route.path === '/admin'
|
||||
return route.path.startsWith(to)
|
||||
}
|
||||
|
||||
function closeSidebar() {
|
||||
sidebarOpen.value = false
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="min-h-screen bg-slate-950">
|
||||
<aside
|
||||
class="fixed inset-y-0 left-0 z-40 w-64 transform border-r border-white/10 bg-slate-900 transition-transform lg:translate-x-0"
|
||||
:class="sidebarOpen ? 'translate-x-0' : '-translate-x-full'">
|
||||
<div class="flex h-16 items-center justify-between border-b border-white/10 px-4">
|
||||
<NuxtLink to="/admin" class="flex items-center gap-2">
|
||||
<div class="grid size-8 place-items-center rounded-lg bg-yellow-400">
|
||||
<Film class="size-4 text-slate-950" />
|
||||
</div>
|
||||
<span class="text-lg font-black text-white">CineK Admin</span>
|
||||
</NuxtLink>
|
||||
<button type="button" class="grid size-8 place-items-center rounded-lg text-white hover:bg-white/10 lg:hidden"
|
||||
@click="closeSidebar">
|
||||
<X class="size-5" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<nav class="flex flex-col gap-1 p-4">
|
||||
<NuxtLink v-for="item in navItems" :key="item.to" :to="item.to"
|
||||
class="flex items-center gap-3 rounded-lg px-4 py-3 text-sm font-semibold transition"
|
||||
:class="isActive(item.to)
|
||||
? 'bg-yellow-400/10 text-yellow-400'
|
||||
: 'text-slate-300 hover:bg-white/5 hover:text-white'">
|
||||
<component :is="item.icon" class="size-5" />
|
||||
{{ item.label }}
|
||||
</NuxtLink>
|
||||
</nav>
|
||||
|
||||
<div class="absolute inset-x-0 bottom-0 border-t border-white/10 p-4">
|
||||
<NuxtLink to="/"
|
||||
class="flex items-center gap-3 rounded-lg px-4 py-3 text-sm font-semibold text-slate-300 transition hover:bg-white/5 hover:text-white">
|
||||
<Home class="size-5" />
|
||||
Về trang chủ
|
||||
</NuxtLink>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<div class="lg:pl-64">
|
||||
<header
|
||||
class="sticky top-0 z-30 flex h-16 items-center gap-4 border-b border-white/10 bg-slate-950/80 px-4 backdrop-blur-xl lg:px-6">
|
||||
<button type="button" class="grid size-10 place-items-center rounded-lg text-white hover:bg-white/10 lg:hidden"
|
||||
@click="sidebarOpen = true">
|
||||
<Menu class="size-5" />
|
||||
</button>
|
||||
|
||||
<div class="ml-auto flex items-center gap-3">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="grid size-9 place-items-center rounded-full bg-yellow-400/10">
|
||||
<span class="text-sm font-black text-yellow-400">A</span>
|
||||
</div>
|
||||
<div class="hidden sm:block">
|
||||
<p class="text-sm font-semibold text-white">Admin</p>
|
||||
<p class="text-xs text-slate-400">Administrator</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main class="p-4 lg:p-6">
|
||||
<slot />
|
||||
</main>
|
||||
</div>
|
||||
|
||||
<Transition name="sidebar-fade">
|
||||
<div v-if="sidebarOpen" class="fixed inset-0 z-30 bg-black/60 backdrop-blur-sm lg:hidden"
|
||||
@click="closeSidebar" />
|
||||
</Transition>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.sidebar-fade-enter-active,
|
||||
.sidebar-fade-leave-active {
|
||||
transition: opacity 0.2s ease;
|
||||
}
|
||||
|
||||
.sidebar-fade-enter-from,
|
||||
.sidebar-fade-leave-to {
|
||||
opacity: 0;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user