57 lines
1.9 KiB
TypeScript
57 lines
1.9 KiB
TypeScript
import { ChevronRight } from "lucide-react";
|
|
|
|
import { Button } from "@/components/ui/button";
|
|
import {
|
|
Card,
|
|
CardContent,
|
|
CardDescription,
|
|
CardHeader,
|
|
} from "@/components/ui/card";
|
|
import { BLOG_SITES } from "@/blog-sites.js";
|
|
|
|
const features = BLOG_SITES.map((site) => ({
|
|
title: site.title,
|
|
description: site.description,
|
|
href: site.url,
|
|
}));
|
|
|
|
export default function AllBlogs() {
|
|
return (
|
|
<section id="ai-chatbot" className="relative py-16 md:py-28 lg:py-32">
|
|
<div className="container max-w-5xl">
|
|
<div className="text-center">
|
|
<h3 className="mini-title">CURRENTLY ACTIVE BLOGS</h3>
|
|
</div>
|
|
|
|
<div className="mt-8 grid grid-cols-1 gap-2.5 sm:grid-cols-2 md:mt-12 lg:mt-20 lg:grid-cols-3 lg:gap-6">
|
|
{features.map((feature, index) => (
|
|
<Card key={index} className="flex flex-col">
|
|
<CardHeader className="max-md:p-3">
|
|
<h3 className="text-lg font-semibold">{feature.title}</h3>
|
|
<CardDescription className="text-foreground mt-4 font-medium">
|
|
{feature.description}
|
|
</CardDescription>
|
|
</CardHeader>
|
|
<CardContent className="mt-auto max-md:p-3">
|
|
<Button
|
|
variant="outline"
|
|
asChild
|
|
className="border-border group w-[min(100%,300px)]"
|
|
>
|
|
<a href={feature.href}>
|
|
Read On
|
|
<span className="sr-only">
|
|
{" "}
|
|
about {feature.description.toLowerCase()}
|
|
</span>
|
|
<ChevronRight className="ml-1 size-4 transition-transform group-hover:translate-x-0.5" />
|
|
</a>
|
|
</Button>
|
|
</CardContent>
|
|
</Card>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|