Dapp Breeds

Collection.jsx

import React, { useEffect, useState } from 'react'
import CollectionCard from './CollectionCard'

const Collection = ({ collection, title }) => {
  const [end, setEnd] = useState(4)
  const [count] = useState(4)
  const [nfts, setNfts] = useState([])

  const getNfts = () => {
    return collection.slice(0, end)
  }

  useEffect(() => {
    setNfts(getNfts())
  }, [collection, end])

  return collection?.length > 0 ? (
    <div className="mt-5 flex flex-col w-full mx-auto">
      <div className="flex items-center justify-center ">
        <h2 className="font-extrabold text-3xl md:text-5xl text-white ">
          {title ? title : 'Recent Breedings'}
        </h2>
      </div>

      <div className="p-10 pt-0 md:p-20 w-full">
        <div className="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 gap-6 md:gap-4 lg:gap-3 py-2.5">
          {nfts.map((nft, i) => (
            <CollectionCard key={i} nft={nft} />
          ))}
        </div>
      </div>

      {collection.length > 0 && collection.length > nfts.length && (
        <div className="flex justify-center items-center mx-auto">
          <button
            className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-4
          px-6 rounded-full transition-all duration-300 shadow-lg shadow-black"
            onClick={() => setEnd(end + count)}
          >
            Load more
          </button>
        </div>
      )}
    </div>
  ) : null
}

export default Collection

CollectionCard.jsx

import React from 'react'
import { Link } from 'react-router-dom'

const CollectionCard = ({ nft }) => (
  <Link
    to={'/nft/' + nft.id}
    className="max-w-xs sm:max-w-sm text-white overflow-hidden
    border-2 rounded-xl border-gray-400 shadow-lg"
  >
    <div className="flex justify-start items-center gap-2 p-4">
      <img
        src={nft.traits.image}
        alt={nft.traits.name}
        className=" w-12 h-24 object-cover"
      />
      <div className="flex-col gap-2">
        <h2 className=" font-extrabold">{nft.traits.name}</h2>
        <p>{nft.traits.description}</p>
        {nft.traits.breeded ? (
          <span className="text-sm font-semibold text-blue-500">
            {nft.traits.weapon} & {nft.traits.environment} (Inherited)
          </span>
        ) : (
          <span className="text-sm font-semibold text-blue-500">
            {nft.traits.weapon} & {nft.traits.environment} (Minted)
          </span>
        )}
      </div>
    </div>
  </Link>
)

export default CollectionCard