export const route = '/users/:userID'

export const server = {
    addContextProps ({contextProps, Page}) {
        const users = db.find('users')
    
        return {users}
    },
    render({Page}) {
        jsxParse(Page, contextProps.pageProps)
    }
}


export const client = () => { 
    const ages = document.querySelectorAll('.age')
    
    ages.forEach(age => {
        age.addEventListener('click', 
            ({currentTarget}) => 
                currentTarget.innerText = +currentTarget.innerText + 1
        )
    })
}


export const page = ({users}) => {
    const Users = users.map(user=> (
        <div>
            <div>{user.name}</div>
            <div class='age'>{user?.age ?? 0}</div>
        </div>))
     
    return (
        <div class='page'>
            <Users />
        </div>
    )
}