125 lines
4.1 KiB
TypeScript
125 lines
4.1 KiB
TypeScript
import { type Component, Index, For } from "solid-js";
|
|
import { Accordion } from "@ark-ui/solid";
|
|
|
|
import { ShevronSmallDown } from "@icons";
|
|
import type { TreeProps } from "../types";
|
|
|
|
export const Tree: Component<TreeProps> = props => {
|
|
const { currentRoute, currentModule, currentClass, items } =
|
|
props;
|
|
|
|
const typeKeys = items!.types && Object.keys(items!.types);
|
|
|
|
const tutorials =
|
|
items!.tutorials && items!.tutorials
|
|
? items!.tutorials.configuration
|
|
: null;
|
|
|
|
return (
|
|
<nav class="navtree">
|
|
<Accordion.Root
|
|
defaultValue={
|
|
currentRoute === "types" ? ["Types"] : ["Configuration"]
|
|
}
|
|
collapsible
|
|
multiple
|
|
>
|
|
<Accordion.Item value={"Configuration"}>
|
|
<Accordion.ItemTrigger>
|
|
<Accordion.ItemIndicator>
|
|
<ShevronSmallDown class={"nav-shevron"} />
|
|
</Accordion.ItemIndicator>
|
|
<p>
|
|
<a href={"/docs/configuration"}>Configuration</a>
|
|
</p>
|
|
</Accordion.ItemTrigger>
|
|
<Accordion.ItemContent>
|
|
<For each={tutorials}>
|
|
{item => (
|
|
<div
|
|
class={`arktree-item ${currentModule === item.type ? "__current-type-doc" : ""}`}
|
|
>
|
|
<a href={`/docs/configuration/${item.type}`}>
|
|
{item.name}
|
|
</a>
|
|
</div>
|
|
)}
|
|
</For>
|
|
</Accordion.ItemContent>
|
|
</Accordion.Item>
|
|
<Accordion.Item value={"Types"}>
|
|
<Accordion.ItemTrigger>
|
|
<Accordion.ItemIndicator>
|
|
<ShevronSmallDown class={"nav-shevron"} />
|
|
</Accordion.ItemIndicator>
|
|
<p>
|
|
<a href={"/docs/types"}>Type Definitions</a>
|
|
</p>
|
|
</Accordion.ItemTrigger>
|
|
<Accordion.ItemContent>
|
|
<Index each={typeKeys}>
|
|
{typeKey => {
|
|
return (
|
|
<Accordion.Root
|
|
defaultValue={
|
|
currentModule === typeKey()
|
|
? [typeKey()]
|
|
: [""]
|
|
}
|
|
multiple
|
|
collapsible
|
|
>
|
|
<Accordion.Item
|
|
value={typeKey()}
|
|
id={typeKey()}
|
|
class={
|
|
typeKey() === currentModule
|
|
? "__current-type-doc"
|
|
: ""
|
|
}
|
|
>
|
|
<Accordion.ItemTrigger
|
|
id={`${typeKey()}:button`}
|
|
>
|
|
<Accordion.ItemIndicator>
|
|
<ShevronSmallDown
|
|
class={"nav-shevron"}
|
|
/>
|
|
</Accordion.ItemIndicator>
|
|
<p>
|
|
<a href={`/docs/types/${typeKey()}`}>
|
|
{typeKey()}
|
|
</a>
|
|
</p>
|
|
</Accordion.ItemTrigger>
|
|
<Accordion.ItemContent>
|
|
<For each={items!.types[typeKey()]}>
|
|
{submodule => (
|
|
<div
|
|
class={
|
|
currentClass === submodule.name
|
|
? "__current-type-doc"
|
|
: ""
|
|
}
|
|
>
|
|
<a
|
|
href={`/docs/types/${submodule.type}/${submodule.name}`}
|
|
>
|
|
{submodule.name}
|
|
</a>
|
|
</div>
|
|
)}
|
|
</For>
|
|
</Accordion.ItemContent>
|
|
</Accordion.Item>
|
|
</Accordion.Root>
|
|
);
|
|
}}
|
|
</Index>
|
|
</Accordion.ItemContent>
|
|
</Accordion.Item>
|
|
</Accordion.Root>
|
|
</nav>
|
|
);
|
|
};
|