Merge pull request #210 from Anuran12/blog-page

mkubdev · web-flow · commit e799f424c3e2 · 2022-10-04T11:00:48.000+02:00
Hacktoberfest-2022 Update blog page by @Anuran12
diff --git a/src/pages/blog.js b/src/pages/blog.js
@@ -1,34 +1,69 @@
 import Head from 'next/head';
 // import { Blogs } from '../components/Global'
 
-export default function Blog({ articles }) {
+export const getStaticProps = async () => {
+  const res = await fetch('https://dev.to/api/articles?username=webxdao');
+  const data = await res.json();
+
+  return {
+    props: {
+      data,
+    },
+  };
+};
+
+const blog = ({ data }) => {
   return (
     <>
       <Head>
         <title>Blog | WebXDAO</title>
       </Head>
-      {/* <section className='text-white text-center bg-[#00007F]'>
-        <div className='px-20 py-20'>
-          <h1 className='font-bold text-5xl antialiased'>Check out our blog posts</h1>
-          <div className='mt-6 text-xl font-light text-true-gray-500 antialiased'>
-            Read our articles from <span className='font-mono'>Dev.to</span>
+      <section className="py-8">
+
+        <div className="container max-w-5xl mx-auto">
+          <h1 className="w-full my-2 text-4xl font-bold leading-tight text-center text-white">
+            Blogs
+          </h1>
+          <div className="w-full mb-4">
+            <div className="h-1 mx-auto gradient w-64 opacity-25 my-0 py-0 rounded-t"></div>
           </div>
         </div>
-        <Blogs articles={articles} contentOnly={true} />
-      </section> */}
+
+        <div className="absolute top-40 -left-16 xl:w-96 xl:h-96 bg-gradient-to-t from-[#1BFFFF] to-[#2E3192] rounded-full"></div>
+        <div className="absolute top-96 -right-80 xl:w-[50rem] xl:h-[50rem] bg-gradient-to-t from-[#FBB03B] to-[#D4145A] rounded-full"></div>
+
+        <section>
+          <div className="relative grid grid-cols-1 sm:grid-cols-2 z-2 flex justify-center items-center flex-wrap my-7 mx-0">
+
+            {data.map((curElem) => {
+              return (
+                <div className="grid-items group z-2 relative w-min h-min bg-white bg-opacity-5 m-10 shadow-2xl rounded-2xl flex justify-conten items-center backdrop-filter backdrop-blur-md" key={curElem.id}>
+                  <div className="relative w-[17.5rem] sm:w-[15.5rem] md:w-[19rem] lg:w-[27rem] xl:w-[35rem] h-80 flex justify-center items-center flex-col opacity-70  hover:opacity-100">
+
+                    <div className="relative w-4/5 rounded-2xl truncate border-8 border-solid border-black/25 group-hover:-translate-y-6 duration-500">
+                      <img src={curElem.cover_image} alt="blog image" className="relative top-0 left-0 w-full h-full object-cover" />
+                    </div>
+                    <div className="relative justify-center items-center flex-wrap mx-0 my-0 text-center">
+                      <h3 className="group-hover:-translate-y-6 duration-500 text-white uppercase font-medium text-sm text-center tracking-wider mt-5 mr-2.5 ml-2.5 mb-2.5 leading-4">
+                        <b>{curElem.title}</b>
+                        <br></br><br></br>
+                        <spam className="text-xs font-light lowercase">
+                          {curElem.description}
+                        </spam>
+                        <a href={curElem.url} target="_blank" rel="noopener noreferrer" className="rounded-md bg-green-500 pl-4 pr-4 text-base font-normal mb-0 mt-0 m-auto">
+                          <b>Read</b>
+                        </a>
+                      </h3>
+                    </div>
+                  </div>
+                </div>
+              );
+            })}
+          </div>
+        </section>
+      </section>
     </>
-  );
+  )
 }
 
-export async function getStaticProps() {
-  const res = await fetch('https://dev.to/api/articles?username=webxdao', {
-    method: 'GET',
-  });
-  const articles = await res.json();
-  return {
-    props: {
-      articles,
-    },
-    revalidate: 10,
-  };
-}
+export default blog;
