GitFOSS

// 1st-party
import type { ReactIsland } 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 { WithThemeSchemeProp } from "../types";
import { AppRoute } from "../routes.defs";
import { Card } from "../components/Card.styled";
import { Grid } from "../components/Grid";
import { buildRouteLink } from "../utils/shared";
import { breakpoints, NamedColors } from "../utils/style";

export interface RepositoriesListProps {
  repositories: (Repository & { parentOrg: Organization })[];
}

const RepositoriesList: ReactIsland<
  RepositoriesListProps & WithThemeSchemeProp
> = ({ repositories, themeScheme }) => {
  return (
    <Grid.Row
      fluid
      gap={4}
      alignItems={"stretch"}
      justifyContent={"stretch"}
      style={{ marginTop: 16 }}
    >
      <style>{`
        .card {
          min-width: 300px;
          width: 100%;
          flex: 0 0 33%;
          min-height: 200px;
          gap: 8px;
        }

        @media only screen and (max-width: ${breakpoints.sml}) {
          .card {
            flex: .3;
            min-width: calc(33% - 8px);
          }
        }

        @media only screen and (max-width: ${breakpoints.sm}) {
          .card {
            flex: .5;
            min-width: calc(50% - 8px);
          }
        }

        @media only screen and (max-width: ${breakpoints.s}) {
          .card {
            flex: 1;
            min-width: calc(100% - 8px);
          }
        }
      `}</style>
      {repositories.map((repo) => (
        <Card key={repo.id} themeScheme={themeScheme} className="card">
          <Grid.Row fluid nowrap>
            <h1 style={{ margin: 0, flex: 1 }}>
              <a
                href={buildRouteLink(AppRoute.REPOSITORY_DETAILS, {
                  orgSlug: repo.parentOrg.slug,
                  repoSlug: repo.slug,
                })}
              >
                {repo.parentOrg.displayName || repo.parentOrg.slug}
                {" / "}
                {repo.displayName || repo.slug}
                {" ∙ "}
                <span style={{ textTransform: "capitalize" }}>
                  ({repo.visibility.toLowerCase()})
                </span>
              </a>
            </h1>
            {repo.isFork && (
              <p style={{ margin: 0, marginTop: 8 }}>
                <code>[fork]</code>
              </p>
            )}
          </Grid.Row>
          <Grid.Col fluid gap={8}>
            <p style={{ margin: 0 }}>{repo.shortDescription}</p>
            {repo.lastPushedAt != null && (
              <p
                style={{
                  margin: 0,
                  fontSize: 14,
                  color: NamedColors.TEXT_MUTED[themeScheme],
                }}
              >
                Last push: {new Date(repo.lastPushedAt).toLocaleString()}
              </p>
            )}
          </Grid.Col>
        </Card>
      ))}
    </Grid.Row>
  );
};

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