import "../style/home.css" import { CSSProperties } from "react" interface Tactic { id : number name : string creation_date : string } export default function Home({ lastTactics } : { lastTactics : Tactic[] }) { return (
<Body lastTactics={lastTactics}/> </div> ) } export function Title() { return ( <div id="header"> <h1 id="IQBall"><span id="IQ">IQ</span><span id="B">B</span>all</h1> </div> ) } export function Body({ lastTactics } : { lastTactics : Tactic[] }) { const widthPersonalSpace = 70; const widthSideMenu = 100-widthPersonalSpace return ( <div id="body"> <PersonalSpace width = {widthPersonalSpace}/> <SideMenu width = {widthSideMenu} lastTactics={lastTactics} /> </div> ) } export function SideMenu({ width, lastTactics } : { width : number, lastTactics : Tactic[] }) { return ( <div id="sideMenu" style={{ width : width + "%", }}> <Team/> <Tactic lastTactics={lastTactics}/> </div> ) } export function PersonalSpace({ width }: { width : number }) { return ( <div id="personal-space" style={{ width : width + "%", }}> <h2 id="ps-title">Espace Personnel</h2> </div> ) } export function Team() { return ( <div id="team"> <h2>Mes équipes</h2> <button onClick={() => location.pathname="/tactic/new"}>+</button> </div> ) } export function Tactic({lastTactics} : { lastTactics : Tactic[]}) { const listTactic = lastTactics.map(tactic => <li key = {tactic.id} > {tactic.name} : {tactic.creation_date} <button onClick={() => {location.pathname="/tactic/"+tactic.id+"/edit"}}>open</button> </li> ); return ( <div id="tactic"> <div id="titreTactic"> <h2>Mes cinq dernières stratégies</h2> <button id="createTactic" onClick={() => (location.pathname = "/tactic/new")}>+</button> <ul> {listTactic} </ul> </div> </div> ) }