alice.pds.demo.boltless.dev
This repository has no description
1import { Card, Row, Col } from "../shared/layout";
2import { Avatar } from "../shared/avatar";
3import { LanguageCircles } from "../shared/language-circles";
4import { Metrics } from "../shared/metrics";
5import { TangledLogo } from "../shared/logo";
6import { FooterStats } from "../shared/footer-stats";
7import { TYPOGRAPHY } from "../shared/constants";
8import type { RepositoryCardData } from "../../validation";
9
10export function RepositoryCard(data: RepositoryCardData) {
11 return (
12 <Card>
13 <LanguageCircles languages={data.languages} />
14
15 <Col style={{ gap: 64 }}>
16 <Col style={{ gap: 24 }}>
17 <span style={{ ...TYPOGRAPHY.repoName, color: "#000000" }}>
18 {data.repoName}
19 </span>
20
21 <Row style={{ gap: 16 }}>
22 <Avatar src={data.avatarUrl} size={64} />
23 <span style={{ ...TYPOGRAPHY.ownerHandle, color: "#000000" }}>
24 {data.ownerHandle}
25 </span>
26 </Row>
27 </Col>
28
29 <Metrics stars={data.stars} pulls={data.pulls} issues={data.issues} />
30 </Col>
31
32 <Row
33 style={{
34 alignItems: "flex-end",
35 justifyContent: "space-between",
36 flexGrow: 1,
37 }}>
38 <FooterStats createdAt={data.createdAt} />
39
40 <TangledLogo />
41 </Row>
42 </Card>
43 );
44}