() => {
  const [isOpen, open, close] = useToggle(false);

  return (
    <>
      <div className="d-flex">
        <Button variant="outline-primary" onClick={open}>Open modal layer</Button>
      </div>
      <ModalLayer isOpen={isOpen} onClose={close}>
        <div role="dialog" aria-label="My dialog" className="mw-sm p-5 bg-white mx-auto my-5">
          <h1>I'm a dialog box</h1>
          <p>
            <Button variant="primary" className="mie-2">A button</Button>
            <ModalCloseButton variant="outline-primary">Close modal</ModalCloseButton>
          </p>
          <p>
            I'm baby palo santo ugh celiac fashion axe. La croix lo-fi venmo whatever. Beard man braid migas single-origin coffee forage ramps. Tumeric messenger bag bicycle rights wayfarers, try-hard cronut blue bottle health goth. Sriracha tumblr cardigan, cloud bread succulents tumeric copper mug marfa semiotics woke next level organic roof party +1 try-hard.
          </p>
          <p>
            Cold-pressed bushwick kale chips cliche, raclette pour-over brooklyn godard tbh. Bitters distillery neutra leggings jean shorts street art tbh. Lyft pinterest venmo, food truck small batch try-hard banh mi sriracha microdosing taiyaki trust fund literally stumptown prism. Pok pok lo-fi fam you probably haven't heard of them, salvia etsy YOLO 3 wolf moon fixie tousled raw denim retro farm-to-table hashtag. Godard waistcoat typewriter, thundercats cold-pressed pabst taxidermy. Farm-to-table taxidermy artisan everyday carry.
          </p>
          <p>
            Edison bulb kale chips VHS pug pabst vaporware. Hammock ennui vape farm-to-table vegan literally disrupt microdosing ugh helvetica. Bespoke tbh lomo blue bottle. Next level try-hard readymade mixtape. Cliche cornhole microdosing whatever, vegan fingerstache paleo. Before they sold out YOLO enamel pin, celiac retro flexitarian roof party normcore air plant.
          </p>
          <p>
            Drinking vinegar literally four dollar toast asymmetrical. Godard hella seitan, gluten-free selvage readymade viral tumblr quinoa roof party. Neutra flannel pop-up craft beer live-edge pour-over. Humblebrag pinterest kale chips bicycle rights etsy 8-bit. Hammock brunch gentrify, hot chicken actually chillwave cornhole gastropub. Bushwick bicycle rights typewriter man bun coloring book. Plaid bespoke you probably haven't heard of them adaptogen fam copper mug cold-pressed organic cred retro salvia chicharrones direct trade.
          </p>
          <p>
            Fanny pack yuccie lumbersexual raclette biodiesel letterpress plaid hoodie cornhole ugh listicle. Distillery portland put a bird on it tacos whatever crucifix. Polaroid ethical jean shorts swag truffaut, intelligentsia kitsch meggings readymade tattooed chicharrones waistcoat artisan heirloom. Kickstarter post-ironic direct trade, celiac fixie activated charcoal lomo hella quinoa twee cardigan tousled. VHS woke seitan heirloom, prism roof party YOLO pinterest pork belly iPhone dreamcatcher tattooed succulents helvetica man braid. Locavore subway tile shaman ugh pinterest vaporware quinoa wolf crucifix shoreditch green juice pok pok post-ironic. Kinfolk plaid disrupt biodiesel leggings PBR&B glossier sartorial pop-up actually.
          </p>
        </div>
      </ModalLayer>
    </>
  )
}

() => {
  const [isOpen, open, close] = useToggle(false);

  return (
    <>
      <div className="d-flex">
        <Button variant="outline-primary" onClick={open}>Open small modal layer</Button>
      </div>
      <ModalLayer isOpen={isOpen} onClose={close}>
        <div role="dialog" aria-label="My dialog" className="mw-sm p-5 bg-white mx-auto my-5">
          <h1>I'm a dialog box</h1>
          <p>
            <Button variant="primary" className="mie-2">A button</Button>
            <ModalCloseButton variant="outline-primary">Close modal</ModalCloseButton>
          </p>
          <p>
            I'm baby palo santo ugh celiac fashion axe. La croix lo-fi venmo whatever. Beard man braid migas single-origin coffee forage ramps. Tumeric messenger bag bicycle rights wayfarers, try-hard cronut blue bottle health goth. Sriracha tumblr cardigan, cloud bread succulents tumeric copper mug marfa semiotics woke next level organic roof party +1 try-hard.
          </p>
        </div>
      </ModalLayer>
    </>
  )
}