carousel.tsx

const Carousel: NextPage<{ data: Dog[] }> = ({ data }) => {
  return (
    <div>
      <main>
        <h1>Carousel</h1>

        <div
          style={{
            width: "50%",
            display: "grid",
            gridTemplateColumns: "repeat(2, 1fr)",
          }}
        >
          {data.map((dog) => (
            <Link href={`/dogs/${dog.id}`} key={dog.id}>
              <div style={{
                border: "1px solid #ccc",
                cursor: "pointer",
              }}>
                <h2>{dog.name}</h2>
                <p>{dog.description}</p>
              </div>
            </Link>
          ))}
        </div>
        {/* For every dog in data array, display their name and description */}

        <p style={{ color: "#0070f3" }}>
          <Link href="/">Back to Index</Link>
        </p>
      </main>
    </div>
  );
};