import {Route, useRoute} from ">able/iso-router.tsx";

const Tracer =()=>
{
    const {nestedDepth, pathIndex} = useRoute();
    return <div>Depth: {nestedDepth}, Index:{pathIndex}</div>
}

export default ()=><div>
    <h1 class="p-4 bg-red-500 text-white">App</h1>
    <nav class="flex gap-10 p-6">
        <a href="/">Home</a>
        <a href="/about">About</a>
    </nav>
    <Route path={[]}>
        
        <p>home page! <Tracer/></p>
    </Route>
    <Route path={["about"]}>
        
        <nav class="flex gap-10 p-6">
            <a href="/about/more">more</a>
        </nav>
        <Route path={[]}>
            
            <p>About page! <Tracer/></p>
        </Route>
        <Route path={["more"]}>
            
            <p>more!<Tracer/></p>
        </Route>
    </Route>
</div>;