Alerts

import React from 'react';
import { Alert } from 'react-bootstrap';

const DefaultAlerts = () => {

  return (
    <>
        <Alert variant="primary">
            A simple primary alert—check it out!
        </Alert>
        <Alert variant="secondary">
            A simple secondary alert—check it out!
        </Alert>
        <Alert variant="success">
            A simple success alert—check it out!
        </Alert>
        <Alert variant="danger">
            A simple danger alert—check it out!
        </Alert>
        <Alert variant="warning">
            A simple warning alert—check it out!
        </Alert>
        <Alert variant="info">
            A simple info alert—check it out!
        </Alert>
        <Alert variant="light">
            A simple light alert—check it out!
        </Alert>
        <Alert variant="dark">
            A simple dark alert—check it out!
        </Alert>
    </>
  );
};

export default DefaultAlerts;

import React from 'react';
import NubraAlert from '../../../components/@nubra-alert/@nubra-alert';

const DefaultAlerts = () => {

  return (
    <>
        <NubraAlert variant="success" inverse>
            A simple primary alert—check it out!
        </NubraAlert>
        <NubraAlert variant='primary' inverse>
            A simple primary alert—check it out!
        </NubraAlert>
        <NubraAlert variant='secondary' inverse>
            A simple secondary alert—check it out!
        </NubraAlert>
        <NubraAlert variant='success' inverse>
            A simple success alert—check it out!
        </NubraAlert>
        <NubraAlert variant='danger' inverse>
            A simple danger alert—check it out!
        </NubraAlert>
        <NubraAlert variant='warning' inverse>
            A simple warning alert—check it out!
        </NubraAlert>
        <NubraAlert variant='info' inverse>
            A simple info alert—check it out!
        </NubraAlert>
    </>
  );
};

export default DefaultAlerts;

import React from 'react';
import { Alert } from 'react-bootstrap';

const CustomAlerts = () => {

  return (
    <>
        <Alert bsPrefix='alert alert-inv alert-inv-primary'>
            This is a custom alert check it out!
        </Alert>
        <Alert bsPrefix="alert bg-yellow-light-4">
            This is a secondary alert check it out!
        </Alert>
        <Alert bsPrefix="alert bg-yellow-light-4">
            This is a secondary alert check it out!
        </Alert>
        <Alert bsPrefix="alert alert-inv bg-brown">
            This is a success alert check it out!
        </Alert>
        <Alert bsPrefix="alert alert-inv bg-gradient-dusk">
            This is a danger alert check it out!
        </Alert>
        <Alert bsPrefix="alert bg-gradient-honey">
            This is a warning alert check it out!
        </Alert>
    </>
  );
};

export default CustomAlerts;

import React from 'react';
import { Alert } from 'react-bootstrap';

const BorderedAlerts = () => {

  return (
    <>
        <Alert variant="white" className="alert-border-primary">
            This is a primary alert check it out!
        </Alert>
        <Alert variant="white" className="alert-border-secondary">
            This is a secondary alert check it out!
        </Alert>
        <Alert variant="white" className="alert-border-success">
            This is a success alert check it out!
        </Alert>
        <Alert variant="white" className="alert-border-danger">
            This is a danger alert check it out!
        </Alert>
        <Alert variant="white" className="alert-border-warning">
            This is a warning alert check it out!
        </Alert>
        <Alert variant="white" className="alert-border-info">
            This is a info alert check it out!
        </Alert>
        <Alert variant="white" className="alert-border-theme">
            This is a theme alert check it out!
        </Alert>
    </>
  );
};

export default BorderedAlerts;

import React from 'react';
import { Alert } from 'react-bootstrap';

const AlertsWithLink = () => {

  return (
    <>
        <Alert variant="primary">
            This is a primary alert with{" "}
            <Alert.Link href="#" className="alert-link">an example link</Alert.Link>. Give it a click if you like.
        </Alert>
        <Alert variant="danger">
            This is a danger alert with{" "}
            <Alert.Link href="#" className="alert-link">an example link</Alert.Link>. Give it a click if you like.
        </Alert>
        <Alert variant="warning">
            This is a warning alert with{" "}
            <Alert.Link href="#" className="alert-link">an example link</Alert.Link>. Give it a click if you like.
        </Alert>
        <Alert variant="success">
            This is a success alert with{" "}
            <Alert.Link href="#" className="alert-link">an example link</Alert.Link>. Give it a click if you like.
        </Alert>
        <Alert variant="info">
            This is a info alert with{" "}
            <Alert.Link href="#" className="alert-link">an example link</Alert.Link>. Give it a click if you like.
        </Alert>
    </>
  );
};

export default AlertsWithLink;

import React from 'react';
import { Col, Row } from 'react-bootstrap'
import NubraAlert from '../../../components/@nubra-alert/@nubra-alert';

const AditionalContents = () => {

  return (
        <Row>
            <Col sm={12}>
                <Alert variant="success">
                    <Alert.Heading as="h4">Well done!</Alert.Heading>
                    <p>
                        Aww yeah, you successfully read this important alert message. This
                        example text is going to run a bit longer so that you can see how
                        spacing within an alert works with this kind of content.
                    </p>
                    <hr />
                    <p className="mb-0">
                        Whenever you need to, be sure to use margin utilities to keep things
                        nice and tidy.
                    </p>
                </Alert>
            </Col>
            <Col sm={6}>
                <Alert variant="primary">
                    <Alert.Heading as="h4">Well done!</Alert.Heading>
                    <p>You have successfully completed level 1.</p>
                    <Button variant='primary' size='sm' className='btn-block mt-3' >Play Again</Button>
                </Alert>
                <NubraAlert variant="warning" dismissible>
                    <NubraAlert.Header as="h5">
                        <span className="alert-icon-wrap me-2"><i className="zmdi zmdi-alert-circle-o" /></span>
                        Are you sure you want to delete this file?
                    </NubraAlert.Header>
                    <Button variant='secondary' className='mt-2 me-2'>Cancel</Button>
                    <Button variant='primary' className='mt-2'>Yes</Button>
                </NubraAlert>
            </Col>
            <Col sm={6}>
                <NubraAlert variant="danger" dismissible>
                    <NubraAlert.Header as="h4">Oh snap!</NubraAlert.Header>
                    Change a few things and try submitting again.
                </NubraAlert>
                <NubraAlert className="alert-wth-icon" dismissible>
                    <span className="alert-icon-wrap"><i className="zmdi zmdi-pin" /></span> John Doe started following your board.
                </NubraAlert>
                <NubraAlert variant="info" className="alert-wth-icon" dismissible>
                    <span className="alert-icon-wrap"><i className="zmdi zmdi-twitter" /></span>
                    <p>John! Recently joined twitter.</p>
                    <NubraAlert.Link href="#">Follow</NubraAlert.Link>
                </NubraAlert>
            </Col>
        </Row>
  );
};

export default AditionalContents;

import React from 'react';
import NubraAlert from '../../../components/@nubra-alert/@nubra-alert';

const DismissableAlerts = () => {

  return (
    <>
        <NubraAlert variant="warning" dismissible>
            <strong>Holy guacamole!</strong> You should check in on some of those fields below.
        </NubraAlert>
    </>
  );
};

export default DismissableAlerts;

import React from 'react';
import NubraAlert from '../../../components/@nubra-alert/@nubra-alert';

const AlertsWithIcon = () => {

  return (
    <>
        <NubraAlert className="alert-wth-icon" variant="primary" dismissible>
            <span className="alert-icon-wrap"><span className="feather-icon"><Moon /></span></span> Welcome to Jampack Dashboard.
            <button type="button" className="btn-close" data-bs-dismiss="alert" aria-label="Close" />
        </NubraAlert>
        <NubraAlert className="alert-wth-icon" variant="secondary" dismissible>
            <span className="alert-icon-wrap"><i className="zmdi zmdi-notifications-active" /></span> You have 32 notifications pending in your inbox.
        </NubraAlert>
        <NubraAlert className="alert-wth-icon" variant="success" dismissible>
            <span className="alert-icon-wrap"><i className="zmdi zmdi-check-circle" /></span> Your message has been sent successfully.
        </NubraAlert>
        <NubraAlert className="alert-wth-icon" variant="danger" dismissible>
            <span className="alert-icon-wrap"><i className="zmdi zmdi-bug" /></span> The application failed to initialize properly.
        </NubraAlert>
        <NubraAlert className="alert-wth-icon" variant="warning" dismissible>
            <span className="alert-icon-wrap"><i className="zmdi zmdi-help" /></span> You must provide value for account name.
        </NubraAlert>
        <NubraAlert className="alert-wth-icon" variant="info" dismissible>
            <span className="alert-icon-wrap"><i className="zmdi zmdi-settings" /></span> Prevent this page from creating additional dialogue.
        </NubraAlert>
        <NubraAlert className="alert-wth-icon" variant="light" dismissible>
            <span className="alert-icon-wrap"><i className="zmdi zmdi-block" /></span> You have 1 open <strong>refund request</strong> to action.
            <NubraAlert.Link href="#">Take action</NubraAlert.Link>
        </NubraAlert>
        <NubraAlert className="alert-wth-icon" variant="dark" dismissible>
            <span className="alert-icon-wrap"><i className="zmdi zmdi-pin-off" /></span> Restaurant is currently unavailable.
        </NubraAlert>
        <NubraAlert className="alert-inv alert-inv-primary alert-wth-icon" dismissible>
            <span className="alert-icon-wrap"><i className="zmdi zmdi-mood" /></span> Welcome to Griffin Dashboard.
        </NubraAlert>
        <NubraAlert className="alert-inv alert-inv-secondary alert-wth-icon" dismissible >
            <span className="alert-icon-wrap"><i className="zmdi zmdi-notifications-active" /></span> You have 32 notifications pending in your inbox.
        </NubraAlert>
        <NubraAlert className="alert-inv alert-inv-success alert-wth-icon" dismissible>
            <span className="alert-icon-wrap"><i className="zmdi zmdi-check-circle" /></span> Your message has been sent successfully.
        </NubraAlert>
        <NubraAlert className="alert-inv alert-inv-danger alert-wth-icon" dismissible>
            <span className="alert-icon-wrap"><i className="zmdi zmdi-bug" /></span> The application failed to initialize properly.
        </NubraAlert>
        <NubraAlert className="alert-inv alert-inv-warning alert-wth-icon" dismissible>
            <span className="alert-icon-wrap"><i className="zmdi zmdi-help" /></span> You must provide value for account name.
        </NubraAlert>
        <NubraAlert className="alert-inv alert-inv-info alert-wth-icon" dismissible>
            <span className="alert-icon-wrap"><i className="zmdi zmdi-settings" /></span> Prevent this page from creating additional dialogue.
        </NubraAlert>
    </>
  );
};

export default AlertsWithIcon;

import React from 'react';
import NubraAlert from '../../../components/@nubra-alert/@nubra-alert';

const RoundedAlerts = () => {

  return (
    <>
        <NubraAlert variant="primary" rounded>
            This is a primary alert check it out!
        </NubraAlert>
        <NubraAlert variant="secondary" rounded>
            This is a secondary alert check it out!
        </NubraAlert>
        <NubraAlert variant="success" rounded>
            This is a success alert check it out!
        </NubraAlert>
        <NubraAlert variant="danger" rounded>
            This is a danger alert check it out!
        </NubraAlert>
        <NubraAlert variant="warning" rounded>
            This is a warning alert check it out!
        </NubraAlert>
        <NubraAlert variant="info" rounded>
            This is a info alert check it out!
        </NubraAlert>
        <NubraAlert variant="light" rounded>
            This is a light alert check it out!
        </NubraAlert>
        <NubraAlert variant="dark" rounded>
            This is a dark alert check it out!
        </NubraAlert>
    </>
  );
};

export default RoundedAlerts;