import Iframe from 'react-iframe'

const Cme: React.FC = () => {
  return (
    <>
      <div className="sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-2 xl:grid-cols-2 container grid gap-8 pt-6 mx-auto">
        <div>
          <Iframe
            width="100%"
            height="420"
            url="https://embed.theblockcrypto.com/data/crypto-markets/cme-cots/open-interest-of-cme-bitcoin-futures-by-trader-category-weekly/embed"
            title="Open Interest of CME Bitcoin Futures by Trader Category (long)"
          ></Iframe>
        </div>
        <div>
          <Iframe
            width="100%"
            height="420"
            url="https://embed.theblockcrypto.com/data/crypto-markets/cme-cots/open-interest-of-cme-bitcoin-futures-by-trader-category-short/embed"
            title="Open Interest of CME Bitcoin Futures by Trader Category (short)"
          ></Iframe>
        </div>

        <div>
          <Iframe
            width="100%"
            height="420"
            url="https://embed.theblockcrypto.com/data/crypto-markets/cme-cots/net-positions-of-cme-bitcoin-futures-by-trader-category-weekly/embed"
            title="Net Positions of CME Bitcoin Futures by Trader Category"
          ></Iframe>
        </div>

        <div>
          <Iframe
            width="100%"
            height="420"
            url="https://embed.theblockcrypto.com/data/crypto-markets/cme-cots/net-positions-of-cme-ether-futures-by-trader-category/embed"
            title="Net Positions of CME Ether Futures by Trader Category"
          ></Iframe>
        </div>
      </div>
    </>
  )
}

export default Cme
