FileTreeItem.astro

---
import Icon from "./Icon.astro";
import Tooltip from "./Tooltip.astro";

const TYPE_ICONS = {file: "file", code: "file-code", image: "file-image", directory: "folder"}

const {name, type, open, gitignored} = Astro.props;

const icon = TYPE_ICONS[type];

if (icon === undefined) {
    throw new Error(`Invalid file tree item type: ${type}`);
}

export interface Props {
    /** Name of the file */
    name: string;
    /** Type of the entry. This dictates the icon that will be used */
    type: "file" | "code" | "image" | "directory";
    /** Whether it is ignored and should have a little "blocked" icon next to it. Defaults to false. */
    gitignored?: boolean
    /** Whether this element should be open/expanded by default. Defaults to false. */
    open?: boolean;
}
---

<details class="file-tree-item" open={open}>
    <summary>
        <Icon name={icon} group="solid"/>
        {name}
        {gitignored && <Tooltip content="Git ignored" placement="right"><Icon name="ban" group="solid"/></Tooltip>}
    </summary>
    <slot/>
</details>

<style lang="scss">
details.file-tree-item {
    summary {
        list-style: none;
        margin-left: 1em;

        :global(i.fa-solid) {
            margin-right: 0.5em;
        }
        :global(i.fa-ban) {
            margin: 0px 0px 0px 1em;
        }
    }
    :global(p) {
        margin-top: 0px;
        margin-bottom: 0px;
    }

    & > :global(*) {
        margin-left: 2em;
    }
}
</style>