React - Bluesky Embed

BlueskyEmbed.tsx

import React, { PropsWithChildren } from "react";

type Props = {
  id: string;
  userId: string;
};

// <BlueskyEmbed id="3lmcux5cabv2i" userId="itayxaatwwlwww4fp3jac3nn" />
const BlueskyEmbed = ({ id, userId, children }: PropsWithChildren<Props>) => {
  const uri = `at://did:plc:${userId}/app.bsky.feed.post/${id}`
  return (
    <div style={{ marginBottom: "3rem", display: "flex" justifyContent: "center"}}>
      <blockquote
        className="bluesky-embed"
        data-bluesky-uri={uri}
        data-bluesky-cid="bafyreiflt6p6c77vxtubpa4aev2qzilnkntxjbxx5x34x5yovs2afazyta"
        data-bluesky-embed-color-mode="system"
      >
        {children}
      </blockquote>
      <script
        async
        src="https://embed.bsky.app/static/embed.js"
        charSet="utf-8"
      />
    </div>
  );
};

export default BlueskyEmbed;