Article Card Grid This component displays a title and a responsive grid of article cards. It's designed to be easily populated with data via props, making it highly reusable for different sections of your application, such as blog post listings, feature showcases, or resource centers.
import React from 'react';
import { ArticleCardGrid } from '@/components/ui/card-grid'; // Adjust the import path as needed
const ArticleCardGridDemo = () => {
// Sample data for the article cards
const articles = [
{
id: 1,
imageSrc: 'https://images.unsplash.com/photo-1617704548623-340376564e68?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
title: 'How to reduce the carbon footprint of business travel',
linkText: 'See how',
linkHref: '#',
},
{
id: 2,
imageSrc: 'https://images.unsplash.com/photo-1574634534894-89d7576c8259?q=80&w=1964&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
title: 'The perks and benefits your employees want now',
linkText: 'Find out',
linkHref: '#',
},
{
id: 3,
imageSrc: 'https://images.unsplash.com/photo-1505506874110-6a7a69069a08?q=80&w=1974&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
title: 'The road to sustainability: executives discuss their efforts toward net zero',
linkText: 'Keep reading',
linkHref: '#',
},
];
return (
<div className="flex items-center justify-center w-full bg-background">
<ArticleCardGrid title="Interested in learning more?" articles={articles} />
</div>
);
};
export default ArticleCardGridDemo;