summaryrefslogtreecommitdiff
path: root/src/core/components/elements/Popup/BottomPopup.jsx
blob: e687cf200a44f29c4732a4d2309368e6eb93e4db (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
import { XMarkIcon } from "@heroicons/react/24/outline"

const BottomPopup = ({ children, active, title, close }) => (
  <>
    <div 
      onClick={close} 
      className={`overlay ${active ? 'block' : 'hidden'}`} 
    />
    <div className={`fixed bottom-0 left-0 w-full border-t border-gray_r-6 rounded-t-xl z-[60] p-4 pt-0 bg-white ${active ? 'block' : 'hidden'}`}>
      <div className="flex justify-between py-4">
        <div className="font-semibold text-h-sm">{ title }</div>
        <button type="button" onClick={close}>
          <XMarkIcon className="w-5 stroke-2" />
        </button>
      </div>
      { children }
    </div>
  </>
)

export default BottomPopup