Rocket
Mini tools
Vijay Chauhan Chauhan
@vijaychauhancha Tasks: 2
🛠️ 1 tool
🙏 6 karma
Beginner
Joined: November 2024
Follow
Vijay Chauhan Chauhan's tools
-
3626Released 10mo ago100% Free# Next.js Reusable Card Component This template provides a reusable Card component for Next.js applications. It includes responsive styling, props validation, and optional image support. ```tsx import Image from 'next/image'; import { FC } from 'react'; import styles from './Card.module.css'; interface CardProps { title: string; description: string; imageUrl?: string; onClick?: () => void; } const Card: FC<CardProps> = ({ title, description, imageUrl, onClick }) => { return ( <div className={styles.card} onClick={onClick}> {imageUrl && ( <div className={styles.imageContainer}> <Image src={imageUrl} alt={title} layout="fill" objectFit="cover" /> </div> )} <div className={styles.content}> <h2 className={styles.title}>{title}</h2> <p className={styles.description}>{description}</p> </div> </div> ); }; export default Card; ``` ## Usage 1. Create a `Card.module.css` file in the same directory for styling: ```css .card { border: 1px solid #e0e0e0; border-radius: 8px; overflow: hidden; transition: box-shadow 0.3s ease; cursor: pointer; } .card:hover { box-shadow: 0 4px 8px rgba(0,0,0,0.1); } .imageContainer { position: relative; width: 100%; height: 200px; } .content { padding: 16px; } .title { font-size: 1.25rem; margin-bottom: 8px; } .description { font-size: 1rem; color: #666; } ``` 2. Import and use the Card component in your pages or other components: ```tsx import Card from '../components/Card'; const HomePage = () => { return ( <div> <Card title="Example Card" description="This is a reusable card component." imageUrl="/example-image.jpg" onClick={() => console.log('Card clicked')} /> </div> ); }; export default HomePage; ``` This Card component is designed to be flexible and reusable across your Next.js application. It accepts props for title, description, an optional image URL, and an optional onClick handler. The component uses CSS Modules for scoped styling and Next.js's Image component for optimized image loading.
