Modal

import { Stack, Button, ButtonLink, Modal, Text, spacing } from 'sxa-ui'

function Demo() {
  return (
    <>
      <Modal
        id='modal-1'
        title='Modal'
        subtitle='Modal 1'
        cancel={<ButtonLink label='Button' />}
        confirm={
          <Button label='Button' variant={Button.variants.primary} />
        }
        isOpen={true}
      >
        <Text>
          Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean
          commodo ligula eget dolor. Aenean massa. Cum sociis natoque
          penatibus et magnis dis parturient montes, nascetur ridiculus mus.
          Donec quam felis, ultricies nec, pellentesque eu, pretium quis,
          sem. Nulla consequat massa quis enim. Donec pede justo, fringilla
          vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut,
          imperdiet a, venenatis vitae, justo.
        </Text>
      </Modal>
    </>
  )
}

export default Demo

import { Stack, Button, ButtonLink, Modal as _Modal, Text, spacing } from 'sxa-ui'
import { makeHydratable } from '#root/src/islands.jsx'
const Modal = makeHydratable(_Modal)

function Demo() {
  return (
    <Stack padding={spacing.l} justifyContent={Stack.justifyContent.center} alignItems={Stack.alignItems.center}>
      <Button
        label='Open modal 1'
        variant={Button.variants.primary}
        x-data='{}'
        x-on:click='$dispatch("modal-open", { id: "modal-1" })'
      />
      <Modal
        id='modal-1'
        title='Modal'
        subtitle='Modal 1'
      >
      </Modal>
    </Stack>
  )
}

export default Demo

import { Stack, Button, ButtonLink, Modal, Text, spacing } from 'sxa-ui'

function Demo() {
  return (
    < >
      <Modal
        id='modal-1'
        title='Modal'
        subtitle='Modal 1'
        cancel={<ButtonLink label='Button' />}
        confirm={
          <Button label='Button' variant={Button.variants.primary} />
        }
        variant={Modal.variants.fullscreen}
        isOpen={true}
      >
        <Text>
          Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean
          commodo ligula eget dolor. Aenean massa. Cum sociis natoque
          penatibus et magnis dis parturient montes, nascetur ridiculus mus.
          Donec quam felis, ultricies nec, pellentesque eu, pretium quis,
          sem. Nulla consequat massa quis enim. Donec pede justo, fringilla
          vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut,
          imperdiet a, venenatis vitae, justo.
        </Text>
      </Modal>
    </>
  )
}

export default Demo