Modal

import { Modal, Button } from '@creo-team/buzz-ui'
import { useState } from 'react'

export default function BasicExample() {
  const [open, setOpen] = useState(false)
  
  return (
    <>
      <Button onClick={() => setOpen(true)}>Open Modal</Button>
      
      <Modal 
        isOpen={open} 
        onClose={() => setOpen(false)} 
        header="Basic Modal"
      >
        <p>This is a basic modal with header and close functionality.</p>
      </Modal>
    </>
  )
}

import { Modal, Button } from '@creo-team/buzz-ui'
import { useSearchParams, useRouter } from 'next/navigation'

export default function QueryParamModal() {
  const searchParams = useSearchParams()
  const router = useRouter()
  const [isClient, setIsClient] = useState(false)
  
  // Prevent SSR issues
  useEffect(() => {
    setIsClient(true)
  }, [])
  
  const isOpen = isClient && searchParams.get('modal') === 'settings'
  
  const openModal = () => {
    if (!isClient) return
    const params = new URLSearchParams(searchParams.toString())
    params.set('modal', 'settings')
    router.push(`?${params.toString()}`)
  }
  
  const closeModal = () => {
    if (!isClient) return
    const params = new URLSearchParams(searchParams.toString())
    params.delete('modal')
    router.push(`?${params.toString()}`)
  }
  
  return (
    <>
      <Button onClick={openModal}>Open Settings</Button>
      
      <Modal 
        isOpen={isOpen} 
        onClose={closeModal} 
        header="Settings"
      >
        <div className="space-y-4">
          <p>Settings content here...</p>
          <p className="text-sm text-[var(--c-text-secondary)]">
            💡 Notice the URL changes and browser back button works!
          </p>
        </div>
      </Modal>
    </>
  )
}

import { Modal, Button } from '@creo-team/buzz-ui'
import { useState } from 'react'

export default function FormModal() {
  const [open, setOpen] = useState(false)
  const [formData, setFormData] = useState({ name: '', email: '' })
  
  const handleSubmit = (e) => {
    e.preventDefault()
    console.log('Form submitted:', formData)
    setOpen(false)
  }
  
  return (
    <>
      <Button onClick={() => setOpen(true)}>Create User</Button>
      
      <Modal 
        isOpen={open} 
        onClose={() => setOpen(false)} 
        header="Create New User"
      >
        <form onSubmit={handleSubmit} className="space-y-4">
          <div>
            <label className="block text-sm font-medium mb-2">Name</label>
            <input
              type="text"
              value={formData.name}
              onChange={(e) => setFormData(prev => ({ ...prev, name: e.target.value }))}
              className="w-full p-2 border rounded"
              required
            />
          </div>
          
          <div>
            <label className="block text-sm font-medium mb-2">Email</label>
            <input
              type="email"
              value={formData.email}
              onChange={(e) => setFormData(prev => ({ ...prev, email: e.target.value }))}
              className="w-full p-2 border rounded"
              required
            />
          </div>
          
          <div className="flex gap-2 pt-4">
            <Button type="submit" variant="bold">Create</Button>
            <Button type="button" onClick={() => setOpen(false)}>Cancel</Button>
          </div>
        </form>
      </Modal>
    </>
  )
}

import { Modal, Button } from '@creo-team/buzz-ui'
import { useState } from 'react'

export default function ConfirmationModal() {
  const [open, setOpen] = useState(false)
  
  const handleDelete = () => {
    // Perform delete action
    console.log('Item deleted')
    setOpen(false)
  }
  
  return (
    <>
      <Button onClick={() => setOpen(true)} variant="danger">
        Delete Item
      </Button>
      
      <Modal 
        isOpen={open} 
        onClose={() => setOpen(false)} 
        header="Confirm Deletion"
      >
        <div className="space-y-4">
          <p>Are you sure you want to delete this item? This action cannot be undone.</p>
          
          <div className="flex gap-2 pt-4">
            <Button onClick={handleDelete} variant="danger">
              Delete
            </Button>
            <Button onClick={() => setOpen(false)}>
              Cancel
            </Button>
          </div>
        </div>
      </Modal>
    </>
  )
}