75 lines
3.3 KiB
TypeScript
75 lines
3.3 KiB
TypeScript
'use client'
|
|
|
|
import { useAuth } from '@/lib/hooks/useAuth'
|
|
import { Button } from '@/components/common/Button'
|
|
import { UserCircleIcon } from '@heroicons/react/24/solid'
|
|
|
|
export default function ProfilePage() {
|
|
const { user, logout } = useAuth()
|
|
|
|
if (!user) {
|
|
return null
|
|
}
|
|
|
|
return (
|
|
<div className="space-y-6">
|
|
<div>
|
|
<h1 className="text-3xl font-bold text-gray-900 dark:text-white font-heading">
|
|
My Profile
|
|
</h1>
|
|
<p className="mt-2 text-gray-600 dark:text-gray-400">
|
|
Manage your account settings and preferences.
|
|
</p>
|
|
</div>
|
|
|
|
<div className="bg-white dark:bg-gray-800 shadow rounded-lg overflow-hidden">
|
|
<div className="px-4 py-5 sm:px-6 border-b border-gray-200 dark:border-gray-700">
|
|
<h3 className="text-lg leading-6 font-medium text-gray-900 dark:text-white">
|
|
User Information
|
|
</h3>
|
|
</div>
|
|
<div className="px-4 py-5 sm:p-6">
|
|
<div className="flex items-center mb-6">
|
|
<div className="h-20 w-20 rounded-full bg-primary-100 flex items-center justify-center text-primary-600">
|
|
<UserCircleIcon className="h-16 w-16" />
|
|
</div>
|
|
<div className="ml-6">
|
|
<h2 className="text-xl font-bold text-gray-900 dark:text-white">
|
|
{user.display_name || 'Community Member'}
|
|
</h2>
|
|
<p className="text-gray-500 dark:text-gray-400">{user.email}</p>
|
|
{user.is_verified && (
|
|
<span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800 mt-2">
|
|
Verified Member
|
|
</span>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="border-t border-gray-200 dark:border-gray-700 pt-6">
|
|
<dl className="grid grid-cols-1 gap-x-4 gap-y-6 sm:grid-cols-2">
|
|
<div className="sm:col-span-1">
|
|
<dt className="text-sm font-medium text-gray-500 dark:text-gray-400">
|
|
User ID
|
|
</dt>
|
|
<dd className="mt-1 text-sm text-gray-900 dark:text-white font-mono">
|
|
{user.id}
|
|
</dd>
|
|
</div>
|
|
{/* Add more fields here as needed */}
|
|
</dl>
|
|
</div>
|
|
</div>
|
|
<div className="bg-gray-50 dark:bg-gray-900 px-4 py-4 sm:px-6 flex justify-end">
|
|
<Button
|
|
variant="secondary"
|
|
onClick={() => logout()}
|
|
className="text-red-600 hover:text-red-700 border-red-200 hover:border-red-300 hover:bg-red-50"
|
|
>
|
|
Sign Out
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|