github/pse.dev
1
1
Fork 0
mirror of https://github.com/privacy-scaling-explorations/pse.dev.git synced 2026-01-10 14:48:13 -05:00
Code Issues Packages Projects Releases Wiki Activity

feat: blog article layout fix (#345)

Browse Source
This commit is contained in:
Kalidou Diagne
2025-04-22 23:18:11 +03:00
committed by GitHub
parent 80854ba7c5
commit 2410e7f245
3 changed files with 35 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
app/[lang]/blog/page.tsx
View File

@@ -37,21 +37,22 @@ const ArticlesGrid = ({
({ id, title, image, tldr = "", date, authors, content }: Article) => {
const url = `/${lang}/blog/${id}`
return (
<Link
className="flex-1 w-full h-full group hover:opacity-90 transition-opacity duration-300 rounded-xl overflow-hidden bg-white shadow-sm border border-slate-900/10"
key={id}
href={url}
rel="noreferrer"
>
<BlogArticleCard
id={id}
image={image}
title={title}
date={date}
authors={authors}
content={content}
/>
</Link>
<div key={id} className="flex h-full">
<Link
className="flex-1 w-full hover:opacity-90 transition-opacity duration-300 rounded-xl overflow-hidden bg-white shadow-sm border border-slate-900/10"
href={url}
rel="noreferrer"
>
<BlogArticleCard
id={id}
image={image}
title={title}
date={date}
authors={authors}
content={content}
/>
</Link>
</div>
)
}
)}
@@ -90,9 +91,7 @@ const BlogPage = async ({ params: { lang }, searchParams }: BlogPageProps) => {
<div className="flex justify-center py-10">Loading articles...</div>
}
>
{articles.map((article, index) => (
<ArticlesGrid key={index} articles={articles} lang={lang} />
))}
<ArticlesGrid articles={articles} lang={lang} />
</Suspense>
</AppContent>
</div>

4
components/blog/blog-article-card.tsx
View File

@@ -24,7 +24,7 @@ export const BlogArticleCard = ({
}: Article) => {
const imageUrl = `/articles/${id}/${image}`
return (
<div className="flex flex-col h-full">
<div className="flex flex-col h-full w-full">
<div className="relative h-48 w-full overflow-hidden bg-gray-100">
{!!image && (
<Image
@@ -37,7 +37,7 @@ export const BlogArticleCard = ({
)}
</div>
<div className="p-5 flex flex-col gap-5 lg:gap-8 min-h-[180px]">
<div className="p-5 flex flex-col flex-grow gap-5 lg:gap-8 min-h-[180px]">
<div className="flex flex-col gap-2">
<div className="flex items-center gap-1">
<Image

31
components/blog/blog-articles.tsx
View File

@@ -33,21 +33,22 @@ function ArticlesGrid({
// Use lang parameter for correct article URL
const url = `/${lang}/blog/${id}`
return (
<Link
className="flex-1 w-full h-full group hover:opacity-90 transition-opacity duration-300 rounded-xl overflow-hidden bg-white shadow-sm border border-slate-900/10"
key={id}
href={url}
rel="noreferrer"
>
<BlogArticleCard
id={id}
image={image}
title={title}
date={date}
authors={authors}
content={content}
/>
</Link>
<div key={id} className="flex h-full">
<Link
className="flex-1 w-full hover:opacity-90 transition-opacity duration-300 rounded-xl overflow-hidden bg-white shadow-sm border border-slate-900/10"
href={url}
rel="noreferrer"
>
<BlogArticleCard
id={id}
image={image}
title={title}
date={date}
authors={authors}
content={content}
/>
</Link>
</div>
)
}
)}