Skip to content

Commit 77da065

Browse files
MadhavDhatrakMadhavDhatrak
committed
blog card updated
2 parents 7380a60 + 58c7cf0 commit 77da065

File tree

2 files changed

+79
-66
lines changed

2 files changed

+79
-66
lines changed

‎pages/blog/index.page.tsx

+78-66
Original file line numberDiff line numberDiff line change
@@ -225,7 +225,7 @@ export default function StaticMarkdownPage({
225225
</div>
226226

227227
{/* filterTag === frontmatter.type && */}
228-
<div className='grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 xl:grid-cols-5 gap-6 grid-flow-row mb-20 bg-white dark:bg-slate-800 mx-auto p-4'>
228+
<div className='grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8 mb-20 bg-white dark:bg-slate-800 mx-auto p-6'>
229229
{blogPosts
230230
.filter((post) => {
231231
if (!currentFilterTag || currentFilterTag === 'All') return true;
@@ -240,40 +240,37 @@ export default function StaticMarkdownPage({
240240
})
241241
.map((blogPost: any) => {
242242
const { frontmatter, content } = blogPost;
243-
const date = new Date(frontmatter.date);
244243
const timeToRead = Math.ceil(readingTime(content).minutes);
245244

246245
return (
247246
<section key={blogPost.slug}>
248-
<Link href={`/blog/posts/${blogPost.slug}`}>
249-
<div className='h-[520px] flex border rounded-lg shadow-sm hover:shadow-xl transition-all duration-300 overflow-hidden dark:border-slate-500 group relative'>
250-
<div className='inline-flex flex-col flex-1 w-full'>
251-
<div className='relative w-full h-[240px] overflow-hidden'>
252-
<Image
253-
src={frontmatter.cover}
254-
fill
255-
className='object-cover transition-transform duration-300 group-hover:scale-105'
256-
alt={frontmatter.title}
257-
/>
258-
</div>
259-
<div className='p-4 flex flex-col flex-1 justify-between'>
260-
<div>
261-
<div className='bg-blue-100 dark:bg-slate-700 dark:text-blue-100 font-semibold text-blue-800 inline-block px-3 py-1 rounded-full mb-4 text-sm'>
262-
{frontmatter.type || 'Unknown Type'}
263-
</div>
264-
<div className='text-lg font-semibold'>
265-
{frontmatter.title}
266-
</div>
267-
<div className='mt-3 mb-6 text-slate-500 dark:text-slate-300'>
268-
<TextTruncate
269-
element='span'
270-
line={4}
271-
text={frontmatter.excerpt}
272-
/>
273-
</div>
247+
<div className='h-[520px] flex border rounded-lg shadow-sm hover:shadow-xl transition-all duration-300 overflow-hidden dark:border-slate-500 group relative'>
248+
<div className='inline-flex flex-col flex-1 w-full'>
249+
<div className='relative w-full h-[240px] overflow-hidden'>
250+
<Image
251+
src={frontmatter.cover}
252+
fill
253+
className='object-cover transition-transform duration-300 group-hover:scale-105'
254+
alt={frontmatter.title}
255+
/>
256+
</div>
257+
<div className='p-4 flex flex-col flex-1 justify-between'>
258+
<div>
259+
<div className='bg-blue-100 dark:bg-slate-700 dark:text-blue-100 font-semibold text-blue-800 inline-block px-3 py-1 rounded-full mb-4 text-sm'>
260+
{frontmatter.type || 'Unknown Type'}
261+
</div>
262+
<div className='text-lg font-semibold text-gray-900 dark:text-white group-hover:text-blue-600 dark:group-hover:text-blue-400 transition-colors duration-300'>
263+
{frontmatter.title}
264+
</div>
265+
<div className='mt-3 mb-6 text-slate-500 dark:text-slate-300'>
266+
<TextTruncate
267+
element='span'
268+
line={3}
269+
text={frontmatter.excerpt}
270+
/>
274271
</div>
275-
276-
<div className='flex flex-row items-center'>
272+
<div className='mb-4'></div>
273+
<div className='flex items-center'>
277274
<div className='flex flex-row pl-2 mr-2'>
278275
{(frontmatter.authors || []).map(
279276
(author: Author, index: number) => (
@@ -292,58 +289,73 @@ export default function StaticMarkdownPage({
292289
),
293290
)}
294291
</div>
295-
296-
<div
297-
className={`
298-
flex
299-
flex-col
300-
items-start
301-
`}
302-
>
303-
<div className='text-sm font-semibold'>
304-
{frontmatter.authors.length > 2 ? (
305-
<>
306-
{frontmatter.authors
307-
.slice(0, 2)
308-
.map((author: Author, index: number) => (
309-
<span key={author.name}>
310-
{author.name}
311-
{index === 0 && ' & '}
312-
</span>
313-
))}
314-
{'...'}
315-
</>
316-
) : (
317-
frontmatter.authors.map(
318-
(author: Author, index: number) => (
292+
<div className='text-sm font-semibold dark:text-slate-300 mb-2'>
293+
{frontmatter.authors.length > 2 ? (
294+
<>
295+
{frontmatter.authors
296+
.slice(0, 2)
297+
.map((author: Author, index: number) => (
319298
<span key={author.name}>
320299
{author.name}
321-
{index < frontmatter.authors.length - 1 &&
322-
' & '}
300+
{index === 0 && ' & '}
323301
</span>
324-
),
325-
)
326-
)}
327-
</div>
328-
329-
<div className='text-slate-500 text-sm dark:text-slate-300'>
302+
))}
303+
{'...'}
304+
</>
305+
) : (
306+
frontmatter.authors.map(
307+
(author: Author, index: number) => (
308+
<span key={author.name}>
309+
{author.name}
310+
{index < frontmatter.authors.length - 1 &&
311+
' & '}
312+
</span>
313+
),
314+
)
315+
)}
316+
<div className='text-slate-500 text-sm dark:text-slate-400'>
330317
{frontmatter.date && (
331318
<span>
332-
{date.toLocaleDateString('en-us', {
319+
{new Date(
320+
frontmatter.date,
321+
).toLocaleDateString('en-us', {
333322
year: 'numeric',
334323
month: 'long',
335324
day: 'numeric',
336325
})}
337326
</span>
338-
)}{' '}
339-
&middot; {timeToRead} min read
327+
)}
340328
</div>
341329
</div>
342330
</div>
343331
</div>
332+
<div className='flex items-center justify-between pt-4 mt-4 border-t dark:border-slate-600'>
333+
<span className='text-sm text-slate-500 dark:text-slate-300'>
334+
{timeToRead} min read
335+
</span>
336+
<Link
337+
href={`/blog/posts/${blogPost.slug}`}
338+
className='text-blue-600 dark:text-blue-400 font-medium flex items-center hover:translate-x-1 transition-transform duration-300'
339+
>
340+
Read More
341+
<svg
342+
className='ml-1 w-4 h-4'
343+
fill='none'
344+
stroke='currentColor'
345+
viewBox='0 0 24 24'
346+
>
347+
<path
348+
strokeLinecap='round'
349+
strokeLinejoin='round'
350+
strokeWidth={2}
351+
d='M9 5l7 7-7 7'
352+
/>
353+
</svg>
354+
</Link>
355+
</div>
344356
</div>
345357
</div>
346-
</Link>
358+
</div>
347359
</section>
348360
);
349361
})}

‎styles/globals.css

+1
Original file line numberDiff line numberDiff line change
@@ -317,6 +317,7 @@ border-radius: 4px; */
317317
.group {
318318
transition: all 0.3s ease;
319319
}
320+
320321
.group:hover {
321322
transform: translateY(-2px);
322323
}

0 commit comments

Comments
 (0)