.ts
TypeScript
(application/typescript)
// 1st-party
import type { ReactIsland } from "@ethicdevs/react-monolith";
// 3rd-party
import React from "react";
// app
import type { RepositoryObject } from "../types";
import { Grid } from "../components";

export interface RepositoryCommitSummaryLineProps {
  orgSlug: string;
  repoSlug: string;
  commit: RepositoryObject;
}

const RepositoryCommitSummaryLine: ReactIsland<RepositoryCommitSummaryLineProps> =
  ({ orgSlug, repoSlug, commit }) => {
    return (
      <Grid.Row gap={8} alignItems={"flex-start"}>
        <strong>{commit.author.name}</strong>
        {" ∙ "}
        <span style={{ flex: 1 }}>
          <a href={`/${orgSlug}/${repoSlug}/show/${commit.commit}`}>
            {commit.subject}
          </a>
        </span>
        {" ∙ "}
        <span>
          <a href={`/${orgSlug}/${repoSlug}/show/${commit.commit}`}>
            {commit.abbreviated_commit}
          </a>
          {commit.abbreviated_parent.trim() != "" ? (
            <a href={`/${orgSlug}/${repoSlug}/show/${commit.parent}`}>
              {` (parent ${commit.abbreviated_parent})`}
            </a>
          ) : null}
        </span>
        {" ∙ "}
        <span>{new Date(commit.author.date).toLocaleDateString()}</span>
      </Grid.Row>
    );
  };

RepositoryCommitSummaryLine.displayName = "RepositoryCommitSummaryLine";
export default RepositoryCommitSummaryLine;