FalahMobile
237 lines
8.5 KiB
TypeScript
237 lines
8.5 KiB
TypeScript
'use client'
|
|
|
|
import { useRouter } from 'next/navigation'
|
|
import Link from 'next/link'
|
|
import { useAuth } from '@/lib/AuthContext'
|
|
import {
|
|
ChevronRight,
|
|
ShoppingBag,
|
|
HandHeart,
|
|
MessageSquareText,
|
|
MapPin,
|
|
Flame,
|
|
Bell,
|
|
Sun,
|
|
Crown,
|
|
LogOut,
|
|
Wallet,
|
|
} from 'lucide-react'
|
|
|
|
/* ─── Quick Actions ──────────────────────────────────────────── */
|
|
|
|
const QUICK_ACTIONS = [
|
|
{ href: '/souq', icon: ShoppingBag, label: 'Souq' },
|
|
{ href: '/waqf', icon: HandHeart, label: 'Waqf' },
|
|
{ href: '/forum', icon: MessageSquareText, label: 'Forum' },
|
|
{ href: '/halal-monitor', icon: MapPin, label: 'Halal Monitor' },
|
|
]
|
|
|
|
/* ─── Settings Items ─────────────────────────────────────────── */
|
|
|
|
const SETTINGS = [
|
|
{
|
|
icon: Flame,
|
|
label: 'Spirituality Stats',
|
|
value: 'N/A',
|
|
color: 'text-orange-400',
|
|
},
|
|
{
|
|
icon: Bell,
|
|
label: 'Notifications',
|
|
value: '',
|
|
color: 'text-[#999]',
|
|
},
|
|
{
|
|
icon: Sun,
|
|
label: 'Appearance',
|
|
value: 'Dark Mode',
|
|
color: 'text-[#999]',
|
|
},
|
|
{
|
|
icon: Crown,
|
|
label: 'Upgrade to Pro',
|
|
value: '',
|
|
color: 'text-[#D4AF37]',
|
|
gold: true,
|
|
},
|
|
]
|
|
|
|
/* ─── Component ──────────────────────────────────────────────── */
|
|
|
|
export default function ProfilePage() {
|
|
const router = useRouter()
|
|
const { user, loading } = useAuth()
|
|
|
|
const handleSignOut = () => {
|
|
if (typeof window !== 'undefined') {
|
|
localStorage.clear()
|
|
}
|
|
router.push('/login')
|
|
}
|
|
|
|
if (loading) {
|
|
return (
|
|
<div className="min-h-dvh bg-[#0a0a0f] flex items-center justify-center">
|
|
<div className="w-8 h-8 rounded-full border-2 border-[#D4AF37]/30 border-t-[#D4AF37] animate-spin" />
|
|
</div>
|
|
)
|
|
}
|
|
|
|
const displayName = user?.name || 'Guest'
|
|
const initial = displayName.charAt(0).toUpperCase()
|
|
const flhBalance = user?.flhBalance ?? 0
|
|
const usdValue = (flhBalance * 0.004).toFixed(2)
|
|
|
|
return (
|
|
<div className="min-h-dvh bg-[#0a0a0f] pb-32 select-none">
|
|
{/* Scrollable content */}
|
|
<div className="overflow-y-auto">
|
|
{/* ═══ Profile Header ═══ */}
|
|
<div className="px-5 pt-14 pb-6">
|
|
<div className="flex items-center gap-4">
|
|
{/* Avatar */}
|
|
<div className="w-[60px] h-[60px] rounded-full bg-[#D4AF37]/20 border-2 border-[#D4AF37]/30 flex items-center justify-center shrink-0">
|
|
<span className="text-xl font-bold text-[#D4AF37]">{initial}</span>
|
|
</div>
|
|
|
|
{/* Name + badges */}
|
|
<div className="flex-1 min-w-0">
|
|
<div className="flex items-center gap-2">
|
|
<h2 className="text-white font-bold text-lg truncate">{displayName}</h2>
|
|
</div>
|
|
<p className="text-[#999] text-sm truncate">{user?.email}</p>
|
|
<div className="flex items-center gap-2 mt-2">
|
|
{user?.isPremium && (
|
|
<span className="text-[10px] font-bold text-white bg-[#D4AF37] rounded-full px-2.5 py-0.5 uppercase tracking-wider">
|
|
Premium
|
|
</span>
|
|
)}
|
|
{user?.isPro && (
|
|
<span className="text-[10px] font-bold text-white bg-[#10B981] rounded-full px-2.5 py-0.5 uppercase tracking-wider">
|
|
Pro
|
|
</span>
|
|
)}
|
|
{user?.experienceLevel && (
|
|
<span className="text-[10px] font-bold text-white bg-[#10B981] rounded-full px-2.5 py-0.5 uppercase tracking-wider">
|
|
{user.experienceLevel}
|
|
</span>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* ═══ FLH Wallet Card ═══ */}
|
|
<div className="mx-5 mb-5">
|
|
<Link
|
|
href="/wallet"
|
|
className="block bg-gradient-to-br from-[#D4AF37]/10 to-[#B8860B]/5 rounded-2xl border border-[#D4AF37]/20 p-5 active:scale-[0.98] transition-transform"
|
|
>
|
|
<div className="flex items-center justify-between">
|
|
<div className="flex items-center gap-3">
|
|
<div className="w-10 h-10 rounded-xl bg-[#D4AF37]/15 flex items-center justify-center">
|
|
<Wallet size={20} className="text-[#D4AF37]" />
|
|
</div>
|
|
<div>
|
|
<p className="text-[11px] text-[#666] font-medium uppercase tracking-widest mb-0.5">
|
|
FLH Wallet
|
|
</p>
|
|
<div className="flex items-baseline gap-2">
|
|
<span className="text-xl font-bold text-[#D4AF37]">
|
|
{flhBalance.toLocaleString()}
|
|
</span>
|
|
<span className="text-xs text-[#999]">≈ ${usdValue} USD</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<ChevronRight size={18} className="text-[#D4AF37]" />
|
|
</div>
|
|
</Link>
|
|
</div>
|
|
|
|
{/* ═══ Quick Action Grid (2x2) ═══ */}
|
|
<div className="mx-5 mb-5">
|
|
<p className="text-[11px] text-[#666] font-medium uppercase tracking-widest mb-3">
|
|
Quick Actions
|
|
</p>
|
|
<div className="grid grid-cols-2 gap-3">
|
|
{QUICK_ACTIONS.map((action) => {
|
|
const Icon = action.icon
|
|
return (
|
|
<Link
|
|
key={action.href}
|
|
href={action.href}
|
|
className="bg-[#111118] rounded-2xl border border-[#222] p-4 active:scale-[0.96] transition-transform"
|
|
>
|
|
<div className="w-10 h-10 rounded-xl bg-[#D4AF37]/10 flex items-center justify-center mb-3">
|
|
<Icon size={20} className="text-[#D4AF37]" />
|
|
</div>
|
|
<p className="text-white text-sm font-semibold">{action.label}</p>
|
|
</Link>
|
|
)
|
|
})}
|
|
</div>
|
|
</div>
|
|
|
|
{/* ═══ Settings List ═══ */}
|
|
<div className="mx-5 mb-5">
|
|
<p className="text-[11px] text-[#666] font-medium uppercase tracking-widest mb-3">
|
|
Settings
|
|
</p>
|
|
<div className="bg-[#111118] rounded-2xl border border-[#222] overflow-hidden divide-y divide-[#222]">
|
|
{SETTINGS.map((item, idx) => {
|
|
const Icon = item.icon
|
|
return (
|
|
<button
|
|
key={idx}
|
|
className="w-full flex items-center gap-3 px-4 py-4 active:bg-[#1a1a24] transition-colors text-left"
|
|
>
|
|
<div className="w-8 h-8 rounded-lg bg-[#0a0a0f] border border-[#222] flex items-center justify-center shrink-0">
|
|
<Icon size={15} className={item.color} />
|
|
</div>
|
|
<div className="flex-1 min-w-0">
|
|
<span
|
|
className={`text-sm font-medium ${
|
|
item.gold ? 'text-[#D4AF37]' : 'text-white'
|
|
}`}
|
|
>
|
|
{item.label}
|
|
</span>
|
|
{item.value && (
|
|
<span className="text-[11px] text-[#999] ml-2">{item.value}</span>
|
|
)}
|
|
</div>
|
|
<ChevronRight size={15} className="text-[#666] shrink-0" />
|
|
</button>
|
|
)
|
|
})}
|
|
</div>
|
|
</div>
|
|
|
|
{/* ═══ Sign Out / Login ═══ */}
|
|
<div className="mx-5 mb-6">
|
|
{!user ? (
|
|
<Link
|
|
href="/login"
|
|
className="w-full flex items-center justify-center gap-2 py-4 rounded-2xl gold-gradient text-bg-deep font-bold active:scale-[0.97] transition-all text-center"
|
|
>
|
|
Login
|
|
</Link>
|
|
) : (
|
|
<button
|
|
onClick={handleSignOut}
|
|
className="w-full flex items-center justify-center gap-2 py-4 rounded-2xl border border-red-900/40 bg-red-950/20 active:bg-red-950/40 transition-colors cursor-pointer"
|
|
>
|
|
<LogOut size={16} className="text-red-400" />
|
|
<span className="text-sm font-semibold text-red-400">Logout</span>
|
|
</button>
|
|
)}
|
|
</div>
|
|
|
|
{/* Bottom spacer */}
|
|
<div className="h-4" />
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|