separate repository grid styles/logic from the card component

components/projects/RepoCard.tsx

@@ -0,0 +1,92 @@
+import { intlFormat, formatDistanceToNowStrict, parseISO } from "date-fns";
+import { StarIcon, RepoForkedIcon } from "@primer/octicons-react";
+
+import styles from "./RepoCard.module.scss";
+
+type Props = {
+  name: string;
+  url: string;
+  description?: string;
+  language?: {
+    name: string;
+    color?: string;
+  };
+  stars?: number;
+  forks?: number;
+  updatedAt: string;
+};
+
+export default function RepoCard({ name, url, description, language, stars, forks, updatedAt }: Props) {
+  return (
+    <div className={styles.card}>
+      <a className={styles.name} href={url} target="_blank" rel="noopener noreferrer">
+        {name}
+      </a>
+
+      {description && <p className={styles.description}>{description}</p>}
+
+      <div className={styles.meta}>
+        {language && (
+          <div className={styles.meta_item}>
+            <span className={styles.language_color}>
+              <style jsx>{`
+                span {
+                  background-color: ${language.color};
+                }
+              `}</style>
+            </span>
+            <span>{language.name}</span>
+          </div>
+        )}
+
+        {stars > 0 && (
+          <div className={styles.meta_item}>
+            <a
+              href={`${url}/stargazers`}
+              title={`${stars.toLocaleString("en-US")} ${stars === 1 ? "star" : "stars"}`}
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              <StarIcon size={16} className={styles.octicon} />
+              <span>{stars.toLocaleString("en-US")}</span>
+            </a>
+          </div>
+        )}
+
+        {forks > 0 && (
+          <div className={styles.meta_item}>
+            <a
+              href={`${url}/network/members`}
+              title={`${forks.toLocaleString("en-US")} ${forks === 1 ? "fork" : "forks"}`}
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              <RepoForkedIcon size={16} className={styles.octicon} />
+              <span>{forks.toLocaleString("en-US")}</span>
+            </a>
+          </div>
+        )}
+
+        <div
+          className={styles.meta_item}
+          title={intlFormat(
+            parseISO(updatedAt),
+            {
+              year: "numeric",
+              month: "short",
+              day: "numeric",
+              hour: "numeric",
+              minute: "numeric",
+              timeZoneName: "short",
+            },
+            {
+              locale: "en-US",
+            }
+          )}
+        >
+          <span>Updated {formatDistanceToNowStrict(parseISO(updatedAt), { addSuffix: true })}</span>
+        </div>
+      </div>
+    </div>
+  );
+}