Skip to content

Commit

Permalink
feat: update Blog page (WebXDAO#479)
Browse files Browse the repository at this point in the history
* updating blog page

* adding scrollable cards

* removing unnecessary code

Signed-off-by: Tushar Saini <s2sharpit@gmail.com>

* removing cursor-pointer from blog cards

Signed-off-by: Tushar Saini <s2sharpit@gmail.com>

---------

Signed-off-by: Tushar Saini <s2sharpit@gmail.com>
  • Loading branch information
s2sharpit authored Jul 20, 2023
1 parent a28661d commit d5158a2
Show file tree
Hide file tree
Showing 12 changed files with 264 additions and 75 deletions.
Binary file added public/blog/1.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/blog/2.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/blog/3.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/blog/4.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/blog/5.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/blog/6.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
75 changes: 75 additions & 0 deletions src/app/blogs/Blog.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,75 @@
import Image from "next/image";
import Link from "next/link";

async function getData() {
const res = await fetch("https://dev.to/api/articles?username=webxdao");
// The return value is *not* serialized
// You can return Date, Map, Set, etc.

// Recommendation: handle errors
if (!res.ok) {
// This will activate the closest `error.js` Error Boundary
throw new Error("Failed to fetch data");
}

return res.json();
}

export default async function Blog() {
// Initiate dev.to API request
const blogData = getData();

// Wait for the promises to resolve
const [dataT] = await Promise.all([blogData]);

return (
<section className="mt-20">
<div className="mx-auto max-w-5xl md:px-8">
<h1 className="mt-10 text-xl font-bold">Get to know more</h1>
<p className="mx-auto mt-5 max-w-sm text-center md:max-w-xl lg:max-w-3xl">
Discover the exciting world of blockchain technology as we come together to collaborate
and expand our knowledge.
</p>
</div>
<div className="mt-10 flex flex-wrap justify-center gap-16">
{dataT.map((curElem: any) => (
<div className="bg-whie flex max-w-xs flex-col rounded-lg bg-white/5 p-2 shadow-md shadow-purple-400/40 transition-all duration-200 ease-in hover:z-50 hover:shadow-lg hover:shadow-purple-400/60 sm:hover:-translate-y-1">
<Image
className="w-full rounded-md border"
src={curElem.cover_image}
width={400}
height={250}
alt=""
/>
<div className="grow px-6 py-4">
<h3 className="mb-4 text-center text-sm font-bold uppercase leading-4 tracking-wider">
{curElem.title}
</h3>
<p className="text-justify text-sm text-gray-700 dark:text-gray-300">
{curElem.description}
</p>
</div>
<div className="flex px-6 py-4">
<Link
href={curElem.url}
target="_blank"
className="w-fit-content font-inter text-14.0418 group mb-0 mr-auto flex items-center gap-6 rounded border-2 border-solid border-black px-4 py-1 text-black transition delay-0 ease-in hover:border-slate-500 hover:bg-slate-500 hover:font-semibold dark:border-white/80 dark:text-white dark:hover:border-slate-500"
>
<Image
src="/Arrow1.png"
alt="arrow"
width={15}
height={15}
className="my-auto flex items-center transition duration-100 ease-in group-hover:invert dark:invert"
/>
<span className="transition duration-100 ease-in group-hover:text-white">
Read More
</span>
</Link>
</div>
</div>
))}
</div>
</section>
);
}
59 changes: 59 additions & 0 deletions src/app/blogs/PCard.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,59 @@
"use client";
import Image from "next/image";
import Link from "next/link";
import { FaGithub,FaLinkedin,FaTwitter } from "react-icons/fa";
import pCardData from "./pCardData";

export default function PCard() {
return (
<section className="my-8 md:ml-32">
<div
className="no-scroll flex select-none gap-8 overflow-x-auto px-6"
>
{pCardData.map((data) => (
<div className="max-w-[20rem]">
<div className="relative flex w-80 overflow-hidden rounded-md">
<Image
src={`/blog/${data.bgImg}.png`}
width={320}
height={420}
alt=""
className="h-[28rem] w-80 rounded-md border"
/>
<div className="absolute bottom-0 flex h-36 w-full items-center justify-center gap-6 rounded-md backdrop-blur">
<Image
src={""}
width={100}
height={100}
alt=""
className="rounded-full border bg-gray-700"
/>
<div className="text-white">
<h3 className="font-bold leading-3">{data.name}</h3>
<small className="text-xs font-light">{data.team}</small>
<div className="mt-1 flex gap-4 text-lg">
<Link href={""}>
<FaGithub />
</Link>
<Link href={""}>
<FaTwitter />
</Link>
<Link href={""}>
<FaLinkedin />
</Link>
</div>
</div>
</div>
</div>
<div className="grow px-2 py-4">
<h3 className="text-sm font-bold">
{data.title}
</h3>
<p className="text-justify text-sm text-gray-700 dark:text-gray-300">{data.desc}</p>
</div>
</div>
))}
</div>
</section>
);
}
76 changes: 76 additions & 0 deletions src/app/blogs/pCardData.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,76 @@
const pCardData = [
{
bgImg: "1",
profileImg: "",
name: "Michael Angelo",
team: "WebXDAO Developer",
github: "",
twitter: "",
linkedin: "",
title: "Blockchain: Disrupting Industries",
desc: "Explore how blockchain revolutionizes traditional industries.",
link: "",
},
{
bgImg: "2",
profileImg: "",
name: "James Bond",
team: "WebXDAO Developer",
github: "",
twitter: "",
linkedin: "",
title: "Secure Digital Assets with Blockchain",
desc: "Discover the power of blockchain for securing digital assets.",
link: "",
},
{
bgImg: "3",
profileImg: "",
name: "Ron Smith",
team: "WebXDAO Developer",
github: "",
twitter: "",
linkedin: "",
title: "Blockchain and Sustainability",
desc: "Learn how blockchain drives positive change for sustainability.",
link: "",
},
{
bgImg: "4",
profileImg: "",
name: "Christian Pertti",
team: "WebXDAO Developer",
github: "",
twitter: "",
linkedin: "",
title: "Blockchain: Future of Banking",
desc: "Explore how blockchain reshapes banking with DeFi.",
link: "",
},
{
bgImg: "5",
profileImg: "",
name: "Chua Chan",
team: "WebXDAO Developer",
github: "",
twitter: "",
linkedin: "",
title: "Blockchain in Healthcare",
desc: "Transforming patient data management with blockchain.",
link: "",
},
{
bgImg: "6",
profileImg: "",
name: "Avendi Brucell",
team: "WebXDAO Developer",
github: "",
twitter: "",
linkedin: "",
title: "Blockchain in Gaming",
desc: "Powering the next generation of gaming with blockchain.",
link: "",
},
];

export default pCardData;
122 changes: 48 additions & 74 deletions src/app/blogs/page.tsx
Original file line number Diff line number Diff line change
@@ -1,90 +1,64 @@
import Image from "next/image";
// import { Blogs } from '../components/Global'
import Head from "next/head";
import Star from "@/components/star";
import { fontGilroy } from "@/lib/fonts";
import { cn } from "@/lib/utils";
import Blog from "./Blog";
import PCard from "./PCard";
// import { Blogs } from '@/components/Global'
import { Metadata } from "next";

export const metadata: Metadata = {
title: "Blog",
};


async function getData() {
const res = await fetch('https://dev.to/api/articles?username=webxdao');
// The return value is *not* serialized
// You can return Date, Map, Set, etc.

// Recommendation: handle errors
if (!res.ok) {
// This will activate the closest `error.js` Error Boundary
throw new Error('Failed to fetch data');
}

return res.json();
}

export default async function BlogPage({
params: { data },
}:{
params: { data: [] };
}) {
// Initiate dev.to API request
const blogData = getData();

// Wait for the promises to resolve
const [dataT] = await Promise.all([blogData]);
export default function BlogPage() {

return (
<>
<section className="py-8">
<div className="container mx-auto max-w-5xl">
<h1 className="my-2 w-full text-center text-4xl font-bold leading-tight text-white">
Blogs
<section className="w-full overflow-hidden py-8">
<div className="container mx-auto flex max-w-5xl flex-row flex-wrap justify-around lg:flex-nowrap ">
<h1
className={cn(
"w-max-content my-2 w-full text-center text-7xl font-semibold leading-tight text-slate-900 dark:text-white lg:text-left",
fontGilroy.className
)}
>
Dev Blog
</h1>
<div className="mt-9 hidden gap-20 lg:flex">
<div className="my-auto flex">
<Star height={40} width={40} />
</div>
<Star height={90} width={90} />
</div>
<svg xmlns="http://www.w3.org/2000/svg" width="900" height="2" className="-mx-52 mb-11 mt-auto hidden lg:flex">
<line x1="0" y1="0" x2="1000" y2="0" strokeWidth="2" className="stroke-black dark:stroke-white"/>
</svg>
</div>
<div className="ml-4 mr-1 mt-6 flex justify-center text-lg font-light leading-tight text-black dark:text-white sm:text-center md:text-xl lg:text-left ">
Our primary emphasis is on cutting-edge platforms in the industry, ensuring that{" "}
<br className="max-md:hidden" />
you are equipped with the necessary skills for your future endeavors.
</div>
</section>

<section>
<div className="z-2 relative mx-0 my-7 flex grid-cols-1 flex-wrap items-center justify-center">

{dataT.map((curElem: any) => {
return (
<div
className="grid-items z-2 justify-conten group relative m-7 flex h-min w-min items-center rounded-2xl bg-white/5 shadow-2xl backdrop-blur-md"
key={curElem.id}
>
<div className="relative flex h-80 w-[17.5rem] flex-col items-center justify-center opacity-70 hover:opacity-100 sm:w-[15.5rem] md:w-[19rem] lg:w-[27rem]">
<div className="relative w-4/5 truncate rounded-2xl border-8 border-solid border-black/25 duration-500 group-hover:-translate-y-6">
<Image
src={curElem.cover_image}
width={400}
height={250}
alt="blog image"
className="relative left-0 top-0 h-full w-full object-cover"
/>
</div>
<div className="relative m-0 flex-wrap items-center justify-center text-center">
<h3 className="mx-2.5 mb-2.5 mt-5 text-center text-sm font-medium uppercase leading-4 tracking-wider text-white duration-500 group-hover:-translate-y-6">
<b>{curElem.title}</b>
<br></br>
<br></br>
<span className="text-xs font-light lowercase">{curElem.description}</span>
<br></br>
<br></br>
<a
href={curElem.url}
target="_blank"
rel="noopener noreferrer"
className="inline-block rounded-md border border-transparent bg-green-500 px-8 py-3 text-center font-medium text-white"
>
<b>Read More</b>
</a>
</h3>
</div>
</div>
</div>
);
})}
<PCard />

<main className="mx-auto grid max-w-6xl gap-8 px-4">
<div className="mx-auto max-w-5xl">
<h1 className="my-10 text-center text-xl font-bold">Categories</h1>
<div className="flex flex-wrap justify-center gap-9 sm:gap-14">
{["Dapp", "Open Source", "Blockchain", "Community", "Hackathons"].map((name) => (
<div className="w-40 rounded py-2 text-center shadow-md shadow-purple-400/40">
{name}
</div>
))}
</div>
</section>
</section>
</div>
{/* @ts-expect-error Async Server Component */}
<Blog />
</main>
</>
);
};
}
2 changes: 1 addition & 1 deletion src/config/site.ts
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ export const siteConfig = {
},
{
title: "Blog",
href: "/",
href: "/blogs",
},
{
title: "Projects",
Expand Down
5 changes: 5 additions & 0 deletions src/styles/globals.css
Original file line number Diff line number Diff line change
Expand Up @@ -147,6 +147,11 @@
}

/*Scroll Bar*/

.no-scroll::-webkit-scrollbar {
display: none;
}

::-webkit-scrollbar {
width: 16px;
/* Width of the entire scrollbar */
Expand Down

0 comments on commit d5158a2

Please sign in to comment.