From a24f3a9c22ef92063c51759581760db818254244 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Skolak?= <skolakmichal1@gmail.com>
Date: Wed, 19 Jun 2024 21:19:43 +0200
Subject: [PATCH] feat: add stars count to projects (#42)

---
 src/app/page.tsx            | 13 +++++++++++--
 src/components/icons.tsx    |  2 ++
 src/components/project.tsx  | 13 +++++++++++--
 src/components/projects.tsx | 13 +++++++++++--
 src/lib/data.tsx            |  3 +++
 5 files changed, 38 insertions(+), 6 deletions(-)

diff --git a/src/app/page.tsx b/src/app/page.tsx
index 6d10f0f..b8e9cb5 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -7,8 +7,17 @@ import { Intro } from '@/components/intro';
 import { Projects } from '@/components/projects';
 import { SectionDivider } from '@/components/section-divider';
 import { ThemeToggle } from '@/components/theme-toggle';
+import { projectsData } from '@/lib/data';
+
+const Home = async () => {
+  const starsCount = await Promise.all(
+    projectsData.map(async ({ links }) => {
+      const res = await fetch(links.githubApi);
+      const data = await res.json();
+      return data.stargazers_count;
+    })
+  );
 
-const Home = () => {
   return (
     <>
       <div className="container flex flex-col items-center">
@@ -16,7 +25,7 @@ const Home = () => {
         <Intro />
         <SectionDivider />
         <About />
-        <Projects />
+        <Projects starsCount={starsCount} />
         <Experience />
         <Contact />
         <Footer />
diff --git a/src/components/icons.tsx b/src/components/icons.tsx
index b98e5b4..7178cd3 100644
--- a/src/components/icons.tsx
+++ b/src/components/icons.tsx
@@ -7,6 +7,7 @@ import {
   Github,
   LucideProps,
   Moon,
+  Star,
   Sun,
 } from 'lucide-react';
 
@@ -19,6 +20,7 @@ export const Icons = {
   githubOutline: Github,
   briefcase: Briefcase,
   chevronDown: ChevronDown,
+  star: Star,
   github: (props: LucideProps) => (
     <svg viewBox="0 0 24 24" {...props}>
       <path
diff --git a/src/components/project.tsx b/src/components/project.tsx
index 3f4334c..68d1ccd 100644
--- a/src/components/project.tsx
+++ b/src/components/project.tsx
@@ -12,6 +12,7 @@ type TProject = (typeof projectsData)[number];
 type TProps = {
   project: TProject;
   index: number;
+  starsCount: number[];
 };
 
 const fadeInAnimationVariants = {
@@ -28,7 +29,7 @@ const fadeInAnimationVariants = {
   }),
 };
 
-export const Project = ({ project, index }: TProps) => {
+export const Project = ({ project, index, starsCount }: TProps) => {
   const { image, title, description, technologies, links } = project;
 
   return (
@@ -59,11 +60,19 @@ export const Project = ({ project, index }: TProps) => {
           <Icons.preview className="size-5" />
         </a>
       </Button>
-      <Button variant="outline" asChild className="px-5">
+      <Button variant="outline" asChild className="mr-2 px-5">
         <a href={links.github} aria-label="github">
           <Icons.githubOutline className="size-5" />
         </a>
       </Button>
+      {starsCount[index] > 100 && (
+        <Button asChild className="px-5">
+          <a href={links.github} aria-label="github">
+            <Icons.star className="mr-2 size-5" />
+            <span className="font-bold">{starsCount[index]}</span>
+          </a>
+        </Button>
+      )}
     </motion.div>
   );
 };
diff --git a/src/components/projects.tsx b/src/components/projects.tsx
index e2785cf..c5e6a69 100644
--- a/src/components/projects.tsx
+++ b/src/components/projects.tsx
@@ -7,7 +7,11 @@ import { SectionHeading } from '@/components/section-heading';
 import { useSectionInView } from '@/hooks/use-section-in-view';
 import { projectsData } from '@/lib/data';
 
-export const Projects = () => {
+type TProps = {
+  starsCount: number[];
+};
+
+export const Projects = ({ starsCount }: TProps) => {
   const { ref } = useSectionInView('Projects');
 
   return (
@@ -32,7 +36,12 @@ export const Projects = () => {
       </motion.div>
       <div className="flex flex-col gap-8 md:flex-row">
         {projectsData.map((project, index) => (
-          <Project key={project.title} project={project} index={index} />
+          <Project
+            key={project.title}
+            project={project}
+            index={index}
+            starsCount={starsCount}
+          />
         ))}
       </div>
     </section>
diff --git a/src/lib/data.tsx b/src/lib/data.tsx
index 09fc968..152b4c5 100644
--- a/src/lib/data.tsx
+++ b/src/lib/data.tsx
@@ -33,6 +33,7 @@ export const projectsData = [
     links: {
       preview: 'https://socialhub-ms.vercel.app/',
       github: 'https://github.com/Skolaczk/SocialHub',
+      githubApi: 'https://api.github.com/repos/Skolaczk/SocialHub',
     },
   },
   {
@@ -50,6 +51,7 @@ export const projectsData = [
     links: {
       preview: 'https://next-starter-skolaczk.vercel.app',
       github: 'https://github.com/Skolaczk/next-starter',
+      githubApi: 'https://api.github.com/repos/Skolaczk/next-starter',
     },
   },
   {
@@ -66,6 +68,7 @@ export const projectsData = [
     links: {
       preview: 'https://audiophile-ms.netlify.app/',
       github: 'https://github.com/Skolaczk/Audiophile',
+      githubApi: 'https://api.github.com/repos/Skolaczk/Audiophile',
     },
   },
 ] as const;