GitFOSS

// 1st-party
import type { ReactIsland } from "@ethicdevs/react-monolith";
// 3rd-party
import React from "react";
// generated via script[generate:prisma]
import type { Organization, Repository } from "@prisma/client";
// app
import type { RepositoryForkedFromRepoMeta } from "../types";
import { AppRoute } from "../routes.defs";
import { Grid } from "../components/Grid";
import { buildRouteLink } from "../utils/shared";

export interface RepositoryHeroProps {
  parentOrg: Organization;
  repo: Repository;
  forkedFromRepo?: RepositoryForkedFromRepoMeta | null;
  forksCount?: number;
  path?: string;
  separator?: string;
}

const RepositoryHero: ReactIsland<RepositoryHeroProps> = ({
  parentOrg,
  repo,
  forkedFromRepo = null,
  forksCount = 0,
  path = undefined,
  separator = "∙",
}) => {
  return (
    <Grid.Col fluid>
      <Grid.Row fluid alignItems={"center"}>
        <Grid.Col
          nowrap
          flex={"1 0 468px"}
          style={{ marginTop: 8, minWidth: 468 }}
        >
          <h1 style={{ margin: 0 }}>
            <a
              href={buildRouteLink(AppRoute.ORGANIZATION_DETAILS, {
                orgSlug: parentOrg.slug,
              })}
            >
              {parentOrg.displayName || parentOrg.slug}
            </a>
            {" / "}
            <a
              href={buildRouteLink(AppRoute.REPOSITORY_DETAILS, {
                orgSlug: parentOrg.slug,
                repoSlug: repo.slug,
              })}
            >
              {repo.displayName || repo.slug}
            </a>
            {` ${separator} `}
            {path == null ? (
              <span style={{ textTransform: "capitalize" }}>
                ({repo.visibility.toLowerCase()})
              </span>
            ) : (
              <span>{path}</span>
            )}
          </h1>
          <div style={{ flex: 1 }}>
            {repo.isFork && forkedFromRepo != null && (
              <h5 style={{ margin: 0, marginTop: 8 }}>
                <span>Forked From</span>
                {" ∙ "}
                <a
                  href={buildRouteLink(AppRoute.ORGANIZATION_DETAILS, {
                    orgSlug: forkedFromRepo.organization.slug,
                  })}
                >
                  {forkedFromRepo.organization.displayName ||
                    forkedFromRepo.organization.slug}
                </a>
                {" / "}
                <a
                  href={buildRouteLink(AppRoute.REPOSITORY_DETAILS, {
                    orgSlug: forkedFromRepo.organization.slug,
                    repoSlug: forkedFromRepo.slug,
                  })}
                >
                  {forkedFromRepo.displayName || forkedFromRepo.slug}
                </a>
              </h5>
            )}
          </div>
          <div style={{ marginTop: 16 }}>
            <div>
              <a
                href={buildRouteLink(AppRoute.REPOSITORY_PULL_REQUESTS, {
                  orgSlug: parentOrg.slug,
                  repoSlug: repo.slug,
                })}
              >
                Pull Requests
              </a>
            </div>
          </div>
        </Grid.Col>
        <Grid.Row nowrap style={{ minWidth: 90, marginTop: 8 }}>
          <span>{forksCount}</span>
          <a
            href={buildRouteLink(AppRoute.REPOSITORY_FORK, {
              orgSlug: parentOrg.slug,
              repoSlug: repo.slug,
            })}
            style={{ marginLeft: 8 }}
          >
            Fork it!
          </a>
        </Grid.Row>
      </Grid.Row>
    </Grid.Col>
  );
};

RepositoryHero.displayName = "RepositoryHero";
export default RepositoryHero;