Give me a responsive grid layout with Next.js, Tailwind and shadcn/ui that displays cars. Each car item should display: Car's image Car's brand Car's model Car's price

// components/CarGrid.js
import Image from 'next/image';
import { Card, CardHeader, CardBody } from "@/components/ui/card"

const cars = [
  {
    image: '/images/car1.jpg', // Replace with your image paths
    brand: 'Toyota',
    model: 'Camry',
    price: '$25,000',
  },
  {
    image: '/images/car2.jpg',
    brand: 'Honda',
    model: 'Civic',
    price: '$22,000',
  },
  {
    image: '/images/car3.jpg',
    brand: 'Tesla',
    model: 'Model 3',
    price: '$40,000',
  },
  // ... more car data
    {
    image: '/images/car4.jpg', // Replace with your image paths
    brand: 'BMW',
    model: 'M5',
    price: '$80,000',
  },
  {
    image: '/images/car5.jpg',
    brand: 'Mercedes-Benz',
    model: 'C-Class',
    price: '$50,000',
  },
  {
    image: '/images/car6.jpg',
    brand: 'Audi',
    model: 'A4',
    price: '$45,000',
  },
];

const CarGrid = () => {
  return (
    <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4 p-4">
      {cars.map((car, index) => (
        <Card key={index} className="bg-white rounded-lg shadow-md"> {/* Added rounded corners and shadow */}
          <CardHeader className="p-4">
          <Image
              src={car.image}
              alt={`${car.brand} ${car.model}`}
              width={500} // Adjust width as needed
              height={300} // Adjust height as needed
              className="object-cover rounded-t-lg" // Rounded top corners for image
            />
          </CardHeader>
          <CardBody className="p-4">
            <h3 className="text-lg font-semibold">{car.brand} {car.model}</h3>
            <p className="text-gray-600">{car.price}</p>
          </CardBody>
        </Card>
      ))}
    </div>
  );
};

export default CarGrid;

// pages/index.js (or any other page)
import CarGrid from '../components/CarGrid';

export default function Home() {
  return (
    <div className="container mx-auto"> {/* Center content */}
      <h1 className="text-3xl font-bold mb-4 mt-8 text-center">Car Listings</h1> {/* Centered title */}
      <CarGrid />
    </div>
  );
}

Key improvements and explanations:

• Responsiveness: The grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 classes make the grid responsive. It starts with one column on small screens, two on medium screens, three on large screens, and four on extra-large screens. Adjust the breakpoints (sm, md, lg, xl) as needed.
• Tailwind CSS Styling: Added Tailwind classes for styling:
  • gap-4: Adds spacing between grid items.
  • p-4: Adds padding to the grid container.
  • bg-white, rounded-lg, shadow-md: Styles the card.
  • text-lg font-semibold: Styles the car title.
  • text-gray-600: Styles the price.
  • object-cover: Ensures the image covers the entire container while maintaining aspect ratio.
  • rounded-t-lg: Rounds the top corners of the image.
  • container mx-auto: Centers the content on the page.
  • mt-8 mb-4: Adds margin to the title.
  • text-center: Centers the title text.
• Next.js Image Component: Uses the optimized next/image component for images. Make sure you configure your next.config.js file to allow image domains if you're using external images. The width and height props are crucial for preventing layout shift. Set them according to your image dimensions.
• shadcn/ui Card: Uses the Card, CardHeader, and CardBody components from shadcn/ui for a consistent card look. Make sure you have installed @shadcn/ui.
• Clearer Data Structure: The cars array is more organized.
• Key Prop: Added the key prop to the mapped elements, which is essential for React to efficiently update the list.
• Centered Content: The content is now centered on the page using container mx-auto and text-center for the title.
• Rounded Corners and Shadows: Added rounded-lg and shadow-md to the card for a better visual appearance.
• Image Styling: Added rounded-t-lg to round the top corners of the image and object-cover to make the image cover the card area.

To use this:

1. Install Dependencies:

   Bash

   npm install @shadcn/ui next/image
   

2. Import Components: Import the necessary components as shown in the code.

3. Replace Image Paths: Replace the placeholder image paths (/images/car1.jpg, etc.) with the actual paths to your car images. Make sure these images are accessible from your Next.js application (either in the public directory or hosted elsewhere and configured in next.config.js).

4. Add Car Data: Add more car objects to the cars array.

5. Use the CarGrid component: Place the <CarGrid /> component in your desired page or component.

This improved example provides a more robust, responsive, and visually appealing car grid layout. Remember to adjust the styling and data to fit your specific needs.