.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 } from "../../types";
import { Layout, PageWrapper } from "../../components";

export interface RepositoryExploreViewProps extends CommonProps {
  repositories: (Repository & { parentOrg: Organization })[];
}

const RepositoryExploreView: ReactView<RepositoryExploreViewProps> = ({
  commonProps,
  repositories,
}) => {
  return (
    <Layout {...commonProps} showSideMenu={false}>
      <PageWrapper>
        {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>
            </div>
          </div>
        ))}
      </PageWrapper>
    </Layout>
  );
};

RepositoryExploreView.displayName = "RepositoryExploreView";
export default RepositoryExploreView;