How to embed CodePen in Next js 13.4

npm i react-codepen-embed

import React from "react";
import Codepen from "react-codepen-embed";

const CodepenEmbedded = () => {
  return <Codepen hash="LYXLqpx" user="chrisgannon" />;
};

export default CodepenEmbedded;

npm i react-iframe

"use client";
import React from "react";
import Iframe from "react-iframe";
const EmbedCodePen = (props) => {
  const { author, slug } = props;
  // example https://codepen.io/chrisgannon/pen/LYXLqpx
  // here author is chrisgannon and slug is LYXLqpx
  return (
    <>
      <div className="preloaded">
        <Iframe
          url={`https://codepen.io/${author}/embed/${slug}?default-tab=result&editable=true&theme-id=dark`}
          width="100%"
          height="450px"
          loading="lazy"
          id="myId"
          className="myClassname"
          display="initial"
          position="relative"
          allowFullScreen={true}
        />
      </div>
    </>
  );
};

/* 
preloaded class css code:
.preloaded {
  background: linear-gradient(to right, #eee 8%, #e1e1e1 18%, #eee 33%);
  background-size: 200% 50px;
  animation: preloadAnimation 2s infinite;
}

@keyframes preloadAnimation {
  from {
    background-position: -280px 0;
  }

  to {
    background-position: 300px 0;
  }
}
*/

export default EmbedCodePen;

import EmbedCodePen from "./EmbedCodePen";

const App = () => {
  return (
    <>
      <EmbedCodePen author="chrisgannon" slug="LYXLqpx" />
    </>
  );
};

export default App;