Components
Loading preview...
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.
@ravikatiyar
npx shadcn@latest add https://21st.dev/r/ravikatiyar162/card-11import 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://images.unsplash.com/photo-1590283603385-17ffb3a7f29f?ixlib=rb-4.0.3&q=85&fm=jpg&crop=entropy&cs=srgb&w=300',
title: 'Bank Indonesia Maintains Interest Rates at 3.5%',
date: 'June 10, 2024',
source: 'CNN Indonesia',
href: '#',
},
{
id: 2,
imageUrl: 'https://plus.unsplash.com/premium_photo-1683121825174-ff1620a5e387?w=900&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MXx8b2lsfGVufDB8fDB8fHww?ixlib=rb-4.0.3&q=85&fm=jpg&crop=entropy&cs=srgb&w=300',
title: 'Global Oil Prices Drop: Impacts on Mining Stocks',
date: 'June 9, 2024',
source: 'Kontan',
href: '#',
},
{
id: 3,
imageUrl: 'https://images.unsplash.com/photo-1556740738-b6a63e27c4df?ixlib=rb-4.0.3&q=85&fm=jpg&crop=entropy&cs=srgb&w=300',
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;