Blog Post In Card

// app/components/Card.js
import Image from 'next/image';
import React from 'react';

const Card = ({ title, price, category, thumbnail }) => {
  return (
    <div className="card" style={{ width: '18rem' }}>
      <Image src={thumbnail} className="card-img-top" alt="..." width={286} height={180} />
      <div className="card-body">
        <h5 className="card-title">{title}</h5>
        <p className="card-text">{price}</p>
        <p className="card-text">{category}</p>
        <a href="#" className="btn btn-primary">Go somewhere</a>
      </div>
    </div>
  );
};

export default Card;

// app/blog/page.tsx
import { getServerData } from 'next';
import Card from '../../components/Card';

export async function getServerData() {
  const res = await fetch('https://dummyjson.com/products');
  const data = await res.json();
  return {
    props: {
      products: data.products,
    },
  };
}

export default function Blog({ products }) {
  return (
    <div className="container">
      <h2>Blog</h2>
      <div className="row">
        {products.map((product) => (
          <div key={product.id} className="col-lg-3">
            <Card 
              title={product.title}
              price={product.price}
              category={product.category}
              thumbnail={product.thumbnail}
            />
          </div>
        ))}
      </div>
    </div>
  );
}