Merge pull request #167 from Keith-Web3/OpenIssues

feat: added number of open issues

Author: max-programming

components/Card.tsx

@@ -1,5 +1,5 @@
 import { emojify } from '@twuni/emojify';
-import { GoStar, GoRepoForked } from 'react-icons/go';
+import { GoStar, GoRepoForked, GoIssueOpened } from 'react-icons/go';
 import { RepoItem } from 'types';
 
 interface Props {
@@ -61,11 +61,11 @@ function Card({ repo }: Props) {
         </div>
 
         {/* stars and forks cards */}
-        <div className="w-full flex gap-3 xl:gap-5 text-neutral-100 cursor-pointer mt-8">
+        <div className="container-query flex flex-wrap justify-between gap-3 xl:gap-5 text-neutral-100 cursor-pointer mt-8">
           <a
             href={`${repo.html_url}/stargazers`}
             target="_blank"
-            className="group w-full border rounded-xl p-3 xl:px-4 flex items-center gap-2 xl:gap-3 relative"
+            className="group w-full flex-shrink-0 flex-grow-1  basis-[120px] border rounded-xl p-3 xl:px-4 flex items-center gap-2 xl:gap-3 relative"
           >
             <GoStar className="text-yellow-200 text-2xl" />
             <div className="flex flex-col">
@@ -76,15 +76,15 @@ function Card({ repo }: Props) {
             </div>
             <div
               id="tooltip"
-              className="hidden group-hover:block absolute bg-2023-void-2 text-2023-bavarian-gold-2 px-2 py-1 rounded-md"
+              className="hidden group-hover:block text-sm absolute bg-2023-void-2 text-2023-bavarian-gold-2 px-2 py-1 rounded-md"
             >
               Checkout all the stars here!
             </div>
           </a>
           <a
             href={`${repo.html_url}/forks`}
             target="_blank"
-            className="group w-full border rounded-xl p-3 flex items-center gap-3 relative"
+            className="group flex-shrink-0 flex-grow-1  basis-[120px] border rounded-xl p-3 flex items-center gap-3 relative"
           >
             <GoRepoForked className="text-yellow-200 text-2xl" />
             <div className="flex flex-col">
@@ -95,11 +95,30 @@ function Card({ repo }: Props) {
             </div>
             <div
               id="tooltip"
-              className="hidden group-hover:block absolute bg-2023-void-2 text-2023-bavarian-gold-2 px-2 py-1 rounded-md"
+              className="hidden group-hover:block absolute text-sm bg-2023-void-2 text-2023-bavarian-gold-2 px-2 py-1 rounded-md"
             >
               Checkout all the forks here!
             </div>
           </a>
+          <a
+            href={`${repo.html_url}/issues`}
+            target="_blank"
+            className="group issues-btn flex-shrink-0 flex-grow-1 basis-[120px] border rounded-xl p-3 flex items-center gap-3 relative"
+          >
+            <GoIssueOpened className="text-yellow-200 text-2xl" />
+            <div className="flex flex-col">
+              <div className="text-lg xl:text-2xl font-semibold mb-0.5">
+                {repo.open_issues_count}
+              </div>
+              <div className="text-neutral-300 text-xs lg:text-sm">Issues</div>
+            </div>
+            <div
+              id="tooltip"
+              className="hidden group-hover:block absolute text-sm bg-2023-void-2 text-2023-bavarian-gold-2 px-2 py-1 rounded-md"
+            >
+              Checkout all open issues here!
+            </div>
+          </a>
         </div>
       </div>
     </section>

styles/globals.css

@@ -70,3 +70,18 @@ a {
   );
   border-radius: 2px;
 }
+
+.container-query {
+  container-type: inline-size;
+}
+
+@container (max-width: 383px) {
+  .issues-btn {
+    margin-inline: auto;
+  }
+}
+@container (max-width: 251px) {
+  .issues-btn {
+    margin-inline: 0;
+  }
+}