leetcode/islands/StudyDeck.tsx

// reveal.js touches window/document at init — render on the client only.
export const client = "only";

import { Deck, Markdown } from "@revealjs/react";
import RevealHighlight from "reveal.js/plugin/highlight";
import "reveal.js/reveal.css";
import "reveal.js/theme/black.css";
import "reveal.js/plugin/highlight/monokai.css";

import { decks, type DeckName } from "./decks";

/**
 * An embedded reveal.js slide deck for drilling a DS/algorithms topic.
 * Usage in any MDX page: `<StudyDeck deck="two-pointers" />`.
 */
export default function StudyDeck({ deck }: { deck: DeckName }) {
  const markdown = decks[deck];
  if (!markdown) {
    return (
      <p>
        Unknown study deck "{deck}". Available: {Object.keys(decks).join(", ")}.
      </p>
    );
  }
  return (
    <div style={{ aspectRatio: "16 / 9", width: "100%", margin: "1.5rem 0" }}>
      <Deck
        style={{ width: "100%", height: "100%", borderRadius: "0.5rem", overflow: "hidden" }}
        config={{
          embedded: true,
          hash: false,
          // Only capture arrow keys while the deck has focus, so it
          // doesn't hijack page scrolling.
          keyboardCondition: "focused",
          slideNumber: "c/t",
          controlsTutorial: false,
          width: 1280,
          height: 720,
        }}
        plugins={[RevealHighlight]}
      >
        <Markdown options={{ animateLists: true }}>{markdown}</Markdown>
      </Deck>
    </div>
  );
}