Drawer

import { Button, Drawer } from '@creation-ui/react'
import { useState } from 'react'
 
export const DrawerCustomizedExample = () => {
  const [open, setOpen] = useState(false)
 
  const handleOpen = () => setOpen(true)
  const handleClose = () => setOpen(false)
 
  const innerClasses = [
    '!w-[calc(100%-30px)]',
    '!h-[calc(100%-30px)]',
    'rounded-xl',
    'm-[15px]',
  ]
 
  return (
    <Container>
      <Button onClick={handleOpen}>Open Drawer</Button>
      <Drawer
        open={open}
        onClose={handleClose}
        cx={{
          width: 'xl:w-1/3 lg:w-1/2 w-full',
          container: {
            inner: clsx(innerClasses),
          },
        }}
      >
        <div className='p-5 flex flex-col'>
          <h1>Title</h1>
          <div className='mt-2 flex-grow'>
            <p className='text-sm text-gray-500'>Content</p>
          </div>
          <div className='mt-4'>
            <Button onClick={handleClose}>Save</Button>
          </div>
        </div>
      </Drawer>
    </Container>
  )
}