Skip to content

Commit d5158a2

Browse files
s2sharpits2sharpit
authored
feat: update Blog page (#479)
* updating blog page * adding scrollable cards * removing unnecessary code Signed-off-by: Tushar Saini <[email protected]> * removing cursor-pointer from blog cards Signed-off-by: Tushar Saini <[email protected]> --------- Signed-off-by: Tushar Saini <[email protected]>
1 parent a28661d commit d5158a2

File tree

12 files changed

+264
-75
lines changed

12 files changed

+264
-75
lines changed

‎public/blog/1.png

250 KB
Loading

‎public/blog/2.png

372 KB
Loading

‎public/blog/3.png

321 KB
Loading

‎public/blog/4.png

323 KB
Loading

‎public/blog/5.png

310 KB
Loading

‎public/blog/6.png

197 KB
Loading

‎src/app/blogs/Blog.tsx

Lines changed: 75 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
import Image from "next/image";
2+
import Link from "next/link";
3+
4+
async function getData() {
5+
const res = await fetch("https://dev.to/api/articles?username=webxdao");
6+
// The return value is *not* serialized
7+
// You can return Date, Map, Set, etc.
8+
9+
// Recommendation: handle errors
10+
if (!res.ok) {
11+
// This will activate the closest `error.js` Error Boundary
12+
throw new Error("Failed to fetch data");
13+
}
14+
15+
return res.json();
16+
}
17+
18+
export default async function Blog() {
19+
// Initiate dev.to API request
20+
const blogData = getData();
21+
22+
// Wait for the promises to resolve
23+
const [dataT] = await Promise.all([blogData]);
24+
25+
return (
26+
<section className="mt-20">
27+
<div className="mx-auto max-w-5xl md:px-8">
28+
<h1 className="mt-10 text-xl font-bold">Get to know more</h1>
29+
<p className="mx-auto mt-5 max-w-sm text-center md:max-w-xl lg:max-w-3xl">
30+
Discover the exciting world of blockchain technology as we come together to collaborate
31+
and expand our knowledge.
32+
</p>
33+
</div>
34+
<div className="mt-10 flex flex-wrap justify-center gap-16">
35+
{dataT.map((curElem: any) => (
36+
<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">
37+
<Image
38+
className="w-full rounded-md border"
39+
src={curElem.cover_image}
40+
width={400}
41+
height={250}
42+
alt=""
43+
/>
44+
<div className="grow px-6 py-4">
45+
<h3 className="mb-4 text-center text-sm font-bold uppercase leading-4 tracking-wider">
46+
{curElem.title}
47+
</h3>
48+
<p className="text-justify text-sm text-gray-700 dark:text-gray-300">
49+
{curElem.description}
50+
</p>
51+
</div>
52+
<div className="flex px-6 py-4">
53+
<Link
54+
href={curElem.url}
55+
target="_blank"
56+
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"
57+
>
58+
<Image
59+
src="/Arrow1.png"
60+
alt="arrow"
61+
width={15}
62+
height={15}
63+
className="my-auto flex items-center transition duration-100 ease-in group-hover:invert dark:invert"
64+
/>
65+
<span className="transition duration-100 ease-in group-hover:text-white">
66+
Read More
67+
</span>
68+
</Link>
69+
</div>
70+
</div>
71+
))}
72+
</div>
73+
</section>
74+
);
75+
}

‎src/app/blogs/PCard.tsx

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
"use client";
2+
import Image from "next/image";
3+
import Link from "next/link";
4+
import { FaGithub,FaLinkedin,FaTwitter } from "react-icons/fa";
5+
import pCardData from "./pCardData";
6+
7+
export default function PCard() {
8+
return (
9+
<section className="my-8 md:ml-32">
10+
<div
11+
className="no-scroll flex select-none gap-8 overflow-x-auto px-6"
12+
>
13+
{pCardData.map((data) => (
14+
<div className="max-w-[20rem]">
15+
<div className="relative flex w-80 overflow-hidden rounded-md">
16+
<Image
17+
src={`/blog/${data.bgImg}.png`}
18+
width={320}
19+
height={420}
20+
alt=""
21+
className="h-[28rem] w-80 rounded-md border"
22+
/>
23+
<div className="absolute bottom-0 flex h-36 w-full items-center justify-center gap-6 rounded-md backdrop-blur">
24+
<Image
25+
src={""}
26+
width={100}
27+
height={100}
28+
alt=""
29+
className="rounded-full border bg-gray-700"
30+
/>
31+
<div className="text-white">
32+
<h3 className="font-bold leading-3">{data.name}</h3>
33+
<small className="text-xs font-light">{data.team}</small>
34+
<div className="mt-1 flex gap-4 text-lg">
35+
<Link href={""}>
36+
<FaGithub />
37+
</Link>
38+
<Link href={""}>
39+
<FaTwitter />
40+
</Link>
41+
<Link href={""}>
42+
<FaLinkedin />
43+
</Link>
44+
</div>
45+
</div>
46+
</div>
47+
</div>
48+
<div className="grow px-2 py-4">
49+
<h3 className="text-sm font-bold">
50+
{data.title}
51+
</h3>
52+
<p className="text-justify text-sm text-gray-700 dark:text-gray-300">{data.desc}</p>
53+
</div>
54+
</div>
55+
))}
56+
</div>
57+
</section>
58+
);
59+
}

‎src/app/blogs/pCardData.js

Lines changed: 76 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
const pCardData = [
2+
{
3+
bgImg: "1",
4+
profileImg: "",
5+
name: "Michael Angelo",
6+
team: "WebXDAO Developer",
7+
github: "",
8+
twitter: "",
9+
linkedin: "",
10+
title: "Blockchain: Disrupting Industries",
11+
desc: "Explore how blockchain revolutionizes traditional industries.",
12+
link: "",
13+
},
14+
{
15+
bgImg: "2",
16+
profileImg: "",
17+
name: "James Bond",
18+
team: "WebXDAO Developer",
19+
github: "",
20+
twitter: "",
21+
linkedin: "",
22+
title: "Secure Digital Assets with Blockchain",
23+
desc: "Discover the power of blockchain for securing digital assets.",
24+
link: "",
25+
},
26+
{
27+
bgImg: "3",
28+
profileImg: "",
29+
name: "Ron Smith",
30+
team: "WebXDAO Developer",
31+
github: "",
32+
twitter: "",
33+
linkedin: "",
34+
title: "Blockchain and Sustainability",
35+
desc: "Learn how blockchain drives positive change for sustainability.",
36+
link: "",
37+
},
38+
{
39+
bgImg: "4",
40+
profileImg: "",
41+
name: "Christian Pertti",
42+
team: "WebXDAO Developer",
43+
github: "",
44+
twitter: "",
45+
linkedin: "",
46+
title: "Blockchain: Future of Banking",
47+
desc: "Explore how blockchain reshapes banking with DeFi.",
48+
link: "",
49+
},
50+
{
51+
bgImg: "5",
52+
profileImg: "",
53+
name: "Chua Chan",
54+
team: "WebXDAO Developer",
55+
github: "",
56+
twitter: "",
57+
linkedin: "",
58+
title: "Blockchain in Healthcare",
59+
desc: "Transforming patient data management with blockchain.",
60+
link: "",
61+
},
62+
{
63+
bgImg: "6",
64+
profileImg: "",
65+
name: "Avendi Brucell",
66+
team: "WebXDAO Developer",
67+
github: "",
68+
twitter: "",
69+
linkedin: "",
70+
title: "Blockchain in Gaming",
71+
desc: "Powering the next generation of gaming with blockchain.",
72+
link: "",
73+
},
74+
];
75+
76+
export default pCardData;

‎src/app/blogs/page.tsx

Lines changed: 48 additions & 74 deletions
Original file line numberDiff line numberDiff line change
@@ -1,90 +1,64 @@
1-
import Image from "next/image";
2-
// import { Blogs } from '../components/Global'
1+
import Head from "next/head";
2+
import Star from "@/components/star";
3+
import { fontGilroy } from "@/lib/fonts";
4+
import { cn } from "@/lib/utils";
5+
import Blog from "./Blog";
6+
import PCard from "./PCard";
7+
// import { Blogs } from '@/components/Global'
38
import { Metadata } from "next";
49

510
export const metadata: Metadata = {
611
title: "Blog",
712
};
813

914

10-
async function getData() {
11-
const res = await fetch('https://dev.to/api/articles?username=webxdao');
12-
// The return value is *not* serialized
13-
// You can return Date, Map, Set, etc.
14-
15-
// Recommendation: handle errors
16-
if (!res.ok) {
17-
// This will activate the closest `error.js` Error Boundary
18-
throw new Error('Failed to fetch data');
19-
}
20-
21-
return res.json();
22-
}
23-
24-
export default async function BlogPage({
25-
params: { data },
26-
}:{
27-
params: { data: [] };
28-
}) {
29-
// Initiate dev.to API request
30-
const blogData = getData();
31-
32-
// Wait for the promises to resolve
33-
const [dataT] = await Promise.all([blogData]);
15+
export default function BlogPage() {
3416

3517
return (
3618
<>
37-
<section className="py-8">
38-
<div className="container mx-auto max-w-5xl">
39-
<h1 className="my-2 w-full text-center text-4xl font-bold leading-tight text-white">
40-
Blogs
19+
<section className="w-full overflow-hidden py-8">
20+
<div className="container mx-auto flex max-w-5xl flex-row flex-wrap justify-around lg:flex-nowrap ">
21+
<h1
22+
className={cn(
23+
"w-max-content my-2 w-full text-center text-7xl font-semibold leading-tight text-slate-900 dark:text-white lg:text-left",
24+
fontGilroy.className
25+
)}
26+
>
27+
Dev Blog
4128
</h1>
29+
<div className="mt-9 hidden gap-20 lg:flex">
30+
<div className="my-auto flex">
31+
<Star height={40} width={40} />
32+
</div>
33+
<Star height={90} width={90} />
34+
</div>
35+
<svg xmlns="http://www.w3.org/2000/svg" width="900" height="2" className="-mx-52 mb-11 mt-auto hidden lg:flex">
36+
<line x1="0" y1="0" x2="1000" y2="0" strokeWidth="2" className="stroke-black dark:stroke-white"/>
37+
</svg>
4238
</div>
39+
<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 ">
40+
Our primary emphasis is on cutting-edge platforms in the industry, ensuring that{" "}
41+
<br className="max-md:hidden" />
42+
you are equipped with the necessary skills for your future endeavors.
43+
</div>
44+
</section>
4345

44-
<section>
45-
<div className="z-2 relative mx-0 my-7 flex grid-cols-1 flex-wrap items-center justify-center">
46-
47-
{dataT.map((curElem: any) => {
48-
return (
49-
<div
50-
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"
51-
key={curElem.id}
52-
>
53-
<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]">
54-
<div className="relative w-4/5 truncate rounded-2xl border-8 border-solid border-black/25 duration-500 group-hover:-translate-y-6">
55-
<Image
56-
src={curElem.cover_image}
57-
width={400}
58-
height={250}
59-
alt="blog image"
60-
className="relative left-0 top-0 h-full w-full object-cover"
61-
/>
62-
</div>
63-
<div className="relative m-0 flex-wrap items-center justify-center text-center">
64-
<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">
65-
<b>{curElem.title}</b>
66-
<br></br>
67-
<br></br>
68-
<span className="text-xs font-light lowercase">{curElem.description}</span>
69-
<br></br>
70-
<br></br>
71-
<a
72-
href={curElem.url}
73-
target="_blank"
74-
rel="noopener noreferrer"
75-
className="inline-block rounded-md border border-transparent bg-green-500 px-8 py-3 text-center font-medium text-white"
76-
>
77-
<b>Read More</b>
78-
</a>
79-
</h3>
80-
</div>
81-
</div>
82-
</div>
83-
);
84-
})}
46+
<PCard />
47+
48+
<main className="mx-auto grid max-w-6xl gap-8 px-4">
49+
<div className="mx-auto max-w-5xl">
50+
<h1 className="my-10 text-center text-xl font-bold">Categories</h1>
51+
<div className="flex flex-wrap justify-center gap-9 sm:gap-14">
52+
{["Dapp", "Open Source", "Blockchain", "Community", "Hackathons"].map((name) => (
53+
<div className="w-40 rounded py-2 text-center shadow-md shadow-purple-400/40">
54+
{name}
55+
</div>
56+
))}
8557
</div>
86-
</section>
87-
</section>
58+
</div>
59+
{/* @ts-expect-error Async Server Component */}
60+
<Blog />
61+
</main>
8862
</>
8963
);
90-
};
64+
}

0 commit comments

Comments
 (0)