feat: add stars count to projects (#42)

Skolaczk · Jun 19, 2024 · a24f3a9 · a24f3a9
1 parent 3873a9d
commit a24f3a9
Show file tree

Hide file tree

Showing 5 changed files with 38 additions and 6 deletions.
diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -7,16 +7,25 @@ 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">
         <Header />
         <Intro />
         <SectionDivider />
         <About />
-        <Projects />
+        <Projects starsCount={starsCount} />
         <Experience />
         <Contact />
         <Footer />

diff --git 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
@@ -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
@@ -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
@@ -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;