feat(projects): add links to repo cards

Author: Majestic9169

src/components/GithubCard.tsx

@@ -1,17 +1,24 @@
 import React from "react";
 import "../styles/components/RepoCard.css";
 import { REPO_DATA_TYPE } from "../utils/types";
+import { Link } from "react-router-dom";
 
 const RepoCard = ({ repoData }: { repoData: REPO_DATA_TYPE }) => {
+  const repo_link = `https://github.com/metakgp/${repoData.name}`;
+  const stargazers_link = `https://github.com/metakgp/${repoData.name}/stargazers`
+  const forks_link = `https://github.com/metakgp/${repoData.name}/forks`
+
   return (
-    <div className="gh-card-container">
+    <Link to={repo_link} className="gh-card-container">
       <div className="gh-card-header">
         <span className="book-icon">
           <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" className="octicon octicon-repo mr-1 color-fg-muted">
             <path d="M2 2.5A2.5 2.5 0 0 1 4.5 0h8.75a.75.75 0 0 1 .75.75v12.5a.75.75 0 0 1-.75.75h-2.5a.75.75 0 0 1 0-1.5h1.75v-2h-8a1 1 0 0 0-.714 1.7.75.75 0 1 1-1.072 1.05A2.495 2.495 0 0 1 2 11.5Zm10.5-1h-8a1 1 0 0 0-1 1v6.708A2.486 2.486 0 0 1 4.5 9h8ZM5 12.25a.25.25 0 0 1 .25-.25h3.5a.25.25 0 0 1 .25.25v3.25a.25.25 0 0 1-.4.2l-1.45-1.087a.249.249 0 0 0-.3 0L5.4 15.7a.25.25 0 0 1-.4-.2Z"></path>
           </svg>
         </span>
-        <span className="gh-repo-name">{repoData.name}</span>
+        <Link to={repo_link}>
+          <span className="gh-repo-name">{repoData.name}</span>
+        </Link>
       </div>
       <div className="gh-card-body">
         {repoData.description}
@@ -21,24 +28,28 @@ const RepoCard = ({ repoData }: { repoData: REPO_DATA_TYPE }) => {
           <span className="gh-card-circle"></span>
           <span className="gh-card-language">{repoData.language}</span>
         </div>
-        <div className="gh-card-star-container">
-          <span className="gh-card-star-icon">
-            <svg aria-label="stars" role="img" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" className="octicon octicon-star">
-              <path d="M8 .25a.75.75 0 0 1 .673.418l1.882 3.815 4.21.612a.75.75 0 0 1 .416 1.279l-3.046 2.97.719 4.192a.751.751 0 0 1-1.088.791L8 12.347l-3.766 1.98a.75.75 0 0 1-1.088-.79l.72-4.194L.818 6.374a.75.75 0 0 1 .416-1.28l4.21-.611L7.327.668A.75.75 0 0 1 8 .25Zm0 2.445L6.615 5.5a.75.75 0 0 1-.564.41l-3.097.45 2.24 2.184a.75.75 0 0 1 .216.664l-.528 3.084 2.769-1.456a.75.75 0 0 1 .698 0l2.77 1.456-.53-3.084a.75.75 0 0 1 .216-.664l2.24-2.183-3.096-.45a.75.75 0 0 1-.564-.41L8 2.694Z"></path>
-            </svg>
-          </span>
-          {repoData.stars}
-        </div>
-        <div className="gh-card-forks-container">
-          <span className="gh-card-fork-icon">
-            <svg aria-label="forks" role="img" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" className="octicon octicon-repo-forked">
-              <path d="M5 5.372v.878c0 .414.336.75.75.75h4.5a.75.75 0 0 0 .75-.75v-.878a2.25 2.25 0 1 1 1.5 0v.878a2.25 2.25 0 0 1-2.25 2.25h-1.5v2.128a2.251 2.251 0 1 1-1.5 0V8.5h-1.5A2.25 2.25 0 0 1 3.5 6.25v-.878a2.25 2.25 0 1 1 1.5 0ZM5 3.25a.75.75 0 1 0-1.5 0 .75.75 0 0 0 1.5 0Zm6.75.75a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Zm-3 8.75a.75.75 0 1 0-1.5 0 .75.75 0 0 0 1.5 0Z"></path>
-            </svg>
-          </span>
-          {repoData.forks}
-        </div>
+        <Link to={stargazers_link}>
+          <div className="gh-card-star-container">
+            <span className="gh-card-star-icon">
+              <svg aria-label="stars" role="img" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" className="octicon octicon-star">
+                <path d="M8 .25a.75.75 0 0 1 .673.418l1.882 3.815 4.21.612a.75.75 0 0 1 .416 1.279l-3.046 2.97.719 4.192a.751.751 0 0 1-1.088.791L8 12.347l-3.766 1.98a.75.75 0 0 1-1.088-.79l.72-4.194L.818 6.374a.75.75 0 0 1 .416-1.28l4.21-.611L7.327.668A.75.75 0 0 1 8 .25Zm0 2.445L6.615 5.5a.75.75 0 0 1-.564.41l-3.097.45 2.24 2.184a.75.75 0 0 1 .216.664l-.528 3.084 2.769-1.456a.75.75 0 0 1 .698 0l2.77 1.456-.53-3.084a.75.75 0 0 1 .216-.664l2.24-2.183-3.096-.45a.75.75 0 0 1-.564-.41L8 2.694Z"></path>
+              </svg>
+            </span>
+            {repoData.stars}
+          </div>
+        </Link>
+        <Link to={forks_link}>
+          <div className="gh-card-forks-container">
+            <span className="gh-card-fork-icon">
+              <svg aria-label="forks" role="img" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" className="octicon octicon-repo-forked">
+                <path d="M5 5.372v.878c0 .414.336.75.75.75h4.5a.75.75 0 0 0 .75-.75v-.878a2.25 2.25 0 1 1 1.5 0v.878a2.25 2.25 0 0 1-2.25 2.25h-1.5v2.128a2.251 2.251 0 1 1-1.5 0V8.5h-1.5A2.25 2.25 0 0 1 3.5 6.25v-.878a2.25 2.25 0 1 1 1.5 0ZM5 3.25a.75.75 0 1 0-1.5 0 .75.75 0 0 0 1.5 0Zm6.75.75a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Zm-3 8.75a.75.75 0 1 0-1.5 0 .75.75 0 0 0 1.5 0Z"></path>
+              </svg>
+            </span>
+            {repoData.forks}
+          </div>
+        </Link>
       </div>
-    </div>
+    </Link>
   )
 }
 

src/styles/components/RepoCard.css

@@ -27,7 +27,9 @@
   text-wrap: wrap;
   overflow-x: hidden;
   padding: 0.5rem 0;
-  color: #333
+  color: #333;
+  text-align: left;
+  width: 100%;
 }
 
 .gh-card-footer {
@@ -57,6 +59,10 @@
 
 /* Footer Objects */
 
+.gh-card-footer {
+  color: #000;
+}
+
 .gh-card-circle {
   width: 12px;
   height: 12px;
@@ -70,6 +76,7 @@
   display: flex;
   justify-content: center;
   align-items: center;
+  color: #000;
 }
 
 .gh-card-star-icon {
@@ -83,6 +90,7 @@
   display: flex;
   justify-content: center;
   align-items: center;
+  color: #000;
 }
 
 .gh-card-fork-icon {