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,
  WithThemeSchemeProp,
} from "../types";
import { buildRouteLink } from "../utils/shared";
import { ButtonAnchor } from "../components/Button.styled";
import { AppRoute } from "../routes.defs";
import { Grid } from "../components/Grid";
import { useMediaQuery } from "../utils/hooks/useMediaQuery";
import { NamedColors } from "../utils/style";

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

const RepositoryHero: ReactIsland<
  RepositoryHeroProps & WithThemeSchemeProp
> = ({
  themeScheme,
  parentOrg,
  repo,
  forkedFromRepo = null,
  forksCount = 0,
  path = undefined,
  // separator = "∙",
  showForkButton = true,
  showNewButton = false,
  newButtonUrl = undefined,
  newButtonText = "New Repository",
}) => {
  const isMobile = useMediaQuery("sm");

  return (
    <Grid.Col
      fluid
      gap={16}
      style={{
        borderBottom: `1px solid ${NamedColors.BORDER_DEFAULT[themeScheme]}`,
      }}
    >
      <Grid.Row fluid nowrap alignItems={"flex-start"}>
        <Grid.Col
          nowrap
          flex={"1 0 300px"}
          style={{ minWidth: 300, marginBottom: 12 }}
        >
          <h2 style={{ margin: 0, fontSize: isMobile ? 20 : 20 }}>
            <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,
                fontSize: 16,
                fontWeight: "700",
                fontFamily: "monospace",
              }}
            >
              {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>
        )}
        {showNewButton && (
          <ButtonAnchor href={newButtonUrl}>{newButtonText}</ButtonAnchor>
        )}
      </Grid.Row>
    </Grid.Col>
  );
};

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