Componente de Popup

O Popup exibe uma janela modal flutuante que pode conter qualquer tipo de conteúdo, como mensagens de alerta ou formulários, e pode ser controlado por estado.

Como importar

import { Popup} from '@/app/shared/@JustLaunch/components';

Exemplo de uso

Default

import { AlertCircle } from 'lucide-react';
import { useState } from 'react';
import { Button } from '@/app/shared/@JustLaunch/components'

<Popup.Root
  trigger={
    <Button loading={false} variant="primary">
      Open Popup
    </Button>
  }
>
  <Popup.Content
    icon={AlertCircle}
    onClose={() => console.log('Popup closed')}
    className='fixed left-1/2 top-1/2 z-50 h-auto w-4/5 -translate-x-1/2 -translate-y-1/2 overflow-y-scroll rounded-md bg-white p-8 text-gray-900 shadow lg:w-3/5 lg:max-w-full'
  >
    <p>This is the popup content. It can have any custom content inside it.</p>
  </Popup.Content>
</Popup.Root>

Controle por Estado

import { AlertCircle } from 'lucide-react';
import { useState } from 'react';
import { Button } from '@/app/shared/@JustLaunch/components'

 const [isOpen, setIsOpen] = useState(false);

    <Popup.Root
      trigger={
      <Button loading={false} className="rounded-md bg-green-600 px-4 py-2 text-white hover:bg-green-700">
        Open Popup
      </Button>
      }
      open={isOpen}
      onOpenChange={setIsOpen}
    >
      <Popup.Content
        icon={AlertCircle}
        onClose={() => setIsOpen(false)}
        className='fixed left-1/2 top-1/2 z-50 h-auto w-4/5 -translate-x-1/2 -translate-y-1/2 overflow-y-scroll rounded-md bg-white p-8 text-gray-900 shadow lg:w-3/5 lg:max-w-full'
      >
        <p>This popup is controlled by state.</p>
      </Popup.Content>
    </Popup.Root>