GitFOSS

// 1st-party
import type { ReactView } from "@ethicdevs/react-monolith";
// 3rd-party
import React from "react";
// generated via script[prisma:generate]
import type { Organization, User } from "@prisma/client";
// app
import type {
  CommonProps,
  LinguistFileInfos,
  RepositoryFileContent,
  RepositoryLog,
  RepositoryWithForkedFromRepo,
} from "../../types";
import {
  Grid,
  Layout,
  PageWrapper,
  Card,
  IslandWrapper,
} from "../../components";
// app islands
import Code, { getThemedCodeCss } from "../../islands/Code";
import RepositoryCommitSummaryLine from "../../islands/RepositoryCommitSummaryLine";
import RepositoryHero from "../../islands/RepositoryHero";

export interface RepositoryBrowserViewProps extends CommonProps {
  currentRef: string;
  currentUser: null | User;
  fileContent: RepositoryFileContent;
  lastCommit: null | RepositoryLog;
  linguistInfos: LinguistFileInfos;
  parentOrg: Organization;
  path: string;
  repo: RepositoryWithForkedFromRepo;
}

const RepositoryBrowserView: ReactView<RepositoryBrowserViewProps> = ({
  commonProps,
  currentRef,
  fileContent,
  lastCommit,
  linguistInfos,
  parentOrg,
  path,
  repo,
}) => {
  return (
    <Layout {...commonProps}>
      <PageWrapper>
        <IslandWrapper data-islandid={`${RepositoryHero.name}$$0`}>
          <RepositoryHero
            forkedFromRepo={repo.forkedFromRepo}
            forksCount={repo.forks.length}
            parentOrg={parentOrg}
            path={path}
            repo={repo}
            separator={"/"}
          />
        </IslandWrapper>
        <Grid.Col fluid style={{ marginTop: 32 }}>
          {lastCommit && (
            <Card
              data-islandid={`${RepositoryCommitSummaryLine.name}$$0`}
              style={{ width: "100%", padding: 8 }}
              themeScheme={commonProps.themeScheme}
            >
              <RepositoryCommitSummaryLine
                commit={lastCommit}
                currentRef={currentRef}
                orgSlug={parentOrg.slug}
                repoSlug={repo.slug}
              />
            </Card>
          )}
          <Card
            style={{
              width: "100%",
              padding: 8,
              marginTop: lastCommit != null ? 8 : 0,
            }}
            themeScheme={commonProps.themeScheme}
          >
            <Grid.Row
              nowrap
              gap={12}
              alignItems={"center"}
              style={{ width: "100%" }}
            >
              <div
                style={{
                  display: "flex",
                  alignItems: "center",
                  justifyContent: "center",
                  height: 24,
                  width: 24,
                  background: linguistInfos.color,
                  borderRadius: 4,
                  color: "white",
                  fontSize:
                    linguistInfos.extensions.length > 0 &&
                    linguistInfos.extensions[0].slice(1).length <= 4
                      ? linguistInfos.extensions[0].slice(1).length <= 2
                        ? 12
                        : 9
                      : 6,
                }}
              >
                {linguistInfos.extensions.length > 0
                  ? linguistInfos.extensions[0]
                  : ""}
              </div>
              <div>
                <strong>
                  {linguistInfos.languageDisplayName ||
                    `lang: ${linguistInfos.language}`}
                </strong>
              </div>
              <div>
                <span>({linguistInfos.mimeType})</span>
              </div>
            </Grid.Row>
          </Card>
          {linguistInfos.type === "image" ? (
            <Card
              style={{ width: "100%", marginTop: 8 }}
              themeScheme={commonProps.themeScheme}
            >
              <img
                src={fileContent.content}
                style={{ width: "100%", height: "auto" }}
              />
            </Card>
          ) : (
            <>
              {getThemedCodeCss(commonProps.themeScheme)}
              <Card
                data-islandid={`${Code.name}$$0`}
                style={{
                  width: "100%",
                  marginTop: 8,
                  padding: 0,
                  border: "none",
                }}
                themeScheme={commonProps.themeScheme}
              >
                <Code
                  code={fileContent.content}
                  language={linguistInfos.language}
                  themeScheme={commonProps.themeScheme}
                />
              </Card>
            </>
          )}
        </Grid.Col>
      </PageWrapper>
    </Layout>
  );
};

RepositoryBrowserView.displayName = "RepositoryBrowserView";
export default RepositoryBrowserView;