Slideover

'use client'

import { useState } from 'react'
import { Button } from '@/components/button'
import {
  Slideover,
  SlideoverActions,
  SlideoverBody,
  SlideoverDescription,
  SlideoverTitle,
} from '@/components/slideover'

export default function Example() {
  let [isOpen, setIsOpen] = useState(false)

  return (
    <>
      <Button type="button" onClick={() => setIsOpen(true)}>
        View order
      </Button>
      <Slideover open={isOpen} onClose={setIsOpen}>
        <SlideoverTitle>Order #1011</SlideoverTitle>
        <SlideoverDescription>
          Placed on May 9, 2026 and paid with Mobile Money.
        </SlideoverDescription>
        <SlideoverBody>{/* ... */}</SlideoverBody>
        <SlideoverActions>
          <Button plain onClick={() => setIsOpen(false)}>
            Close
          </Button>
          <Button onClick={() => setIsOpen(false)}>Refund order</Button>
        </SlideoverActions>
      </Slideover>
    </>
  )
}

<script setup lang="ts">
import { ref } from 'vue'
import Button from '@/components/button.vue'
import Slideover from '@/components/slideover.vue'
import SlideoverActions from '@/components/slideover-actions.vue'
import SlideoverBody from '@/components/slideover-body.vue'
import SlideoverDescription from '@/components/slideover-description.vue'
import SlideoverTitle from '@/components/slideover-title.vue'

const isOpen = ref(false)
</script>

<template>
  <Button type="button" @click="isOpen = true">View order</Button>
  <Slideover :open="isOpen" @close="isOpen = false">
    <SlideoverTitle>Order #1011</SlideoverTitle>
    <SlideoverDescription>
      Placed on May 9, 2026 and paid with Mobile Money.
    </SlideoverDescription>
    <SlideoverBody><!-- ... --></SlideoverBody>
    <SlideoverActions>
      <Button plain @click="isOpen = false">Close</Button>
      <Button @click="isOpen = false">Refund order</Button>
    </SlideoverActions>
  </Slideover>
</template>

<Slideover size="md" open={isOpen} onClose={setIsOpen}>
  <SlideoverTitle>Order #1011</SlideoverTitle>
  <SlideoverDescription>
    Placed on May 9, 2026 and paid with Mobile Money.
  </SlideoverDescription>
  <SlideoverBody>{/* ... */}</SlideoverBody>
</Slideover>

<Slideover size="md" :open="isOpen" @close="isOpen = false">
  <SlideoverTitle>Order #1011</SlideoverTitle>
  <SlideoverDescription>
    Placed on May 9, 2026 and paid with Mobile Money.
  </SlideoverDescription>
  <SlideoverBody><!-- ... --></SlideoverBody>
</Slideover>

<Slideover open={isOpen} onClose={setIsOpen}>
  <div className="flex items-start justify-between gap-4">
    <SlideoverTitle>pay.arthurmonney.me</SlideoverTitle>
    <button
      type="button"
      className="-m-1 rounded-lg p-1 text-zinc-500 hover:text-zinc-950 dark:text-zinc-400 dark:hover:text-white"
      onClick={() => setIsOpen(false)}
    >
      <XMarkIcon className="size-4 shrink-0" />
      <span className="sr-only">Close</span>
    </button>
  </div>
  <SlideoverDescription>
    DNS configuration can vary across providers. Refer to the{' '}
    <TextLink href="#">provider documentation</TextLink> for more information.
  </SlideoverDescription>
  <SlideoverBody>{/* ... */}</SlideoverBody>
</Slideover>

<Slideover :open="isOpen" @close="isOpen = false">
  <div class="flex items-start justify-between gap-4">
    <SlideoverTitle>pay.arthurmonney.me</SlideoverTitle>
    <button
      type="button"
      class="-m-1 rounded-lg p-1 text-zinc-500 hover:text-zinc-950 dark:text-zinc-400 dark:hover:text-white"
      @click="isOpen = false"
    >
      <XMarkIcon class="size-4 shrink-0" />
      <span class="sr-only">Close</span>
    </button>
  </div>
  <SlideoverDescription>
    DNS configuration can vary across providers. Refer to the
    <TextLink href="#">provider documentation</TextLink> for more information.
  </SlideoverDescription>
  <SlideoverBody><!-- ... --></SlideoverBody>
</Slideover>

'use client'

import { useState } from 'react'
import { Button } from '@/components/button'
import {
  Slideover,
  SlideoverActions,
  SlideoverBody,
  SlideoverDescription,
  SlideoverTitle,
} from '@/components/slideover'

export default function Example() {
  let [isOpen, setIsOpen] = useState(false)

  return (
    <>
      <Button type="button" onClick={() => setIsOpen(true)}>
        View order
      </Button>
      <Slideover open={isOpen} onClose={setIsOpen}>
        <SlideoverTitle>Order #1011</SlideoverTitle>
        <SlideoverDescription>
          Placed on May 9, 2026 and paid with Mobile Money.
        </SlideoverDescription>
        <SlideoverBody>{/* ... */}</SlideoverBody>
        <SlideoverActions>
          <Button plain onClick={() => setIsOpen(false)}>
            Close
          </Button>
          <Button onClick={() => setIsOpen(false)}>Refund order</Button>
        </SlideoverActions>
      </Slideover>
    </>
  )
}

<script setup lang="ts">
import { ref } from 'vue'
import Button from '@/components/button.vue'
import Slideover from '@/components/slideover.vue'
import SlideoverActions from '@/components/slideover-actions.vue'
import SlideoverBody from '@/components/slideover-body.vue'
import SlideoverDescription from '@/components/slideover-description.vue'
import SlideoverTitle from '@/components/slideover-title.vue'

const isOpen = ref(false)
</script>

<template>
  <Button type="button" @click="isOpen = true">View order</Button>
  <Slideover :open="isOpen" @close="isOpen = false">
    <SlideoverTitle>Order #1011</SlideoverTitle>
    <SlideoverDescription>
      Placed on May 9, 2026 and paid with Mobile Money.
    </SlideoverDescription>
    <SlideoverBody><!-- ... --></SlideoverBody>
    <SlideoverActions>
      <Button plain @click="isOpen = false">Close</Button>
      <Button @click="isOpen = false">Refund order</Button>
    </SlideoverActions>
  </Slideover>
</template>

'use client'

import { useState } from 'react'
import { Button } from '@/components/button'
import { useModalStack, type ModalRenderProps } from '@/components/modal-stack'
import { Slideover, SlideoverActions, SlideoverBody, SlideoverTitle } from '@/components/slideover'

function AddressSlideover({ isOpen, close }: ModalRenderProps<Address>) {
  return (
    <Slideover size="md" open={isOpen} onClose={() => close()}>
      <SlideoverTitle>Shipping address</SlideoverTitle>
      <SlideoverBody>
        {addresses.map((address) => (
          <button key={address.id} type="button" onClick={() => close(address)}>
            {address.label}
          </button>
        ))}
      </SlideoverBody>
      <SlideoverActions>
        <Button plain onClick={() => close()}>
          Cancel
        </Button>
      </SlideoverActions>
    </Slideover>
  )
}

function CustomerSlideover({ isOpen, close }: ModalRenderProps<Address>) {
  let { open } = useModalStack()
  let [address, setAddress] = useState(addresses[0])

  async function changeAddress() {
    let selected = await open<Address>((modal) => <AddressSlideover {...modal} />)

    if (selected) setAddress(selected)
  }

  return (
    <Slideover size="md" open={isOpen} onClose={() => close()}>
      <SlideoverTitle>Amara Okonkwo</SlideoverTitle>
      <SlideoverBody>
        <Button outline onClick={changeAddress}>
          Change address
        </Button>
      </SlideoverBody>
      <SlideoverActions>
        <Button plain onClick={() => close()}>
          Cancel
        </Button>
        <Button onClick={() => close(address)}>Ship here</Button>
      </SlideoverActions>
    </Slideover>
  )
}

export default function Example() {
  let { open } = useModalStack()

  return (
    <Button type="button" onClick={() => open((modal) => <OrderSlideover {...modal} />)}>
      View order
    </Button>
  )
}

<script setup lang="ts">
import { ref } from 'vue'
import Button from '@/components/button.vue'
import { useModalStack } from '@/components/modal-stack'
import Slideover from '@/components/slideover.vue'
import SlideoverActions from '@/components/slideover-actions.vue'
import SlideoverBody from '@/components/slideover-body.vue'
import SlideoverTitle from '@/components/slideover-title.vue'
import AddressSlideover from './AddressSlideover.vue'

defineProps<{ isOpen: boolean }>()

const emit = defineEmits<{ close: [value?: Address] }>()

const { open } = useModalStack()
const address = ref<Address>(addresses[0])

async function changeAddress() {
  const selected = await open<Address>(AddressSlideover)

  if (selected) address.value = selected
}
</script>

<template>
  <Slideover size="md" :open="isOpen" @close="emit('close')">
    <SlideoverTitle>Amara Okonkwo</SlideoverTitle>
    <SlideoverBody>
      <Button outline @click="changeAddress">Change address</Button>
    </SlideoverBody>
    <SlideoverActions>
      <Button plain @click="emit('close')">Cancel</Button>
      <Button @click="emit('close', address)">Ship here</Button>
    </SlideoverActions>
  </Slideover>
</template>