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 { buildRouteLink } from "../utils/shared";
import { ButtonAnchor } from "../components/Button.styled";
import { AppRoute } from "../routes.defs";
import { Grid } from "../components/Grid";

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

const RepositoryHero: ReactIsland<RepositoryHeroProps> = ({
  parentOrg,
  repo,
  forkedFromRepo = null,
  forksCount = 0,
  path = undefined,
  separator = "∙",
  showForkButton = true,
}) => {
  return (
    <Grid.Col fluid gap={16}>
      <Grid.Row fluid alignItems={"center"}>
        <Grid.Col nowrap flex={"1 0 468px"} style={{ 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>
        </Grid.Col>
        {showForkButton && (
          <ButtonAnchor
            href={buildRouteLink(AppRoute.REPOSITORY_FORK, {
              orgSlug: parentOrg.slug,
              repoSlug: repo.slug,
            })}
          >
            <Grid.Row
              nowrap
              justifyContent={"center"}
              alignItems={"center"}
              gap={8}
            >
              Fork
              <span
                style={{
                  padding: "2px 6px",
                  minWidth: 20,
                  //
                  background: "rgba(0,0,0,0.1)",
                  borderRadius: 8,

                  fontSize: 12,
                }}
              >
                {forksCount}
              </span>
            </Grid.Row>
          </ButtonAnchor>
        )}
      </Grid.Row>
      <Grid.Col fluid nowrap gap={16}>
        <a
          href={buildRouteLink(AppRoute.REPOSITORY_PULL_REQUESTS, {
            orgSlug: parentOrg.slug,
            repoSlug: repo.slug,
          })}
        >
          Pull Requests
        </a>
      </Grid.Col>
    </Grid.Col>
  );
};

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