.ts
TypeScript
(application/typescript)
// 1st-party
import type { ReactIsland } from "@ethicdevs/react-monolith";
// 3rd-party
import React from "react";
// generated via script[generate:prisma]
import { Organization, Repository } from "@prisma/client";

export interface RepositoriesListProps {
  repositories: Array<Repository & { parentOrg: Organization }>;
}

const RepositoriesList: ReactIsland<RepositoriesListProps> = ({
  repositories,
}) => {
  return (
    <>
      {repositories.map((repo) => (
        <div key={repo.id}>
          <h1>
            <a href={`/${repo.parentOrg.slug}/${repo.slug}`}>
              {repo.parentOrg.displayName || repo.parentOrg.slug}
              {" / "}
              {repo.displayName || repo.slug}
              {" ∙ "}
              <span style={{ textTransform: "capitalize" }}>
                ({repo.visibility.toLowerCase()})
              </span>
            </a>
          </h1>
          <div>
            <p>{repo.shortDescription}</p>
            {repo.lastPushedAt != null && (
              <p style={{ margin: 0, marginTop: 8 }}>
                Last push: {new Date(repo.lastPushedAt).toUTCString()}
              </p>
            )}
          </div>
        </div>
      ))}
    </>
  );
};

RepositoriesList.displayName = "RepositoriesList";
export default RepositoriesList;