Atoms

An atoms.tsx file in a page folder defines the content for each hotspot on that page.

Structure

atoms.tsx

export function Area1Atom() {
  return <div>Content shown when this hotspot is clicked</div>;
}

export function Area2Atom() {
  return <div>Content for the second hotspot</div>;
}

export default {
  Area1Atom,
  Area2Atom,
};

• Each exported component in the default object is an atom — the content rendered inside a hotspot
• They appear in the digital version in the order listed
• Pass them as props to the generated page component in page.tsx

Usage in page.tsx

import { PageMyImage } from "@/@generated/PageMyImage";
import { Area1Atom, Area2Atom } from "./atoms";

export default function Page030() {
  return (
    <PageMyImage
      area1={<Area1Atom />}
      area2={<Area2Atom />}
    />
  );
}

The prop names (area1, area2) must match the hotspot names defined in the Hotspot Editor.

What to put in atoms

Atoms can contain text, images, exercises, or any React content. Use them for:

• Explanations that appear when the user clicks a region
• Interactive exercises overlaid on the page
• Definitions, hints, or additional context