Comic page builder

import { Button } from "@maxgrits/overprint-react/button";
import { Balloon, Caption, ImpactStar, KeyPop, Panel, PanelGrid, SFX, SpeedLines } from "@maxgrits/overprint-react/comic";

export function ComicPage() {
  return (
    <PanelGrid columns={3}>
      <Panel label="Panel 1">
        <Caption kind="place">Fernlight Bakery, 5:40 in the morning.</Caption>
        <Balloon kind="speech" tail="bottom-left">The ovens are hot. Where are the orders?</Balloon>
      </Panel>
      <Panel label="Panel 2" layout="art" art={<><SpeedLines direction="right" /></>}>
        <Balloon kind="thought" tail="bottom-left" place="br">If only the site took them overnight.</Balloon>
      </Panel>
      <Panel label="Panel 3" layout="split" art={<><ImpactStar variant="flash" size={140} /><SFX word="DING!" size="m" cause="arrive" /></>}>
        <Caption kind="transition">Six weeks later.</Caption>
        <Button variant="action">See the orders<KeyPop /></Button>
      </Panel>
    </PanelGrid>
  );
}