From f58968764b6f9c92012fcb26bdf18be7a3b0e968 Mon Sep 17 00:00:00 2001
From: Harsh Khandeparkar <shadowwarriorpro3003@gmail.com>
Date: Wed, 15 Nov 2023 21:35:52 +0530
Subject: [PATCH] feat: project page cards ready?

---
 src/components/ProjectCard.tsx | 110 ++++++++++++++++++---------------
 src/util/types.ts              |   1 +
 2 files changed, 60 insertions(+), 51 deletions(-)

diff --git a/src/components/ProjectCard.tsx b/src/components/ProjectCard.tsx
index b029501b..9be0f61f 100644
--- a/src/components/ProjectCard.tsx
+++ b/src/components/ProjectCard.tsx
@@ -1,72 +1,80 @@
-import { IProject, IProjectTags } from "../util/types";
-import projectTags from "../data/projectTags.json";
+import { IoPersonSharp } from "react-icons/io5";
+import { IProject } from "../util/types";
 
 function ProjectCard({
   name,
   description,
   tags,
   mentor,
+  secondary_mentor,
   comm_channel,
   repo_link,
 }: IProject) {
-  function getColor(tag: string) {
-    if (tag in projectTags) {
-      return (projectTags as IProjectTags)[tag];
-    } else {
-      const randomColorIndex = Math.floor(
-        Math.random() * Object.keys(projectTags as IProjectTags).length,
-      );
-      const randomKey = Object.keys(projectTags as IProjectTags)[
-        randomColorIndex
-      ];
-      return (projectTags as IProjectTags)[randomKey];
-    }
-  }
   return (
     <>
-      <div className="p-4 rounded-md w-full h-full bg-[#0f0f27]">
-        <h2 className="text-3xl font-bold text-center mb-1">{name}</h2>
-        <h3 className="text-lg text-center mb-3">
-          <span className="font-bold">Mentor</span>:{" "}
-          <a
-            className="text-primary font-semibold hover:text-primary-600 hover:underline"
-            href={`https://github.com/${mentor.username}`}
-          >
-            {mentor.name}
-          </a>
-        </h3>
-        <p className="mb-4 break-words line-clamp-4" title={description}>
-          {description}
-        </p>
-        <div className="flex flex-wrap gap-2 mb-8 justify-center">
-          {tags
-            .sort()
-            .slice(0, 6)
-            .map((tag, i) => (
-              <span
-                key={i}
-                style={{ backgroundColor: getColor(tag) }}
-                className="px-3 py-1 cursor-pointer text-xs font-bold rounded-md"
-              >
+      <div className="px-4 py-4 w-80 rounded-md bg-[#2a2a2aa3]">
+        <div className="flex flex-col mb-4 gap-1">
+          <h3 className="font-semibold text-2xl">{name}</h3>
+          <div className="flex gap-2.5">
+            {tags.map((tag) => (
+              <p className="rounded-md px-2.5 py-0.5 bg-primary-800 text-sm">
                 {tag}
-              </span>
+              </p>
             ))}
+          </div>
+        </div>
+
+        <p className="mb-4">{description}</p>
+
+        <div className="mb-5 space-y-1">
+          <div className="flex gap-2 items-center">
+            <div className="flex gap-2 items-center text-sm font-semibold">
+              <IoPersonSharp />
+              Mentor:
+            </div>
+            <a
+              href={`https://github.com/${mentor.username}`}
+              className="font-bold text-base hover:underline"
+            >
+              @{mentor.username}
+            </a>
+          </div>
+          <div className="flex gap-2 items-center">
+            <div className="flex gap-2 items-center text-sm font-semibold">
+              <IoPersonSharp />
+              Secondary Mentor:
+            </div>
+            <a
+              href={
+                secondary_mentor.username !== ""
+                  ? `https://github.com/${secondary_mentor.username}`
+                  : undefined
+              }
+              className={`font-bold text-base ${
+                secondary_mentor.username !== "" ? "hover:underline" : ""
+              }`}
+            >
+              {secondary_mentor.username !== ""
+                ? `@${secondary_mentor.username}`
+                : "None"}
+            </a>
+          </div>
         </div>
-        <div className="flex justify-center gap-2 align-bottom">
-          <button
-            onClick={() => window.open(repo_link, "_blank")}
-            className="px-4 py-2 rounded-md bg-primary-950 hover:bg-primary-900 text-lg font-bold flex justify-center items-center"
+        <div className="mb-2 flex justify-around font-semibold gap-2">
+          <a
+            href={repo_link}
+            target="_blank"
+            className="text-center font-semibold text-lg w-full p-1 bg-primary-700 rounded-md hover:bg-primary-800"
           >
             View Project
-          </button>
-          <button
-            onClick={() => {
-              window.open(comm_channel, "_blank");
-            }}
-            className="px-4 py-2 rounded-md bg-primary-950 hover:bg-primary-900 text-lg font-bold flex justify-center items-center"
+          </a>
+          <a
+            href={comm_channel}
+            target="_blank"
+            className="text-center font-semibold text-lg w-full p-1 bg-primary-700 rounded-md hover:bg-primary-800"
           >
             Join Channel
-          </button>
+          </a>
         </div>
       </div>
     </>
diff --git a/src/util/types.ts b/src/util/types.ts
index 4cc1e396..25174b26 100644
--- a/src/util/types.ts
+++ b/src/util/types.ts
@@ -72,6 +72,7 @@ export interface IProject {
   comm_channel: string;
   readme_link: string;
   mentor: IMentor;
+  secondary_mentor: IMentor;
 }
 
 interface IProjectReg {