69 lines
2.1 KiB
TypeScript
69 lines
2.1 KiB
TypeScript
import React from 'react';
|
|
import { Header, Text, Input, Button, Avatar } from '../components/sketchy';
|
|
import type { ScreenProps } from './index';
|
|
|
|
export function UpdateProfileScreen({ navigate }: ScreenProps) {
|
|
return (
|
|
<div style={{ display: 'flex', flexDirection: 'column', height: '100%' }}>
|
|
<Header
|
|
title="Modifier le profil"
|
|
left={<span onClick={() => navigate('profile')} style={{ cursor: 'pointer' }}>✕</span>}
|
|
/>
|
|
|
|
{/* Content */}
|
|
<div style={{ flex: 1, padding: 16, overflow: 'auto' }}>
|
|
{/* Photo */}
|
|
<div style={{ textAlign: 'center', marginBottom: 24 }}>
|
|
<Avatar initials="MD" size="lg" />
|
|
<Button style={{ marginTop: 12 }}>
|
|
Changer la photo
|
|
</Button>
|
|
</div>
|
|
|
|
<div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
|
|
<div>
|
|
<Text style={{ marginBottom: 6, fontSize: 14 }}>Prénom *</Text>
|
|
<Input defaultValue="Marie" />
|
|
</div>
|
|
|
|
<div>
|
|
<Text style={{ marginBottom: 6, fontSize: 14 }}>Nom *</Text>
|
|
<Input defaultValue="Dupont" />
|
|
</div>
|
|
|
|
<div>
|
|
<Text style={{ marginBottom: 6, fontSize: 14 }}>Pseudo</Text>
|
|
<Input defaultValue="@mariedupont" />
|
|
</div>
|
|
|
|
<div>
|
|
<Text style={{ marginBottom: 6, fontSize: 14 }}>Localisation</Text>
|
|
<Input defaultValue="Lyon, France" placeholder="Ville, Pays" />
|
|
</div>
|
|
|
|
<div>
|
|
<Text style={{ marginBottom: 6, fontSize: 14 }}>Bio</Text>
|
|
<textarea
|
|
className="sketchy-input"
|
|
defaultValue="Passionnée de transition écologique et de rencontres humaines."
|
|
rows={3}
|
|
style={{ resize: 'none' }}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Footer */}
|
|
<div style={{ padding: 16, borderTop: '2px solid var(--sketch-black)' }}>
|
|
<Button
|
|
variant="primary"
|
|
style={{ width: '100%' }}
|
|
onClick={() => navigate('profile')}
|
|
>
|
|
Enregistrer
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|