sebastjan/folx-tv
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add an advertisement card to the blog post category page

Browse Source 
Integrate `ArticleCardAd` component into the category page's article grid to display an advertisement between posts.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 413891e8-d784-4bea-b9f5-91a5a68316b4
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Event-Id: 280e79de-a056-4133-85e8-89539a552ee8
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/f209e72a-0939-48fa-84fc-57854de71967/413891e8-d784-4bea-b9f5-91a5a68316b4/igVW4lQ
Replit-Helium-Checkpoint-Created: true
This commit is contained in:
sebastjanartic 2026-02-28 18:03:05 +00:00
parent 01f642aea6
commit 301bb9277e
1 changed files with 46 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
client/src/pages/category.tsx
View File

@ -8,6 +8,7 @@ import { Button } from "@/components/ui/button";
import { Skeleton } from "@/components/ui/skeleton"; import { Skeleton } from "@/components/ui/skeleton";
import Header from "@/components/header"; import Header from "@/components/header";
import Footer from "@/components/footer"; import Footer from "@/components/footer";
import { ArticleCardAd } from "@/components/adsense";
export default function CategoryPage() { export default function CategoryPage() {
const { category } = useParams<{ category: string }>(); const { category } = useParams<{ category: string }>();
@ -46,10 +47,11 @@ export default function CategoryPage() {
</div> </div>
) : articles && articles.length > 0 ? ( ) : articles && articles.length > 0 ? (
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
{articles.map((article) => ( {articles.flatMap((article, index) => {
const items = [
<Link key={article.id} href={`/article/${article.slug}`}> <Link key={article.id} href={`/article/${article.slug}`}>
<article <article
className="group cursor-pointer bg-card rounded-md border border-card-border transition-all duration-300" className="group cursor-pointer bg-card rounded-md border border-card-border transition-all duration-300 h-full"
data-testid={`card-article-${article.id}`} data-testid={`card-article-${article.id}`}
> >
<div className="relative rounded-t-md"> <div className="relative rounded-t-md">
@ -85,8 +87,13 @@ export default function CategoryPage() {
</div> </div>
</div> </div>
</article> </article>
</Link> </Link>,
))} ];
if (index === 2) {
items.push(<ArticleCardAd key="ad-cat-1" />);
}
return items;
})}
</div> </div>
) : ( ) : (
<div className="text-center py-16"> <div className="text-center py-16">