FileTreeItem.astro

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

import { type IconDefinition } from "@fortawesome/fontawesome-svg-core";
import {
  faBan,
  faFile,
  faFileCode,
  faFileImage,
  faFolder,
} from "@fortawesome/free-solid-svg-icons";

const TYPE_ICONS: { [key: string]: IconDefinition } = {
  file: faFile,
  code: faFileCode,
  image: faFileImage,
  directory: faFolder,
};

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 icon={icon} />
    {name}
    {
      gitignored && (
        <Tooltip content="Git ignored" placement="right">
          <Icon icon={faBan} />
        </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>