eno/example/app.tsx

120 lines
3.2 KiB
TypeScript

import React from "react";
import * as Iso from "@eno/iso";
import * as C from "./tree-menu.tsx";
/*
const delay =(inMS:number)=>
{
return new Promise((accept)=>
{
setTimeout(()=>
{
accept({default:()=>
{
return <h1>loooooool</h1>;
}});
}, inMS);
});
}
const LOL = React.lazy(()=>delay(3000));
*/
const Comp = React.lazy(()=>import("./deep/component.tsx"));
export default ()=>
{
const [stack] = React.useContext(Iso.Meta.Context);
return <div class="p-4 font-sans">
<Iso.Meta.Metas title="Main Page!" description="its great"/>
<nav class="p-4">
<a class="text-red-500" href="/">Home</a>
<a href="/about">About</a>
</nav>
<C.Group>
<C.Button></C.Button>
<C.Menu>
<C.Group>
<C.Button></C.Button>
<C.Menu>
<p>hello!</p>
<p>hello!</p>
<p>hello!</p>
<p>hello!</p>
<p>hello!</p>
<p>hello!</p>
<p>hello!</p>
</C.Menu>
</C.Group>
<p>hello!</p>
<p>hello!</p>
<p>hello!</p>
<p>hello!</p>
<p>hello!</p>
<p>hello!</p>
<p>hello!</p>
</C.Menu>
</C.Group>
<C.Group>
<C.Button></C.Button>
<C.Menu>
<C.Group>
<C.Button></C.Button>
<C.Menu>
<p>hello!</p>
<p>hello!</p>
<p>hello!</p>
<p>hello!</p>
<p>hello!</p>
<p>hello!</p>
<p>hello!</p>
</C.Menu>
</C.Group>
<p>hello!</p>
<p>hello!</p>
<p>hello!</p>
<p>hello!</p>
<p>hello!</p>
<p>hello!</p>
<p>hello!</p>
</C.Menu>
</C.Group>
<h1 class="my-2 font(bold serif) text(3xl)">Title!!</h1>
<h2>suspended:</h2>
<React.Suspense fallback={<div>Loading!</div>}>
<Comp/>
</React.Suspense>
<Iso.Switch>
<Iso.Case value="/">
<p>thing1</p>
<p>thing2</p>
</Iso.Case>
<Iso.Case value="page">
<Iso.Switch>
<Iso.Case value="about-us">
<>
<Iso.Meta.Metas title="About US" concatListed=" | "/>
About us!
</>
</Iso.Case>
<Iso.Case default>sorry no page</Iso.Case>
</Iso.Switch>
</Iso.Case>
<Iso.Case value="lol/idk">lol/idk</Iso.Case>
<Iso.Case default>
<>
<Iso.Meta.Metas description="a 404 has occurred"/>
<p>404!</p>
</>
</Iso.Case>
</Iso.Switch>
</div>;
};