Function NotionRenderer

src/components/NotionRenderer.tsx:29–135

({
  id,
  courseId,
}: {
  id: string;
  courseId: number;
})

// Week-4-1-647987d9b1894c54ba5c822978377910
export const NotionRenderer = ({
  id,
  courseId,
}: {
  id: string;
  courseId: number;
}) => {
  const { resolvedTheme } = useTheme();

  const [data, setData] = useState(null);
  async function main() {
    const res = await fetch(`/api/notion?id=${id}`);
    const json = await res.json();
    setData(json.recordMap);
  }

  useEffect(() => {
    main();

    return () => {
      handleMarkAsCompleted(true, courseId);
    };
  }, [id]);

  if (!data) {
    return <Loader />;
  }

  return (
    <div>
      {/* <Link href={`/pdf/${id}`} target="_blank">
        <Button size={'lg'} className="gap-2">
          Download
          <Download className="size-4" />
        </Button>
      </Link> */}
      <div>
        <style>
          {`
            :root {
              --bg-color: #F8F8F8;
              --fg-color: #333333;
            }
            .dark-mode {
              --bg-color: #1A1A1A;
              --fg-color: #E0E0E0;
            }
            .notion {
              background-color: var(--bg-color);
              color: var(--fg-color);
              max-width: 100%;
              overflow-wrap: break-word;
              word-wrap: break-word;
              word-break: break-word;
              border-radius: 1rem;
            }
            .notion-page {
              padding: 1rem !important;