~repos /website

---
import { Icon } from "astro-icon/components";
import { type CollectionEntry } from "astro:content";
import allIcons from "@iconify-json/vscode-icons/icons.json" assert { type: "json" };
import RepoLayout from "@/layouts/RepoLayout.astro";
import { resolveFileIcon, type FileNode } from "@/utils/files";

type Props = {
  repo: CollectionEntry<"repos">;
  file: FileNode;
};

const { repo, file } = Astro.props;
const { pathname } = Astro.url;
const iconName = resolveFileIcon(file.name, file.ext);
const fileType = allIcons.icons[`file-type-${iconName}`]
  ? `file-type-${iconName}`
  : "default-file";
---

<RepoLayout repo={repo}>
  {
    (
      <div>
        <hr />
        <div class="title">
          <Icon
            name={`vscode-icons:${fileType}`}
            size="24px"
            color="hsl(0deg 75% 75%)"
          />
          <h3>{file.name}</h3>
        </div>
        <hr />
        <div class="nav">
          <div>
            <a
              aria-current={
                pathname == `/repos/${repo.id}/files/${file.name}`
                  ? "true"
                  : "false"
              }
              href={`/repos/${repo.id}/files/${file.name}`}
            >
              Contents
            </a>
          </div>
          <div>|</div>
          <div>
            <a
              aria-current={
                pathname == `/repos/${repo.id}/files/${file.name}/history`
                  ? "true"
                  : "false"
              }
              href={`/repos/${repo.id}/files/${file.name}/history`}
            >
              History
            </a>
          </div>
          <div>|</div>
          <div>
            <a
              aria-current={
                pathname == `/repos/${repo.id}/files/${file.name}/blame`
                  ? "true"
                  : "false"
              }
              href={`/repos/${repo.id}/files/${file.name}/blame`}
            >
              Blame
            </a>
          </div>
        </div>
        <hr />
        <slot />
      </div>
    )
  }
</RepoLayout>
<style>
  .nav {
    display: flex;
    align-items: center;
    margin-bottom: 0.5rem;

    @media (max-width: 720px) {
      margin-top: 0.5rem;
    }

    div {
      padding-right: 0.5rem;
    }

    a {
      font-size: 1rem;
      font-weight: 500;
      padding-right: 0.5rem;
      cursor: pointer;
      color: var(--color-link);

      &[aria-current="true"] {
        text-underline-offset: 4px;
        text-decoration: underline;
      }
    }
  }

  .title {
    display: flex;
    align-items: center;
    margin-top: 0.75rem;
    margin-bottom: 0.5rem;
    font-size: 1.1rem;
    font-weight: 500;
  }

  svg[data-icon] {
    font-weight: 600;
    margin-right: 4px;
  }
</style>