{tactics.map(tactic => ( <div>{tactic.name}</div> ))} <Body tactics={tactics}/> </div> ) } export function Title() { return ( <div id="header"> <h1 id="IQBall"><span id="IQ">IQ</span><span id="B">B</span>all</h1> <img src=""></img> </div> ) } export function Body({tactics} : {tactics : Tactic[]}) { return ( <div id="body"> <Team/> <Tactic tactics={tactics}/> </div> ) } export function Team() { return ( <div id="team"> <h2>Mes équipes</h2> <button id="createTeam">+</button> </div> ) } export function Tactic({tactics} : { tactics : Tactic[]}) { const listTactic = tactics.map(tactic => <li key = {tactic.id} > {tactic.name} : {tactic.creationDate} </li> ); return ( <div id="tactic"> <div id="titreTactic"> <h2>Mes stratégies</h2> <button id="createTactic" onClick={() => (location.pathname = "/tactic/new")}>+</button> <ul> {listTactic} </ul> </div> </div> ) }

import "../style/home.css" interface Tactic { id : number name : string creationDate : number } export default function Home({ tactics } : { tactics : Tactic[] }) { console.log(tactics); return (

{tactics.map(tactic => ( <div>{tactic.name}</div> ))} <Body tactics={tactics}/> </div> ) } export function Title() { return ( <div id="header"> <h1 id="IQBall"><span id="IQ">IQ</span><span id="B">B</span>all</h1> <img src=""></img> </div> ) } export function Body({tactics} : {tactics : Tactic[]}) { return ( <div id="body"> <Team/> <Tactic tactics={tactics}/> </div> ) } export function Team() { return ( <div id="team"> <h2>Mes équipes</h2> <button id="createTeam">+</button> </div> ) } export function Tactic({tactics} : { tactics : Tactic[]}) { const listTactic = tactics.map(tactic => <li key = {tactic.id} > {tactic.name} : {tactic.creationDate} </li> ); return ( <div id="tactic"> <div id="titreTactic"> <h2>Mes stratégies</h2> <button id="createTactic" onClick={() => (location.pathname = "/tactic/new")}>+</button> <ul> {listTactic} </ul> </div> </div> ) }