export default function BasicModal () {   
const [show1, setShow1] = useState(false)

const handleClose1 = () => setShow1(false)
const handleShow1 = () => setShow1(true)
return(
    <Button variant='primary' type="button" className="btn btn-primary" onClick={handleShow2}>
    Scrolling long content
    </Button>
    <Modal show={show2} onHide={handleClose2} backdrop="static" keyboard={false}>
        <Modal.Header closeButton>
        <Modal.Title as="h6">Modal title</Modal.Title>
        </Modal.Header>
        <Modal.Body>
        <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit.
                        Libero
                        ipsum quasi, error quibusdam debitis maiores hic eum? Vitae
                        nisi
                        ipsa maiores fugiat deleniti quis reiciendis veritatis.</p>
                    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ea
                        voluptatibus, ipsam quo est rerum modi quos expedita facere,
                        ex
                        tempore fuga similique ipsa blanditiis et accusamus
                        temporibus
                        commodi voluptas! Nobis veniam illo architecto expedita quam
                        ratione quaerat omnis. In, recusandae eos! Pariatur,
                        deleniti
                        quis ad nemo ipsam officia temporibus, doloribus fuga
                        asperiores
                        ratione distinctio velit alias hic modi praesentium aperiam
                        officiis eaque, accusamus aut. Accusantium assumenda,
                        commodi
                        nulla provident asperiores fugit inventore iste amet aut
                        placeat
                        consequatur reprehenderit. Ratione tenetur eligendi, quis
                        aperiam dolores magni iusto distinctio voluptatibus minus a
                        unde
                        at! Consequatur voluptatum in eaque obcaecati, impedit
                        accusantium ea soluta, excepturi, quasi quia commodi
                        blanditiis?
                        Qui blanditiis iusto corrupti necessitatibus dolorem fugiat
                        consequuntur quod quo veniam? Labore dignissimos reiciendis
                        accusamus recusandae est consequuntur iure.</p>
                    <br/>
                    <br/>
                    <br/>
                    <br/>
                    <br/>
                    <br/>
                    <br/>
                    <br/>
                    <br/>
                    <br/>
                    <br/>
                    <br/>
                    <br/>
                    <br/>
                    <br/>
                    <br/>
                    <br/>
                    <br/>
                    <br/>
                    <br/>
                    <br/>
                    <br/>
                    <br/>
                    <br/>
                    <br/>
                    <br/>
                    <p>Lorem ipsum dolor sit amet.</p>
        </Modal.Body>
        <Modal.Footer>
        <Button variant="secondary" onClick={handleClose2}>
            Close
        </Button>
        <Button variant="primary">Understood</Button>
        </Modal.Footer>
    </Modal>
)}

export default function BasicModal () {   
const [modalShow, setModalShow] = useState(false);
return(
<Button type="button" className="btn btn-primary" 
onClick={() => setModalShow(true)}">
    Vertically centered modal
</Button>
<Modal centered show={modalShow} onHide={() => setModalShow(false)} 
keyboard={false} className="modal fade">
<Modal.Header closeButton>
<Modal.Title as="h6">Modal title</Modal.Title>
</Modal.Header>
<Modal.Body>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit.
 Libero ipsum quasi, error quibusdam debitis maiores hic eum? Vitae
 nisi ipsa maiores fugiat deleniti quis reiciendis veritatis.</p>
</Modal.Body>
<Modal.Footer>
<Button variant="secondary" onClick={() => setModalShow(false)}>
    Close
</Button>
<Button variant="primary">Understood</Button>
</Modal.Footer>
</Modal>
)}

export default function BasicModal () {   
const [modalShow, setModalShow] = useState(false);
return(
<Button type="button" className="btn btn-primary" 
onClick={() => setModalShow(true)}">
    Vertically centered modal
</Button>
<Modal centered show={modalShow} onHide={() => setModalShow(false)} 
keyboard={false} className="modal fade">
<Modal.Header closeButton>
<Modal.Title as="h6">Modal title</Modal.Title>
</Modal.Header>
<Modal.Body>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit.
 Libero ipsum quasi, error quibusdam debitis maiores hic eum? Vitae
 nisi ipsa maiores fugiat deleniti quis reiciendis veritatis.</p>
</Modal.Body>
<Modal.Footer>
<Button variant="secondary" onClick={() => setModalShow(false)}>
    Close
</Button>
<Button variant="primary">Understood</Button>
</Modal.Footer>
</Modal>
)}

export default function BasicModal () {   
const [show3, setShow3] = useState(false);
const handleClose3 = () => setShow3(false);
const handleShow3 = () => setShow3(true);
return(
<Button variant='primary' type="button" className="" onClick={handleShow3}>
Launch demo modal</Button>
<Modal show={show3} onHide={handleClose3} centered className='popover-modal'>
<Modal.Header closeButton>
<Modal.Title as="h6"> Modal title</Modal.Title>
</Modal.Header>
<Modal.Body> <h5>Popover in a modal</h5>
<p> This
    <OverlayTrigger trigger="click"
    placement='right'
    // autoclose='true'
    overlay={
        <Popover placement='bottom'>
        <Popover.Header> Popover bottom</Popover.Header>
        <Popover.Body>
            Vivamus sagittis lacus vel augue laoreet rutrum faucibus.
        </Popover.Body>
        </Popover>
    }>
    <Button variant="secondary" className="me-2 ms-2">button</Button>
    </OverlayTrigger>
    triggers a popover on click.
</p>
</Modal.Body>
<Modal.Footer>
<Button variant="secondary" onClick={handleClose3}>
    Close
</Button>
<Button variant="primary">
    Save Changes
</Button>
</Modal.Footer>
</Modal>
)}

export default function BasicModal () {   
const [modalShow2, setModalShow2] = useState(false)
return(
<Button variant='primary' type="button" className="" onClick={handleShow3}>
Launch demo modal</Button>
<Modal show={modalShow2} onHide={() => setModalShow2(false)} centered>
 <Modal.Header closeButton>
 <Modal.Title as="h6"> Modal title</Modal.Title>
 </Modal.Header>
 <Modal.Body> 
     <Container fluid>
<Row>
    <Col md={4} className=" bg-light border">.col-md-4</Col>
    <Col md={4} className=" ms-auto bg-light border">.col-md-4
        .ms-auto</Col>
</Row>
<Row className="row mt-3">
    <Col md={3} className=" ms-auto bg-light border">.col-md-3
        .ms-auto</Col>
    <Col md={2} className=" ms-auto bg-light border">.col-md-2
        .ms-auto</Col>
</Row>
<Row className="row mt-3">
    <Col md={6} className=" ms-auto bg-light border">.col-md-6
        .ms-auto</Col>
</Row>
<Row className="row mt-3">
    <Col sm={9} className=" bg-light border">
        Level 1: .col-sm-9
        <Row>
<Col sm={6} className="col-8 bg-light border">
        Level 2: .col-8 .col-sm-6
</Col>
<Col sm={6} className="col-4 bg-light border">
     Level 2: .col-4 .col-sm-6
                         </Col>
                     </Row>
                 </Col>
             </Row>
         </Container>
 </Modal.Body>
 <Modal.Footer>
 <Button variant="secondary" onClick={() => setModalShow2(false)}>
     Close
 </Button>
 <Button variant="primary">
     Save Changes
 </Button>
 </Modal.Footer>
</Modal>
)}

export default function BasicModal () {   
const [show3, setShow3] = useState(false);
const handleClose3 = () => setShow3(false);
const handleShow3 = () => setShow3(true);  //  Twomodals
const [showt1, setShowt1] = useState(false)
const [showt2, setShowt2] = useState(false)
const handleCloset1 = () => setShowt1(false)
const handleShowt1 = () => setShowt1(true)
const handleCloset2 = () => setShowt2(false)
const handleShowt2 = () => setShowt2(true)

const Handleclose1 = () => {
  setShowt1(false)
  setShowt2(true)
}
const Handleclose2 = () => {
  setShowt2(false)
  setShowt1(true)
}
return(
    <Button variant='primary' className="btn" onClick={handleShowt1}>Open first modal
    </Button>
    <Modal id="m1" className="fade" aria-hidden="true"
    aria-labelledby="contained-modal-title-vcenter" centered show={showt1} onHide={handleCloset1} >
    <Modal.Header closeButton>
        <Modal.Title id="exampleModalToggleLabel">Modal 1</Modal.Title>

    </Modal.Header>
    <Modal.Body>
        Show a second modal and hide this one with the button below. </Modal.Body>
    <Modal.Footer>
        <Button className="btn btn-primary" id="btn1" onClick={Handleclose1}>Open second modal</Button>
    </Modal.Footer>

    </Modal>

    <Modal id="m2" className='fade' aria-labelledby="contained-modal-title-vcenter"
    centered show={showt2} onHide={handleCloset2}>
    <Modal.Header closeButton>
        <Modal.Title>Modal 2</Modal.Title>
    </Modal.Header>
    <Modal.Body>
        Hide this modal and show the first with the button below.</Modal.Body>
    <Modal.Footer>
        <Button className="btn btn-primary"
        onClick={Handleclose2}>Back to first</Button>
    </Modal.Footer>

    </Modal>
)}

export default function BasicModal () {   
// small modal
const [smShow, setSmShow] = useState(false);

//large modal
const [lgShow, setLgShow] = useState(false);

//large modal
const [xlShow, setXlShow] = useState(false);
return(
    <Modal size="xl" show={xlShow} onHide={() => setXlShow(false)}
    aria-labelledby="example-modal-sizes-title-sm">
    <Modal.Header closeButton>
    <Modal.Title as="h6" id="example-modal-sizes-title-sm">
        Extra large Modal
    </Modal.Title>
    </Modal.Header>
    <Modal.Body>...</Modal.Body>
</Modal>
<Modal size="lg" show={lgShow} onHide={() => 
setLgShow(false)}aria-labelledby="example-modal-sizes-title-lg">
    <Modal.Header closeButton>
    <Modal.Title as="h6" id="example-modal-sizes-title-lg">
        Large Modal
    </Modal.Title>
    </Modal.Header>
    <Modal.Body>...</Modal.Body>
</Modal>
<Modal size="sm" show={smShow} onHide={() => setSmShow(false)}
    aria-labelledby="example-modal-sizes-title-sm">
    <Modal.Header closeButton>
    <Modal.Title as="h6" id="example-modal-sizes-title-sm">
        Small Modal
    </Modal.Title>
    </Modal.Header>
    <Modal.Body>...</Modal.Body>
</Modal>
)}

export default function BasicModal () {   
  //fullscreen modals
  const values =  [true, 'sm-down', 'md-down', 'lg-down', 'xl-down', 'xxl-down',];
  const colors = ['primary', 'secondary', 'warning', 'info', 'success', 'danger'];
  const [fullscreen, setFullscreen] = useState<any>(true);
  const [showf, setShowf] = useState(false);

  function handleShowf(breakpoint:any, color:any) {
    setFullscreen(breakpoint);
    setShowf(true);
  }
return(
    {values.map((v, idx) => (
        <Button
        key={idx}
        onClick={() => handleShowf(v, colors[idx % colors.length])}
        >
        </Button>
    ))}
    <Modal show={showf} fullscreen={fullscreen} onHide={() => setShowf(false)}>
        <Modal.Header closeButton>
        <Modal.Title>Modal</Modal.Title>
        </Modal.Header>
        <Modal.Body>Modal body content</Modal.Body>
    </Modal>
)}

export default function BasicModal () {   
const [show6, setShow6] = useState(false);

const handleClose6 = () => setShow6(false);
const handleShow6 = () => setShow6(true);
return(
<Button variant='light' type="button" 
className="btn btn-light mb-1" onClick={handleShow6}>Open modal for
@getbootstrap</Button>
<Modal show={show6} onHide={handleClose6}>
        <Modal.Header closeButton>
        <Modal.Title as="h6>Modal heading</Modal.Title>
        </Modal.Header>
        <Modal.Body>
        <Form>
<Form.Group className="mb-3" controlId="exampleForm.ControlInput1">
<Form.Label>Recipient:</Form.Label>
<Form.Control
    type="email"
    placeholder=" @getbootstrap"
    autoFocus
/>
</Form.Group>
<Form.Group
className="mb-3"
controlId="exampleForm.ControlTextarea1">
<Form.Label>Message:</Form.Label>
<Form.Control as="textarea" rows={3} />
</Form.Group>
</Form>
</Modal.Body>
<Modal.Footer>
<Button variant="secondary" onClick={handleClose6}>
    Close
</Button>
<Button variant="primary">Send message</Button>
</Modal.Footer>
</Modal>
)}

export const Modal = ()= {
  const [animation1, setanimation1] = useState(false);

  let viewDemoShow1 = (modal) => {
    switch (modal) {
      case "Basic":
        setanimation1(true)
        break;
    }
  let viewDemoClose1 = (modal) => {
      switch (modal) {
        case "Basic":
          setanimation1(false)
          break;
  return(
    <Col sm={6} md={4} xl={3} className="col-sm-6 col-md-4 col-xl-3">
    <Link href="#!" className="modal-effect btn btn-primary btn-block"  onClick={() => viewDemoShow1("Basic")}>Zoom</Link>
    <Rodal onClose={hide} visible={animation1} animation='Scale' height={280} onClick={() => viewDemoClose1("Basic")} >
      <div className='modal-header'>Modal Header
        <Link href='#!'><span className="d-flex ms-auto text-dark" onClick={() => { viewDemoClose1("Basic") }}><i className='fe fe-x ms-auto'></i></span></Link>
      </div>
      <div className='modal-body'>
        <h6>Modal Body</h6>
        Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.</div>
      <div className='modal-footer'>
        <Button className="me-2" variant="primary" onClick={() => viewDemoClose1("Basic")}>Save Changes</Button>
        <Button variant="secondary" onClick={() => viewDemoClose1("Basic")}>Close</Button>
      </div>
    </Rodal>
  </Col>
   )
  };

<Button variant='' type="button" 
className="btn-close" aria-label="Close"></Button>

<Button variant='' type="button"
 className="btn-close" disabled aria-label="Close"></Button>