Slide.tsx 758 B

123456789101112131415161718192021222324252627282930313233343536
  1. import React, { ReactNode } from 'react';
  2. import { Marp } from '@marp-team/marp-core';
  3. import Head from 'next/head';
  4. type SlidesProps = {
  5. children?: ReactNode,
  6. }
  7. export const Slides = (props: SlidesProps): JSX.Element => {
  8. const marp = new Marp();
  9. const { css } = marp.render('', { htmlAsArray: true });
  10. return (
  11. <>
  12. <Head>
  13. <style>{css}</style>
  14. </Head>
  15. <div className="marpit">{props.children}</div>
  16. </>
  17. );
  18. };
  19. type SlideProps = {
  20. children?: ReactNode,
  21. }
  22. export const Slide = (props: SlideProps): JSX.Element => {
  23. return (
  24. <svg data-marpit-svg viewBox="0 0 1280 960">
  25. <foreignObject width="1280" height="960">
  26. <section>{props.children}</section>
  27. </foreignObject>
  28. </svg>
  29. );
  30. };