Skip to content

Commit 5efdaf5

Browse files
AbhinavMVAbhinavMV
committed
Minor Change
1 parent 16b4418 commit 5efdaf5

File tree

17 files changed

+931
-990
lines changed

17 files changed

+931
-990
lines changed

‎components/Global/Blogs.jsx‎

Lines changed: 64 additions & 68 deletions
Original file line numberDiff line numberDiff line change
@@ -2,75 +2,71 @@ import Image from 'next/image'
22
import Link from 'next/link'
33

44
const Blogs = ({ articles, contentOnly = false, show = articles.length }) => {
5-
return (
6-
<section className='bg-white py-8'>
7-
{!contentOnly && (
8-
<div className='container max-w-5xl mx-auto'>
9-
<h1 className='w-full my-2 text-4xl font-bold leading-tight text-center text-gray-800'>
10-
Blogs
11-
</h1>
12-
<div className='w-full mb-4'>
13-
<div className='h-1 mx-auto gradient w-64 opacity-25 my-0 py-0 rounded-t'></div>
14-
</div>
5+
return (
6+
<section className='bg-white py-8'>
7+
{!contentOnly && (
8+
<div className='container max-w-5xl mx-auto'>
9+
<h1 className='w-full my-2 text-4xl font-bold leading-tight text-center text-gray-800'>
10+
Blogs
11+
</h1>
12+
<div className='w-full mb-4'>
13+
<div className='h-1 mx-auto gradient w-64 opacity-25 my-0 py-0 rounded-t'></div>
14+
</div>
15+
</div>
16+
)}
17+
<div className='container max-w-screen-xl mx-auto pt-4 pb-8 grid grid-cols-3 mb-8 gap-6 px-8'>
18+
{articles.length > 0 ? (
19+
articles.slice(0, show).map((article, index) => (
20+
<Link key={article.title + index} href={article.url} passHref>
21+
<div 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'>
22+
<div className='bg-white p-4 rounded-lg'>
23+
<div className='relative bg-contain'>
24+
<Image
25+
alt={article.title}
26+
layout='responsive'
27+
height={150}
28+
width={150}
29+
className='lg:h-60 xl:h-56 md:h-64 sm:h-72 xs:h-72 h-72 rounded-md w-full object-cover object-center mb-6'
30+
src={article.social_image}
31+
/>
32+
</div>
33+
<div className='flex justify-between'>
34+
<h2 className='text-xl text-gray-900 font-semibold mb-4'>{article.title}</h2>
35+
</div>
36+
<p className='leading-relaxed text-sm text-gray-600'>{article.description}</p>
1537
</div>
16-
)}
17-
<div className='container max-w-screen-xl mx-auto pt-4 pb-8 grid grid-cols-3 mb-8 gap-6 px-8'>
18-
{articles.length > 0 ? (
19-
articles.slice(0, show).map((article, index) => (
20-
<Link key={article.title + index} href={article.url} passHref>
21-
<div 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'>
22-
<div className='bg-white p-4 rounded-lg'>
23-
<div className='relative bg-contain'>
24-
<Image
25-
alt={article.title}
26-
layout='responsive'
27-
height={150}
28-
width={150}
29-
className='lg:h-60 xl:h-56 md:h-64 sm:h-72 xs:h-72 h-72 rounded-md w-full object-cover object-center mb-6'
30-
src={article.social_image}
31-
/>
32-
</div>
33-
<div className='flex justify-between'>
34-
<h2 className='text-xl text-gray-900 font-semibold mb-4'>
35-
{article.title}
36-
</h2>
37-
</div>
38-
<p className='leading-relaxed text-sm text-gray-600'>
39-
{article.description}
40-
</p>
41-
</div>
42-
<time className='p-4 text-gray-500 text-xs flex items-end'>
43-
<Image
44-
layout='fixed'
45-
width={40}
46-
height={40}
47-
src={article?.user?.profile_image}
48-
alt={article.user.name}
49-
className='rounded-full'
50-
/>
51-
<p className='ml-2 opacity-50'>
52-
by {article.user.name} on
53-
{' ' + article.readable_publish_date}
54-
</p>
55-
</time>
56-
</div>
57-
</Link>
58-
))
59-
) : (
60-
<div className='text-center w-full'>No Blogs found....</div>
61-
)}
62-
</div>
63-
{!contentOnly && (
64-
<div className='flex justify-center'>
65-
<a href='https://dev.to/web3community' target='_blank' rel='noreferrer'>
66-
<button className='bg-gray-700 text-white mx-auto lg:mx-0 rounded-md py-2 px-8 shadow transform transition hover:scale-85 hover:shadow-lg duration-300 ease-in-out'>
67-
See All
68-
</button>
69-
</a>
70-
</div>
71-
)}
72-
</section>
73-
)
38+
<time className='p-4 text-gray-500 text-xs flex items-end'>
39+
<Image
40+
layout='fixed'
41+
width={40}
42+
height={40}
43+
src={article?.user?.profile_image}
44+
alt={article.user.name}
45+
className='rounded-full'
46+
/>
47+
<p className='ml-2 opacity-50'>
48+
by {article.user.name} on
49+
{' ' + article.readable_publish_date}
50+
</p>
51+
</time>
52+
</div>
53+
</Link>
54+
))
55+
) : (
56+
<div className='text-center w-full'>No Blogs found....</div>
57+
)}
58+
</div>
59+
{!contentOnly && (
60+
<div className='flex justify-center'>
61+
<a href='https://dev.to/web3community' target='_blank' rel='noreferrer'>
62+
<button className='bg-gray-700 text-white mx-auto lg:mx-0 rounded-md py-2 px-8 shadow transform transition hover:scale-85 hover:shadow-lg duration-300 ease-in-out'>
63+
See All
64+
</button>
65+
</a>
66+
</div>
67+
)}
68+
</section>
69+
)
7470
}
7571

7672
export default Blogs

0 commit comments

Comments
 (0)