jake/jarv.is
1
Fork 0
mirror of https://github.com/jakejarvis/jarv.is.git synced 2025-07-21 05:21:17 -04:00
Code Issues Activity

all components should accept additional classnames

Browse Source
This commit is contained in:
Jake Jarvis
2022-01-20 12:06:05 -05:00
parent 2162e9d563
commit 7e37adabc1
22 changed files with 150 additions and 86 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
components/RepositoryCard/RepositoryCard.tsx
View File

@@ -1,49 +1,54 @@
import classNames from "classnames";
import { intlFormat, formatDistanceToNowStrict } from "date-fns";
import { StarOcticon, ForkOcticon } from "../Icons";
import { RepoType } from "../../types";
import styles from "./RepositoryCard.module.css";
const RepositoryCard = (props: RepoType) => (
<div className={styles.card}>
<a className={styles.name} href={props.url} target="_blank" rel="noopener noreferrer">
{props.name}
type Props = RepoType & {
className?: string;
};
const RepositoryCard = ({ name, url, description, language, stars, forks, updatedAt, className }: Props) => (
<div className={classNames(styles.card, className)}>
<a className={styles.name} href={url} target="_blank" rel="noopener noreferrer">
{name}
</a>
{props.description && <p className={styles.description}>{props.description}</p>}
{description && <p className={styles.description}>{description}</p>}
<div className={styles.meta}>
{props.language && (
{language && (
<div className={styles.meta_item}>
<span className={styles.language_color} style={{ backgroundColor: props.language.color }} />
<span>{props.language.name}</span>
<span className={styles.language_color} style={{ backgroundColor: language.color }} />
<span>{language.name}</span>
</div>
)}
{props.stars > 0 && (
{stars > 0 && (
<div className={styles.meta_item}>
<a
href={`${props.url}/stargazers`}
title={`${props.stars.toLocaleString("en-US")} ${props.stars === 1 ? "star" : "stars"}`}
href={`${url}/stargazers`}
title={`${stars.toLocaleString("en-US")} ${stars === 1 ? "star" : "stars"}`}
target="_blank"
rel="noopener noreferrer"
>
<StarOcticon fill="currentColor" className={styles.octicon} />
<span>{props.stars.toLocaleString("en-US")}</span>
<span>{stars.toLocaleString("en-US")}</span>
</a>
</div>
)}
{props.forks > 0 && (
{forks > 0 && (
<div className={styles.meta_item}>
<a
href={`${props.url}/network/members`}
title={`${props.forks.toLocaleString("en-US")} ${props.forks === 1 ? "fork" : "forks"}`}
href={`${url}/network/members`}
title={`${forks.toLocaleString("en-US")} ${forks === 1 ? "fork" : "forks"}`}
target="_blank"
rel="noopener noreferrer"
>
<ForkOcticon fill="currentColor" className={styles.octicon} />
<span>{props.forks.toLocaleString("en-US")}</span>
<span>{forks.toLocaleString("en-US")}</span>
</a>
</div>
)}
@@ -51,7 +56,7 @@ const RepositoryCard = (props: RepoType) => (
<div
className={styles.meta_item}
title={intlFormat(
new Date(props.updatedAt),
new Date(updatedAt),
{
year: "numeric",
month: "short",
@@ -65,7 +70,7 @@ const RepositoryCard = (props: RepoType) => (
}
)}
>
<span>Updated {formatDistanceToNowStrict(new Date(props.updatedAt), { addSuffix: true })}</span>
<span>Updated {formatDistanceToNowStrict(new Date(updatedAt), { addSuffix: true })}</span>
</div>
</div>
</div>