:wrench: Create type mech

dev-front/src/Mech.tsx

@@ -0,0 +1,8 @@
+type Mech = {
+    id: number;
+    name: string;
+    kind: string;
+    health: number;
+}
+
+export default Mech;

dev-front/src/mech/squad/Member.tsx

@@ -1,15 +1,16 @@
 import React from 'react';
 import logo from '../../logo.svg';
+import Mech from '../../Mech';
 
-function Member({mechName} : Record<'mechName', String>) {
+function Member({mech} : Record<'mech', Mech>) {
     return (
         <div className='mech-member'>
-            <h3>{mechName}</h3>
+            <h3>{mech.name}</h3>
             <div className='mech-description'>
                 <img src={logo} alt='Mech picture' />
                 <ul className='mech-stats'>
-                    <li>Stat1 = Prime</li>
-                    <li>Stat2 = 3</li>
+                    <li>Class : {mech.kind}</li>
+                    <li>Health : {mech.health}</li>
                 </ul>
             </div>
             <button>Remove</button>

dev-front/src/mech/squad/Squad.tsx

@@ -1,15 +1,20 @@
 import React from 'react';
 import Member from './Member';
 import logo from '../../logo.svg';
+import Mech from '../../Mech';
 
 function Squad() {
+
+    const it1: Mech = {id: 1, name: 'HelloType', kind: 'K1', health: 3};
+    const it2: Mech = {id: 2, name: 'Giant Mech', kind: 'K1', health: 3};
+    const it3: Mech = {id: 3, name: 'Techno-prop', kind: 'K1', health: 4};
     return (
         <article className='custom-squad'>
             <h2>Custom squad</h2>
             <div className='mech-members'>
-                <Member mechName='Mech 1'/>
-                <Member mechName='Giant Mech'/>
-                <Member mechName='Techno-prop'/>
+                <Member mech={it1}/>
+                <Member mech={it2}/>
+                <Member mech={it3}/>
             </div>
             <div className='squad-description'>
                 <label htmlFor='squad-description-field-id'>Squad description</label>