Something went wrong. Try again.
Monorepo for Tangled forked from tangled.org/core
Something went wrong. Try again.
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105import { Card, Row, Col } from "../shared/layout";import { TangledLogo } from "../shared/logo";import { CardHeader } from "../shared/card-header";import { FooterStats } from "../shared/footer-stats";import { CardFooter } from "../shared/card-footer";import { COLORS, TYPOGRAPHY } from "../shared/constants";import { pluralize } from "../../lib/pluralize";import type { CommitCardData } from "../../validation";
const BAR_HEIGHT = 28;
interface DiffBarProps { additions: number; deletions: number; filesChanged: number; shortHash: string;}
function DiffBar({ additions, deletions, filesChanged, shortHash }: DiffBarProps) { const share = additions / (additions + deletions); return ( <Col style={{ gap: 18 }}> <Row style={{ height: BAR_HEIGHT, width: "100%", gap: 6 }}> {additions > 0 ? ( <div style={{ display: "flex", height: BAR_HEIGHT, flexGrow: share, borderRadius: 8, backgroundColor: COLORS.diff.additions.text, }} /> ) : null} {deletions > 0 ? ( <div style={{ display: "flex", height: BAR_HEIGHT, flexGrow: 1 - share, borderRadius: 8, backgroundColor: COLORS.diff.deletions.text, }} /> ) : null} </Row> <Row style={{ gap: 36 }}> <span style={{ ...TYPOGRAPHY.body, color: COLORS.diff.additions.text }}> +{additions} {pluralize("addition", additions)} </span> <span style={{ ...TYPOGRAPHY.body, color: COLORS.diff.deletions.text }}> -{deletions} {pluralize("deletion", deletions)} </span> <span style={{ ...TYPOGRAPHY.body, color: COLORS.textSecondary }}> {filesChanged} {pluralize("file", filesChanged)} · {shortHash} </span> </Row> </Col> );}
export function CommitCard(data: CommitCardData) { const hasDiff = data.additions + data.deletions > 0; return ( <Card> <Col style={{ gap: 40 }}> <Col style={{ gap: 32 }}> <CardHeader avatarUrl={data.avatarUrl} ownerHandle={data.ownerHandle} repoName={data.repoName} /> <div style={{ ...TYPOGRAPHY.title, color: COLORS.text, display: "block", lineClamp: hasDiff ? 2 : `3 "... ${data.shortHash}"`, }}> {data.subject} </div> </Col>
{hasDiff ? ( <DiffBar additions={data.additions} deletions={data.deletions} filesChanged={data.filesChanged} shortHash={data.shortHash} /> ) : null} </Col>
<CardFooter> <FooterStats createdAt={data.createdAt} authorHandle={data.authorHandle} authorAvatarUrl={data.authorAvatarUrl} /> <TangledLogo /> </CardFooter> </Card> );}