wip

front/views/Settings.tsx

@@ -1,6 +1,8 @@
 import "../style/settings/settings.css"
 import { MainTitle, SecondTitle } from "./component/Title"
 import {Header} from './template/Header'
+import { useState, ChangeEvent } from "react"
+import { User } from "./model/User" 
 
 export default function Settings({username} : {username : string}){
     return (
@@ -31,14 +33,30 @@ function AccountSettings(){
     );
 }
 
-function ContentAccountSettings() {
+function ContentAccountSettings({user} : {user : User}) {
-    return (
+    // Utilisez useState pour gérer l'état du champ de saisie
-        <div id="account-content">
+    const [username, setUsername] = useState({user.username});
 
-        </div>
+    // Fonction pour mettre à jour l'état lorsqu'il y a un changement dans le champ de saisie
+    const handleUsernameChange = (event :  ChangeEvent<HTMLInputElement>) => {
+        setUsername(event.target.value);
+    };
+
+    return (
+        <form id="account-content">
+            <dl>
+                <dt>Nom d'utilisateur</dt>
+                {/* Utilisez la valeur de l'état et la fonction onChange */}
+                <dd><input type="text" value={username} onChange={handleUsernameChange} /></dd>
+            </dl>
+        </form>
     );
 }
 
+function setVariable({varia} : {varia : any}){
+
+}
+
 // function InputSettings(){
 //     return(
 //         <div className="input-settings">

front/views/model/User.tsx

@@ -0,0 +1,6 @@
+export interface User {
+    id: number
+    name: string
+    email: string
+    profilePicture: string
+}