feat: add activity view

src/components/activity.tsx

@@ -0,0 +1,55 @@
+import { IconDefinition } from "@fortawesome/fontawesome-svg-core";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { Rule } from "./rule";
+
+interface ActivityProps {
+  type: string;
+  date: Date;
+  repo: string;
+  repoName: string;
+  heart: string;
+}
+
+const TypeToString: Record<string, string> = {
+  commit_repo: "committed to",
+  delete_branch: "deleted a branch on",
+  merge_pull_request: "merged a PR in",
+  create_pull_request: "created a PR in",
+  create_branch: "created a branch in",
+  PushEvent: "committed to",
+  DeleteEvent: "deleted a branch on",
+  PullRequestEvent: "created or merged a PR in",
+  PullRequestReviewEvent: "reviewed a PR in",
+  PullRequestReviewCommentEvent: "commented on a PR in",
+  IssueCommentEvent: "commented on",
+  IssuesEvent: "created or updated an issue in",
+  close_issue: "closed an issue in",
+  create_issue: "created an issue in",
+};
+
+export const Activity = (props: ActivityProps): JSX.Element => {
+  const { type, date, repo, repoName, heart } = props;
+  return (
+    <li className="ms-6">
+      <span className="absolute flex items-center justify-center w-6 h-6 rounded-full -start-3">
+        {heart}
+      </span>
+      <div className="items-center justify-between p-4 bg-white border border-gray-200 rounded-lg shadow-sm sm:flex dark:bg-gray-700 dark:border-gray-600">
+        <time className="mb-1 text-xs font-normal text-gray-400 sm:order-last sm:mb-0">
+          {date.toLocaleString("en-GB")}
+        </time>
+        <div className="text-sm font-normal text-gray-500 lex dark:text-gray-300">
+          Naomi has {TypeToString[type] ?? "performed a " + type}{" "}
+          <a
+            href={repo}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="font-semibold text-[#abfcec] hover:underline"
+          >
+            {repoName}
+          </a>{" "}
+        </div>
+      </div>
+    </li>
+  );
+};