feat: add contributor icon

ashutosh-jena-mindfire · ashutosh-jena-mindfire · commit 424e425db3e5 · 2024-02-23T13:11:33.000+05:30
diff --git a/public/images/social-media/contributor.svg b/public/images/social-media/contributor.svg
@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg fill="#000000" width="800px" height="800px" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><title>ionicons-v5-d</title><path d="M192,96a64,64,0,1,0-96,55.39V360.61a64,64,0,1,0,64,0V151.39A64,64,0,0,0,192,96ZM128,64A32,32,0,1,1,96,96,32,32,0,0,1,128,64Zm0,384a32,32,0,1,1,32-32A32,32,0,0,1,128,448Z"/><path d="M416,360.61V156a92.1,92.1,0,0,0-92-92H304V32a16,16,0,0,0-27.31-11.31l-64,64a16,16,0,0,0,0,22.62l64,64A16,16,0,0,0,304,160V128h20a28,28,0,0,1,28,28V360.61a64,64,0,1,0,64,0ZM384,448a32,32,0,1,1,32-32A32,32,0,0,1,384,448Z"/></svg>
diff --git a/public/images/social-media/git-issue.svg b/public/images/social-media/git-issue.svg
@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg fill="#000000" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
+	 width="800px" height="800px" viewBox="0 0 29.334 29.334"
+	 xml:space="preserve">
+<g>
+	<path d="M14.666,0C6.578,0,0,6.58,0,14.667s6.578,14.667,14.666,14.667s14.668-6.58,14.668-14.667S22.754,0,14.666,0z
+		 M14.666,25.334C8.784,25.334,4,20.549,4,14.667S8.784,4,14.666,4c5.883,0,10.668,4.785,10.668,10.667S20.547,25.334,14.666,25.334
+		z M19.332,14.667c0,2.577-2.089,4.667-4.666,4.667c-2.576,0-4.666-2.089-4.666-4.667C10,12.09,12.09,10,14.666,10
+		C17.243,10,19.332,12.09,19.332,14.667z"/>
+</g>
+</svg>
diff --git a/public/images/social-media/pull-request.svg b/public/images/social-media/pull-request.svg
@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg fill="#000000" width="800px" height="800px" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><title>ionicons-v5-d</title><path d="M385,224a64,64,0,0,0-55.33,31.89c-42.23-1.21-85.19-12.72-116.21-31.33-32.2-19.32-49.71-44-52.15-73.35a64,64,0,1,0-64.31.18V360.61a64,64,0,1,0,64,0V266.15c44.76,34,107.28,52.38,168.56,53.76A64,64,0,1,0,385,224ZM129,64A32,32,0,1,1,97,96,32,32,0,0,1,129,64Zm0,384a32,32,0,1,1,32-32A32,32,0,0,1,129,448ZM385,320a32,32,0,1,1,32-32A32,32,0,0,1,385,320Z"/></svg>
diff --git a/src/app/contributors/page.tsx b/src/app/contributors/page.tsx
@@ -3,6 +3,9 @@
 import Link from "next/link";
 import React from "react";
 import github from "../../../public/images/social-media/github.png";
+import contributorImg from "../../../public/images/social-media/contributor.svg";
+import prImg from "../../../public/images/social-media/pull-request.svg";
+import issueImg from "../../../public/images/social-media/git-issue.svg";
 import Image from "next/image";
 import contributorList from "../projects/assets/contributors.json";
 
@@ -45,9 +48,49 @@ const Contributors = () => {
                         {contributor.login}
                       </h5>
                     </div>
-                    <p className='text-sm text-gray-500 text-center'>
-                      Contributions: {contributor.contributions}
-                    </p>
+                    <footer>
+                      <div className='grid grid-cols-3 divide-x'>
+                        <div className='flex justify-center items-center gap-1 mt-4 '>
+                          <div>
+                            <Image
+                              src={contributorImg}
+                              height={20}
+                              width={20}
+                              alt='github_img'
+                            />
+                          </div>
+                          <p className='text-sm text-gray-500 text-center'>
+                            {contributor.contributions}
+                          </p>
+                        </div>
+                        <div className='flex justify-center items-center gap-1 mt-4 '>
+                          <div>
+                            <Image
+                              src={prImg}
+                              height={20}
+                              width={20}
+                              alt='github_img'
+                            />
+                          </div>
+                          <p className='text-sm text-gray-500 text-center'>
+                            {contributor.contributions / 2}
+                          </p>
+                        </div>
+                        <div className='flex justify-center items-center gap-1 mt-4 '>
+                          <div>
+                            <Image
+                              src={issueImg}
+                              height={20}
+                              width={20}
+                              alt='github_img'
+                            />
+                          </div>
+                          <p className='text-sm text-gray-500 text-center'>
+                            {contributor.contributions / 4}
+                          </p>
+                        </div>
+                      </div>
+                    </footer>
                   </div>
                 </div>
               ))}
