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, marginBottom: 12 }}
        >
          <h2 style={{ margin: 0 }}>
            <a
              style={{ whiteSpace: "nowrap" }}
              href={buildRouteLink(AppRoute.ORGANIZATION_DETAILS, {
                orgSlug: parentOrg.slug,
              })}
            >
              {parentOrg.displayName || parentOrg.slug}
            </a>
            {" / "}
            <a
              style={{ whiteSpace: "nowrap" }}
              href={buildRouteLink(AppRoute.REPOSITORY_DETAILS, {
                orgSlug: parentOrg.slug,
                repoSlug: repo.slug,
              })}
            >
              {repo.displayName || repo.slug}
            </a>
          </h2>
          <div style={{ flex: 1 }}>
            <h3 style={{ whiteSpace: "nowrap", margin: 0, marginTop: 4 }}>
              {path || "Files"}
            </h3>
          </div>
          <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>
  );
};

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