Latest News Card A card component designed to display a list of recent articles or news items. It features a main title, a "View all" link, and a list of animated news entries that fade in on load. Each item is clickable and has a subtle hover effect.
import React from 'react';
import { LatestNewsCard, NewsItem } from '@/components/ui/card-11';
// --- MOCK DATA ---
// Sample data to showcase the component's functionality.
const sampleNewsItems: NewsItem[] = [
{
id: 1,
imageUrl: 'https://cdn.21st.dev/assets/mirror/c7/c7cacb62ea907685b1f7813c3dc0244f53caa1e4dc63943975f4300b56cc6138.jpg',
title: 'Bank Indonesia Maintains Interest Rates at 3.5%',
date: 'June 10, 2024',
source: 'CNN Indonesia',
href: '#',
},
{
id: 2,
imageUrl: 'https://cdn.21st.dev/assets/mirror/bb/bbbe98c1d61e68e468d3a6dc4610a2633828d75236ae72f2d6c685d67626b9f6.jpg',
title: 'Global Oil Prices Drop: Impacts on Mining Stocks',
date: 'June 9, 2024',
source: 'Kontan',
href: '#',
},
{
id: 3,
imageUrl: 'https://cdn.21st.dev/assets/mirror/47/475bbba31695e229e159e5dd12c54c74960f5db4f19b63ad54c41bdc44ce8158.jpg',
title: 'IDX Rises 2% After First Quarter Earnings Reports',
date: 'June 8, 2024',
source: 'CNBC Indonesia',
href: '#',
},
];
/**
* A demo page to display the LatestNewsCard component.
*/
const LatestNewsCardDemo = () => {
return (
<div className="flex min-h-screen w-full items-center justify-center bg-background p-4">
<LatestNewsCard
title="Latest News"
viewAllText="View all"
viewAllHref="#"
newsItems={sampleNewsItems}
/>
</div>
);
};
export default LatestNewsCardDemo;