Merge pull request WebXDAO#238 from abhikrishnaram/main

mkubdev · web-flow · commit 751a56981110 · 2022-10-07T11:05:14.000+02:00
Create project page
diff --git a/src/components/Projcts/ RepoCard.js b/src/components/Projcts/ RepoCard.js
@@ -0,0 +1,33 @@
+import {FaStar} from "react-icons/fa";
+
+const RepoCard = ({ repo }) => {
+    const { name, html_url, stargazers_count, language, owner, description } = repo;
+    return (
+            <a href={html_url} target="_blank" rel="noopener noreferrer"
+               className="bg-slate-900 border flex flex-col justify-between rounded-lg border-gray-700 p-5 shadow hover:bg-gray-700 delay-100 h-full duration-200 w-full">
+               <div>
+                    <div className="flex flex-row">
+                        {/*<img src={owner?.avatar_url} className="rounded h-40 w-40"/>*/}
+                        <p>
+                            <span className="text-gray-500 font-semibold">{owner.login}/</span>
+                            <span className="text-gray-300 font-semibold">{name}</span>
+                        </p>
+                    </div>
+                    <p className="text-xs text-gray-500 mt-3">
+                        { description }
+                    </p>
+                </div>
+                <div className="flex justify-between mt-4">
+                    <span className="text-xs text-gray-500">{language}</span>
+                    <div className="flex flex-row justify-between">
+                        <div className="flex flex-row text-gray-500 hover:text-white">
+                            <FaStar className="h-4 w-4"/>
+                            <span className="text-xs ml-1">{stargazers_count}</span>
+                        </div>
+                    </div>
+                </div>
+            </a>
+    )
+}
+
+export default RepoCard;
diff --git a/src/pages/projects.js b/src/pages/projects.js
@@ -1,7 +1,36 @@
 import Head from "next/head";
-import { prefix } from "../constants";
+import RepoCard from "../components/Projcts/ RepoCard";
 
-export default function Projects({ projectsData }) {
+export const getStaticProps = async () => {
+    try {
+        const res = await fetch('https://api.github.com/users/WebXDAO/repos');
+        const data = await res.json()
+
+        if (!data) {
+            return {
+                props: {
+                    success: false,
+                    message: "No data found"
+                }
+            };
+        }
+        return {
+            props: {
+                success: true,
+                projectsData: data
+            }
+        };
+    } catch (e) {
+        return {
+            props: {
+                success: false,
+                message: e
+            }
+        };
+    }
+}
+
+const Projects = ({ success = false, projectsData = [] }) => {
   return (
     <>
       <Head>
@@ -20,85 +49,22 @@ export default function Projects({ projectsData }) {
       </section>
 
       <div className="container max-w-screen-xl mx-auto my-8 grid pb-8 grid-cols-1 md:grid-cols-2 lg:grid-cols-3 mb-0 sm:mb-8 gap-6 px-8">
-        {projectsData.map(
-          ({ name, imgUrl, type, title, text, tags }, index) => (
+          { success ? projectsData.length > 0 && projectsData.map((repo, index) => (
             <div
-              key={name + index}
+              key={index}
               className="flex flex-col justify-between items-stretch col-span-3 md:col-span-1 cursor-pointer p-2 shadow rounded-md focus:outline-none focus:shadow-outline transform transition hover:shadow-lg hover:scale-105 duration-300 ease-in-out"
             >
-              <div className="bg-white p-4 rounded-lg flex flex-col justify-between">
-                <div className="relative mb-6">
-                  <img
-                    className="h-44 md:h-64 lg:h-60 xl:h-56 w-full object-cover object-center rounded-md"
-                    src={prefix + imgUrl}
-                    alt={name}
-                  />
-                </div>
-                <div className="flex justify-between items-center md:items-start mb-2 md:mb-4">
-                  <h2 className="text-lg md:text-xl text-gray-900 font-semibold">
-                    {title}
-                  </h2>
-                  <h3
-                    className={`tracking-widest ${type === 'FREE' ? 'text-green-500' : 'text-yellow-500'
-                      } text-sm font-semibold title-font`}
-                  >
-                    {type}
-                  </h3>
-                </div>
-
-                <p className="leading-relaxed text-sm md:text-base text-gray-800 mb-5">
-                  {text}
-                </p>
-
-                <div className="mt-auto justify-items-end text-sm flex flex-wrap gap-3">
-                  {tags.map((item, index) => (
-                    <button
-                      key={item + index}
-                      className="whitespace-nowrap font-semibold bg-blue-100 text-blue-600 rounded-md py-2 px-4 focus:outline-none"
-                    >
-                      {item}
-                    </button>
-                  ))}
-                </div>
-              </div>
+                <RepoCard repo={repo}/>
             </div>
-          )
-        )}
+            )
+          ) : (
+              <div>
+                  Error fetching data! Please try again later.
+              </div>
+          ) }
       </div>
     </>
   );
 }
 
-export function getStaticProps() {
-  const data = [
-    {
-      name: "InVision",
-      imgUrl: "/blogs_inVision.png",
-      type: "PREMIUM",
-      title: "Start Here",
-      text: "InVision is the digital product design platform used to make the worlds best customer experiences.",
-      tags: ["Documentation"],
-    },
-    {
-      name: "Adobe XD",
-      imgUrl: "/blogs_xd.png",
-      type: "FREE",
-      title: "Blockchain Dev Path",
-      text: "Adobe XD is your UI/UX design solution platform for website and mobile appcreation.",
-      tags: ["Documentation"],
-    },
-    {
-      name: "Figma",
-      imgUrl: "/blogs_figma.png",
-      type: "FREE",
-      title: "Website",
-      text: "Figma helps the teams to create, test, and ship better designs from start to finish.",
-      tags: ["Tailwind Css", "Eleventy", "Alpine.js"],
-    },
-  ];
-  return {
-    props: {
-      projectsData: data,
-    },
-  };
-}
+export default Projects;
