Popover

import {Popover, PopoverTrigger, PopoverContent, Button} from '@openlite/ui'
 
function App() {
  return(
    <Popover>
      <PopoverTrigger>
        <Button>Popover</Button>
      </PopoverTrigger>
      <PopoverContent>
        <h2 className='font-semibold text-xl mb-2'>Start Publishing</h2>
        <p className="mb-2">you can start publishing your posts by clicking the button below</p>
        <Button>Got it!</Button>
      </PopoverContent>
    </Popover>
  )
}

import {Popover, PopoverTrigger, PopoverContent, Button} from '@openlite/ui'
 
export default function App() {
  return (
    <Popover>
      <PopoverTrigger>
        <Button size="icon">
          <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M11.996 12h.009M18 12h.009M6 12h.009" color="currentColor"/></svg>
        </Button>
      </PopoverTrigger>
      <PopoverContent className="w-56" align="start">
        <div className='flex gap-2 items-center hover:bg-default-50 p-2 rounded-md'>
          <svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" color="currentColor"><path d="M2.256 15.632c.034-.323.268-.583.736-1.104l1.031-1.153c.252-.32.431-.875.431-1.375s-.179-1.056-.43-1.375L2.991 9.472c-.468-.52-.702-.781-.736-1.104s.14-.627.49-1.234l.494-.857c.373-.648.56-.972.878-1.1c.317-.13.676-.028 1.395.176l1.22.343c.459.106.94.046 1.358-.169l.337-.194a2 2 0 0 0 .788-.968l.334-.997c.22-.66.33-.99.591-1.18C10.403 2 10.75 2 11.444 2h1.115c.694 0 1.042 0 1.303.189s.371.519.59 1.179l.335.997a2 2 0 0 0 .788.968l.337.194c.418.215.9.275 1.358.17l1.22-.344c.719-.204 1.078-.306 1.395-.177c.318.13.505.453.878 1.101l.493.857c.35.607.525.91.491 1.234s-.268.583-.736 1.104l-1.031 1.153c-.252.319-.431.875-.431 1.375s.179 1.056.43 1.375l1.032 1.153c.468.52.702.781.736 1.104s-.14.627-.49 1.234l-.494.857c-.373.648-.56.972-.878 1.1c-.317.13-.676.028-1.395-.176l-1.22-.343a2 2 0 0 0-1.359.169l-.336.194c-.36.23-.636.57-.788.968l-.334.997c-.22.66-.33.99-.591 1.18c-.261.188-.609.188-1.303.188h-1.115c-.694 0-1.041 0-1.303-.189c-.261-.189-.371-.518-.59-1.178"/><path d="M2.737 18.78c1.08-1.08 4.752-4.716 5.112-5.136c.381-.444.072-1.044.256-2.904c.089-.9.282-1.574.836-2.076c.66-.624 1.2-.624 3.06-.666c1.62.042 1.812-.138 1.98.282c.12.3-.24.48-.672.96c-.96.96-1.524 1.44-1.578 1.74c-.39 1.32 1.146 2.1 1.986 1.26c.318-.318 1.788-1.8 1.932-1.92c.108-.096.367-.092.492.06c.108.106.12.12.108.6c-.01.444-.006 1.082-.004 1.74c.001.852-.044 1.8-.404 2.28c-.72 1.08-1.92 1.14-3 1.188c-1.02.06-1.86-.048-2.124.144c-.216.108-1.356 1.308-2.736 2.688l-2.46 2.46c-2.04 1.62-4.284-.9-2.784-2.7"/></g></svg>
          <h4 className='cursor-pointer'>Configure</h4>
        </div>
        <div className='flex gap-2 items-center hover:bg-default-50 p-2 rounded-md'>
         <svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M16.946 3.173c.587-.587.88-.88 1.206-1.021c.469-.203 1-.203 1.469 0c.325.14.619.434 1.206 1.021s.88.881 1.021 1.206c.203.469.203 1 0 1.469c-.14.325-.434.619-1.021 1.206l-5.022 5.022c-1.237 1.237-1.855 1.855-2.63 2.222s-1.646.452-3.387.624L9 15l.078-.788c.172-1.741.257-2.612.624-3.387s.985-1.393 2.222-2.63zM6 15H3.75a1.75 1.75 0 1 0 0 3.5h9.5a1.75 1.75 0 1 1 0 3.5H11" color="currentColor"/></svg>
          <h4 className='cursor-pointer'>Bookmark</h4>
        </div>
        <div className='flex gap-2 items-center hover:bg-default-50 p-2 rounded-md'>
          <svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M6 20h12m-6-4V4m4 8s-2.946 4-4 4s-4-4-4-4" color="currentColor"/></svg>
          <h4 className='cursor-pointer'>Download</h4>
        </div>
      </PopoverContent>
    </Popover>
  )
}

import {Popover, PopoverTrigger, PopoverContent, Button, Avatar, AvatarImage, AvatarFallback, Separator} from '@openlite/ui'
 
export default function App() {
  return(
    <Popover>
      <PopoverTrigger>
        <Button>
          <svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M6.578 15.482c-1.415.842-5.125 2.562-2.865 4.715C4.816 21.248 6.045 22 7.59 22h8.818c1.546 0 2.775-.752 3.878-1.803c2.26-2.153-1.45-3.873-2.865-4.715a10.66 10.66 0 0 0-10.844 0M16.5 6.5a4.5 4.5 0 1 1-9 0a4.5 4.5 0 0 1 9 0" color="currentColor"/></svg>
          Profile
        </Button>
      </PopoverTrigger>
      <PopoverContent>
        <div className='flex items-center gap-3 pb-2'>
          <Avatar size="lg">
            <AvatarImage src="/example-gerzon.jpeg" alt="Avatar" className="w-full h-full rounded-md object-cover" />
            <AvatarFallback>GE</AvatarFallback>
          </Avatar>
          <article>
            <h2 className='font-semibold text-xl'>Gerzon</h2>
            <p>Admin</p>
          </article>
        </div>
        <Separator />
          <div className='flex gap-2 items-center hover:bg-default-50 p-2 rounded-md mt-2'>
            <svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" color="currentColor"><path d="M2 22h20M18 9h-4c-2.482 0-3 .518-3 3v10h10V12c0-2.482-.518-3-3-3"/><path d="M15 22H3V5c0-2.482.518-3 3-3h6c2.482 0 3 .518 3 3v4M3 6h3m-3 4h3m-3 4h3m9-1h2m-2 3h2m-1 6v-3"/></g></svg>
            <h4 className='cursor-pointer'>ZXL Construction</h4>
          </div>
          <div className='flex gap-2 items-center hover:bg-default-50 p-2 rounded-md'>
            <svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" color="currentColor"><path d="M20.25 6.75L18 9h-2m3.5-2.25a.75.75 0 1 0 1.5 0a.75.75 0 0 0-1.5 0m.75 10.5L18 15h-2m3.5 2.25a.75.75 0 1 1 1.5 0a.75.75 0 0 1-1.5 0m.75-5.25H12m7.5 0a.75.75 0 1 0 1.5 0a.75.75 0 0 0-1.5 0m-10 7h.009"/><path d="M16 6c-.08-1.42-.302-2.323-.909-2.975C14.136 2 12.598 2 9.523 2S4.911 2 3.955 3.025S3 5.7 3 9v6c0 3.3 0 4.95.955 5.975C4.911 22 6.448 22 9.523 22s4.613 0 5.568-1.025c.607-.652.828-1.556.909-2.975"/></g></svg>
            <h4 className='cursor-pointer'>(929)392-4431</h4>
          </div>
          <div className='flex gap-2 items-center hover:bg-default-50 p-2 rounded-md'>
            <svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" color="currentColor"><path d="m2 6l6.913 3.917c2.549 1.444 3.625 1.444 6.174 0L22 6"/><path d="M2.016 13.476c.065 3.065.098 4.598 1.229 5.733c1.131 1.136 2.705 1.175 5.854 1.254c1.94.05 3.862.05 5.802 0c3.149-.079 4.723-.118 5.854-1.254c1.131-1.135 1.164-2.668 1.23-5.733c.02-.986.02-1.966 0-2.952c-.066-3.065-.099-4.598-1.23-5.733c-1.131-1.136-2.705-1.175-5.854-1.254a115 115 0 0 0-5.802 0c-3.149.079-4.723.118-5.854 1.254c-1.131 1.135-1.164 2.668-1.23 5.733a69 69 0 0 0 0 2.952"/></g></svg>
            <h4 className='cursor-pointer'>Joelf@zxlconstruction</h4>
          </div>
      </PopoverContent>
    </Popover>
  )
}