mirror of
https://github.com/ngthanhvu/kr-phim.git
synced 2026-08-10 17:47:47 +00:00
94 lines
3.9 KiB
Vue
94 lines
3.9 KiB
Vue
<script setup lang="ts">
|
|
import { Clock3, Heart, Mail, UserRound } from 'lucide-vue-next'
|
|
|
|
const { user, loading, initAuth } = useSupabaseAuth()
|
|
|
|
const defaultAvatar = 'https://thumbs.dreamstime.com/b/avatar-vietnam-character-your-project-others-avatar-vietnam-character-274539000.jpg'
|
|
const memberName = computed(() => {
|
|
const metadata = user.value?.user_metadata || {}
|
|
const name = metadata.name || metadata.full_name || metadata.user_name
|
|
if (typeof name === 'string' && name.trim()) return name.trim()
|
|
return user.value?.email?.split('@')[0] || 'Thành viên'
|
|
})
|
|
|
|
const memberAvatar = computed(() => {
|
|
const metadata = user.value?.user_metadata || {}
|
|
return typeof metadata.avatar_url === 'string' && metadata.avatar_url ? metadata.avatar_url : defaultAvatar
|
|
})
|
|
|
|
onMounted(() => {
|
|
initAuth()
|
|
})
|
|
|
|
useHead({
|
|
title: 'Trang cá nhân - KR Phim',
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<main class="min-h-screen bg-slate-950 text-white">
|
|
<AppHeader />
|
|
|
|
<section class="mx-auto max-w-390 px-4 pb-16 pt-28 sm:px-6 lg:px-8 lg:pt-32 xl:px-10">
|
|
<div class="mb-6">
|
|
<p class="text-sm font-black uppercase text-sky-300">Thành viên</p>
|
|
<h1 class="mt-2 text-3xl font-black sm:text-4xl">Trang cá nhân</h1>
|
|
</div>
|
|
|
|
<div v-if="loading" class="rounded-lg border border-white/10 bg-white/6 p-5">
|
|
<div class="h-24 animate-pulse rounded-md bg-white/10" />
|
|
</div>
|
|
|
|
<div v-else-if="user" class="grid gap-5 lg:grid-cols-[minmax(0,1fr)_22rem]">
|
|
<section class="rounded-lg border border-white/10 bg-white/6 p-5 sm:p-6">
|
|
<div class="flex flex-col gap-5 sm:flex-row sm:items-center">
|
|
<img :src="memberAvatar" :alt="memberName"
|
|
class="size-24 shrink-0 rounded-full object-cover ring-4 ring-sky-300/30">
|
|
<div class="min-w-0">
|
|
<h2 class="truncate text-2xl font-black">{{ memberName }}</h2>
|
|
<p class="mt-2 inline-flex items-center gap-2 text-sm font-semibold text-slate-300">
|
|
<Mail class="size-4 text-sky-300" />
|
|
{{ user.email }}
|
|
</p>
|
|
<p class="mt-4 max-w-2xl text-sm leading-6 text-slate-400">
|
|
Tài khoản này dùng để đồng bộ lịch sử xem và các dữ liệu cá nhân của bạn trên KR Phim.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<aside class="grid gap-3 sm:grid-cols-2 lg:grid-cols-1">
|
|
<NuxtLink to="/lich-su"
|
|
class="flex items-center gap-3 rounded-lg border border-white/10 bg-white/6 p-4 transition hover:bg-white/10">
|
|
<span class="grid size-10 place-items-center rounded-md bg-sky-300 text-slate-950">
|
|
<Clock3 class="size-5" />
|
|
</span>
|
|
<span>
|
|
<span class="block font-black">Lịch sử xem</span>
|
|
<span class="text-sm text-slate-400">Xem tiếp phim đang dở</span>
|
|
</span>
|
|
</NuxtLink>
|
|
<NuxtLink to="/yeu-thich"
|
|
class="flex items-center gap-3 rounded-lg border border-white/10 bg-white/6 p-4 transition hover:bg-white/10">
|
|
<span class="grid size-10 place-items-center rounded-md bg-white/10 text-sky-300">
|
|
<Heart class="size-5 fill-current" />
|
|
</span>
|
|
<span>
|
|
<span class="block font-black">Yêu thích</span>
|
|
<span class="text-sm text-slate-400">Phim bạn đã lưu</span>
|
|
</span>
|
|
</NuxtLink>
|
|
</aside>
|
|
</div>
|
|
|
|
<div v-else class="rounded-lg border border-white/10 bg-white/6 p-6">
|
|
<UserRound class="size-10 text-sky-300" />
|
|
<h2 class="mt-4 text-xl font-black">Bạn chưa đăng nhập</h2>
|
|
<p class="mt-2 text-sm leading-6 text-slate-300">
|
|
Bấm nút Thành viên trên header để đăng nhập hoặc đăng ký tài khoản.
|
|
</p>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
</template>
|