x
This commit is contained in:
Your Name committed
1 parent
2098548140
commit
8c0b5a2a34
1 file changed
+59
-37
@@ -331,30 +331,30 @@ export default function ProfilePage() {
|
||||
/* Logged In Dashboard Layout */
|
||||
<div className="space-y-10 animate-fade-in">
|
||||
{/* Header Profile Banner */}
|
||||
<div className="bg-white rounded-3xl border border-spa-stone/10 p-8 flex flex-col md:flex-row justify-between items-center gap-6 shadow-sm relative overflow-hidden">
|
||||
<div className="absolute top-0 inset-x-0 h-1.5 bg-gradient-to-r from-spa-sage via-spa-forest to-spa-stone opacity-50" />
|
||||
<div className="bg-white rounded-2xl border border-spa-stone/10 p-5 sm:p-6 flex flex-col sm:flex-row justify-between items-center sm:items-center gap-4 shadow-sm relative overflow-hidden">
|
||||
<div className="absolute top-0 inset-x-0 h-1 bg-gradient-to-r from-spa-sage via-spa-forest to-spa-stone opacity-40" />
|
||||
|
||||
{/* User Avatar & Info */}
|
||||
<div className="flex flex-col md:flex-row items-center gap-5 text-center md:text-left">
|
||||
<div className="w-24 h-24 rounded-full overflow-hidden border-2 border-spa-forest/20 shadow-md">
|
||||
<div className="flex items-center gap-4 w-full sm:w-auto">
|
||||
<div className="w-14 h-14 sm:w-16 sm:h-16 rounded-full overflow-hidden border border-spa-forest/20 shadow-sm shrink-0">
|
||||
<img
|
||||
src={customer.pictureUrl || `https://ui-avatars.com/api/?name=${customer.displayName}`}
|
||||
alt="LINE Profile"
|
||||
className="w-full h-full object-cover"
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-1.5">
|
||||
<h1 className="text-3xl font-bold text-pop-black">{customer.displayName}</h1>
|
||||
<div className="flex flex-col md:flex-row md:items-center gap-2 md:gap-4 text-xs font-semibold text-spa-stone">
|
||||
<div className="space-y-1 min-w-0">
|
||||
<h1 className="text-xl sm:text-2xl font-bold text-pop-black truncate">{customer.displayName}</h1>
|
||||
<div className="flex flex-wrap items-center gap-x-3 gap-y-1 text-[11px] font-semibold text-spa-stone">
|
||||
{dbCustomer?.phone && (
|
||||
<span className="flex items-center gap-1.5 justify-center md:justify-start">
|
||||
<Phone className="w-3.5 h-3.5" />
|
||||
<span className="flex items-center gap-1">
|
||||
<Phone className="w-3 h-3 text-spa-stone/70" />
|
||||
<span>{dbCustomer.phone}</span>
|
||||
</span>
|
||||
)}
|
||||
{dbCustomer?.email && (
|
||||
<span className="flex items-center gap-1.5 justify-center md:justify-start">
|
||||
<Mail className="w-3.5 h-3.5" />
|
||||
<span className="flex items-center gap-1">
|
||||
<Mail className="w-3 h-3 text-spa-stone/70" />
|
||||
<span>{dbCustomer.email}</span>
|
||||
</span>
|
||||
)}
|
||||
@@ -362,67 +362,89 @@ export default function ProfilePage() {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Point Cards */}
|
||||
<div className="bg-gradient-to-br from-spa-forest to-spa-stone text-white p-6 rounded-2xl w-full md:w-auto min-w-[220px] text-center space-y-1.5 shadow-md border border-white/5 relative overflow-hidden">
|
||||
<div className="absolute -right-8 -bottom-8 w-24 h-24 bg-white/5 rounded-full" />
|
||||
<p className="text-[10px] uppercase font-bold tracking-widest text-spa-sage">คะแนนสะสมของคุณ</p>
|
||||
<div className="text-4xl font-extrabold flex items-center justify-center gap-1">
|
||||
<span>{dbCustomer?.points ?? customer.points ?? 0}</span>
|
||||
{/* Point Card Compact */}
|
||||
<div className="bg-spa-light border border-spa-stone/10 rounded-xl px-4 py-3 flex items-center justify-between gap-4 w-full sm:w-auto min-w-[200px] shrink-0">
|
||||
<div className="flex items-center gap-2.5">
|
||||
<div className="w-8 h-8 rounded-full bg-spa-forest/10 flex items-center justify-center shrink-0">
|
||||
<Award className="w-4.5 h-4.5 text-spa-forest" />
|
||||
</div>
|
||||
<div className="text-left">
|
||||
<p className="text-[9px] uppercase font-bold tracking-wider text-spa-stone">คะแนนสะสมของคุณ</p>
|
||||
<p className="text-lg font-extrabold text-pop-black leading-none mt-0.5">
|
||||
{dbCustomer?.points ?? customer.points ?? 0} <span className="text-[10px] font-semibold text-spa-stone ml-0.5">คะแนน</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<p className="text-[10px] text-spa-sage/95 font-semibold">1 คะแนนมีค่าเท่ากับ ฿1 สำหรับใช้เป็นส่วนลด</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Dashboard Tabs & Content */}
|
||||
<div className="grid grid-cols-1 lg:grid-cols-4 gap-8 items-start">
|
||||
{/* Dashboard Horizontal Tabs & Content */}
|
||||
<div className="space-y-6">
|
||||
|
||||
{/* Vertical Menu Tabs */}
|
||||
<div className="bg-white rounded-2xl border border-spa-stone/10 p-3 shadow-sm space-y-1">
|
||||
{/* Horizontal Tab UI */}
|
||||
<div className="border-b border-spa-stone/10 flex justify-between sm:justify-start gap-2 sm:gap-8 overflow-x-auto no-scrollbar">
|
||||
<button
|
||||
onClick={() => setActiveTab('orders')}
|
||||
className={`w-full py-3 px-4 rounded-xl font-bold text-left text-sm flex items-center gap-3 transition-all ${
|
||||
className={`pb-3 px-2 text-xs sm:text-sm font-bold flex items-center justify-center gap-2 transition-all relative shrink-0 ${
|
||||
activeTab === 'orders'
|
||||
? 'bg-spa-forest text-white shadow-sm'
|
||||
: 'text-spa-stone hover:bg-spa-light hover:text-pop-black'
|
||||
? 'text-spa-forest'
|
||||
: 'text-spa-stone hover:text-pop-black'
|
||||
}`}
|
||||
>
|
||||
<Package className="w-4.5 h-4.5" />
|
||||
<Package className="w-4 h-4" />
|
||||
<span>ประวัติการสั่งซื้อ</span>
|
||||
<span className="ml-auto bg-spa-sage/20 text-[10px] px-2 py-0.5 rounded-full font-extrabold text-spa-forest">
|
||||
<span className={`text-[9px] px-1.5 py-0.5 rounded-full font-extrabold transition-colors ${
|
||||
activeTab === 'orders'
|
||||
? 'bg-spa-forest/10 text-spa-forest'
|
||||
: 'bg-spa-stone/10 text-spa-stone'
|
||||
}`}>
|
||||
{orders.length}
|
||||
</span>
|
||||
{activeTab === 'orders' && (
|
||||
<div className="absolute bottom-0 inset-x-0 h-0.5 bg-spa-forest rounded-full" />
|
||||
)}
|
||||
</button>
|
||||
|
||||
<button
|
||||
onClick={() => setActiveTab('addresses')}
|
||||
className={`w-full py-3 px-4 rounded-xl font-bold text-left text-sm flex items-center gap-3 transition-all ${
|
||||
className={`pb-3 px-2 text-xs sm:text-sm font-bold flex items-center justify-center gap-2 transition-all relative shrink-0 ${
|
||||
activeTab === 'addresses'
|
||||
? 'bg-spa-forest text-white shadow-sm'
|
||||
: 'text-spa-stone hover:bg-spa-light hover:text-pop-black'
|
||||
? 'text-spa-forest'
|
||||
: 'text-spa-stone hover:text-pop-black'
|
||||
}`}
|
||||
>
|
||||
<MapPin className="w-4.5 h-4.5" />
|
||||
<MapPin className="w-4 h-4" />
|
||||
<span>สมุดที่อยู่จัดส่ง</span>
|
||||
<span className="ml-auto bg-spa-sage/20 text-[10px] px-2 py-0.5 rounded-full font-extrabold text-spa-forest">
|
||||
<span className={`text-[9px] px-1.5 py-0.5 rounded-full font-extrabold transition-colors ${
|
||||
activeTab === 'addresses'
|
||||
? 'bg-spa-forest/10 text-spa-forest'
|
||||
: 'bg-spa-stone/10 text-spa-stone'
|
||||
}`}>
|
||||
{addresses.length}
|
||||
</span>
|
||||
{activeTab === 'addresses' && (
|
||||
<div className="absolute bottom-0 inset-x-0 h-0.5 bg-spa-forest rounded-full" />
|
||||
)}
|
||||
</button>
|
||||
|
||||
<button
|
||||
onClick={() => setActiveTab('settings')}
|
||||
className={`w-full py-3 px-4 rounded-xl font-bold text-left text-sm flex items-center gap-3 transition-all ${
|
||||
className={`pb-3 px-2 text-xs sm:text-sm font-bold flex items-center justify-center gap-2 transition-all relative shrink-0 ${
|
||||
activeTab === 'settings'
|
||||
? 'bg-spa-forest text-white shadow-sm'
|
||||
: 'text-spa-stone hover:bg-spa-light hover:text-pop-black'
|
||||
? 'text-spa-forest'
|
||||
: 'text-spa-stone hover:text-pop-black'
|
||||
}`}
|
||||
>
|
||||
<Settings className="w-4.5 h-4.5" />
|
||||
<Settings className="w-4 h-4" />
|
||||
<span>ข้อมูลติดต่อของฉัน</span>
|
||||
{activeTab === 'settings' && (
|
||||
<div className="absolute bottom-0 inset-x-0 h-0.5 bg-spa-forest rounded-full" />
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Tab Display Area */}
|
||||
<div className="lg:col-span-3 space-y-8">
|
||||
<div className="space-y-8">
|
||||
|
||||
{/* 1. ORDERS TAB */}
|
||||
{activeTab === 'orders' && (
|
||||
|
||||
Reference in new issue
Block a user