.ts
TypeScript
(application/typescript)
// 1st-party
import type { ReactView } 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 { CommonProps, RepositoryLog } from "../../types";
import {
  Card,
  Grid,
  IslandWrapper,
  Layout,
  PageWrapper,
} from "../../components";
// app islands
import RepositoryCommitSummaryLine from "../../islands/RepositoryCommitSummaryLine";
import RepositoryHero from "../../islands/RepositoryHero";

export interface RepositoryCommitsLogViewProps extends CommonProps {
  currentRef: string;
  history: RepositoryLog[];
  parentOrg: Organization;
  repo: Repository;
}

const RepositoryCommitsLogView: ReactView<RepositoryCommitsLogViewProps> = ({
  commonProps,
  currentRef,
  history,
  parentOrg,
  repo,
}) => {
  return (
    <Layout {...commonProps}>
      <PageWrapper>
        <IslandWrapper data-islandid={`${RepositoryHero.name}$$0`}>
          <RepositoryHero parentOrg={parentOrg} path={"Commits"} repo={repo} />
        </IslandWrapper>
        <Grid.Col style={{ width: "100%", marginTop: 32 }}>
          {history.map((commit, idx) => (
            <Card
              key={commit.commit}
              data-islandid={`${RepositoryCommitSummaryLine.name}$$${idx}`}
              style={{
                width: "100%",
                marginTop: idx >= 1 ? 4 : 32,
                padding: 8,
              }}
              themeScheme={commonProps.themeScheme}
            >
              <RepositoryCommitSummaryLine
                commit={commit}
                currentRef={currentRef}
                orgSlug={parentOrg.slug}
                repoSlug={repo.slug}
              />
            </Card>
          ))}
        </Grid.Col>
      </PageWrapper>
    </Layout>
  );
};

RepositoryCommitsLogView.displayName = "RepositoryCommitsLogView";
export default RepositoryCommitsLogView;