[go: up one dir, main page]
Scribd
Upload
12 views2 pages

Edumark Card Components

react code

Uploaded by

davoooooooooooooood
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
12 views2 pages

Edumark Card Components

react code

Uploaded by

davoooooooooooooood
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 2

import React from 'react';

interface ImageProps {
src: string;
alt: string;
className?: string;
}

const Image: React.FC<ImageProps> = ({ src, alt, className }) => (


<img src={src} alt={alt} className={`object-cover w-full h-full ${className ||
''}`} />
);

interface CardProps {
type: string;
date: string;
title: string;
description: string;
imageSrc: string;
}

const Card: React.FC<CardProps> = ({ type, date, title, description, imageSrc }) =>


(
<div className="bg-white rounded-lg shadow-md overflow-hidden">
<div className="relative h-40">
<Image src={imageSrc} alt={title} />
</div>
<div className="p-4">
<div className="flex justify-between items-center mb-2">
<span className="bg-indigo-100 text-indigo-800 text-xs font-semibold px-2.5
py-0.5 rounded">{type}</span>
<span className="text-xs text-gray-500">{date}</span>
</div>
<h3 className="text-lg font-semibold mb-2">{title}</h3>
<p className="text-sm text-gray-600 mb-4">{description}</p>
<button className="w-full bg-indigo-500 hover:bg-indigo-600 text-white font-
bold py-2 px-4 rounded-full transition duration-300">
Register now
</button>
</div>
</div>
);

interface CardListProps {
cards: CardProps[];
}

const CardList: React.FC<CardListProps> = ({ cards }) => (


<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
{cards.map((card, index) => (
<Card key={index} {...card} />
))}
</div>
);

// Example usage
const App: React.FC = () => {
const cardData: CardProps[] = [
{
type: 'Conferences',
date: 'Thu, Aug 1',
title: 'MarketerConf 2024: Decode the Language of...',
description: 'Decode the language of marketing, learn all the new marketing
trends of 2024, and connect with 1000+ marketing experts.',
imageSrc: '/api/placeholder/400/300'
},
{
type: 'Webinars',
date: 'Wed, Aug 7',
title: 'Edumark Webinar: Learn the Art of Email Marketing',
description: 'Dive deep into the art of email marketing and learn everything
from email design to copywriting for emails.',
imageSrc: '/api/placeholder/400/300'
},
{
type: 'Meetups',
date: 'Mon, Jul 31',
title: 'Content Creators Unplugged: Elevate yourself',
description: 'Unplug from the ordinary and join a community of content
creators. Share your experience, and let creativity flow freely.',
imageSrc: '/api/placeholder/400/300'
}
];

return (
<div className="container mx-auto p-6">
<CardList cards={cardData} />
</div>
);
};

export default App;

You might also like