61 lines
1.9 KiB
JavaScript
61 lines
1.9 KiB
JavaScript
import { useAuth } from '../context/AuthContext'
|
|
|
|
function ProfilePage() {
|
|
const { user } = useAuth()
|
|
|
|
return (
|
|
<div style={{ padding: '2rem' }}>
|
|
<div style={{ maxWidth: '800px', margin: '0 auto' }}>
|
|
<h1>Profil</h1>
|
|
|
|
<div className="card" style={{ marginTop: '1.5rem' }}>
|
|
<h2>Persönliche Daten</h2>
|
|
|
|
<div style={{ marginTop: '1rem' }}>
|
|
<div style={{ display: 'grid', gridTemplateColumns: '150px 1fr', gap: '1rem', marginBottom: '1rem' }}>
|
|
<strong>Name:</strong>
|
|
<span>{user?.name || '-'}</span>
|
|
|
|
<strong>E-Mail:</strong>
|
|
<span>{user?.email}</span>
|
|
|
|
<strong>Rolle:</strong>
|
|
<span style={{
|
|
padding: '0.25rem 0.5rem',
|
|
background: user?.role === 'admin' ? 'var(--accent)' : 'var(--surface2)',
|
|
color: user?.role === 'admin' ? 'white' : 'var(--text1)',
|
|
borderRadius: '4px',
|
|
display: 'inline-block',
|
|
fontSize: '0.875rem'
|
|
}}>
|
|
{user?.role || 'user'}
|
|
</span>
|
|
|
|
<strong>Tier:</strong>
|
|
<span style={{
|
|
padding: '0.25rem 0.5rem',
|
|
background: user?.tier === 'premium' ? 'var(--accent)' : 'var(--surface2)',
|
|
color: user?.tier === 'premium' ? 'white' : 'var(--text1)',
|
|
borderRadius: '4px',
|
|
display: 'inline-block',
|
|
fontSize: '0.875rem'
|
|
}}>
|
|
{user?.tier || 'free'}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="card" style={{ marginTop: '1.5rem' }}>
|
|
<h2>Einstellungen</h2>
|
|
<p style={{ color: 'var(--text2)', marginTop: '0.5rem' }}>
|
|
Bearbeitung folgt in Kürze
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default ProfilePage
|