keralawaterauthority/pages/notification.js

import Layout from "../components/layout/Layout";

function Notification() {
    return (
        <>
            <Layout
                headTitle="Notification"
                pageTitle="Notification"
                // pageTitleSub={"Welcome Intez Notification page"}
                pageClass={"dashboard"}
                parent={"Home"}
                child={"Notification"}
            >
                <div className="row">
                    <div className="col-xl-12">
                        <div className="card">
                            <div className="card-header">
                                <h4 className="card-title">Recent Notification </h4>
                            </div>
                            <div className="card-body">
                                <div className="all-notification">
                                    <div className="notification-list">
                                        <div className="lists">
                                            <a href="#" className="">
                                                <div className="d-flex align-items-center">
                                                    <span className="me-3 icon pending">
                                                        <i className="bi bi-cash-stack"></i>
                                                    </span>
                                                    <div>
                                                        <p>Oops! It seems like your wallet balance is insufficient to complete this transaction.</p>
                                                        <span>Please add funds to your wallet to proceed.</span>
                                                    </div>
                                                </div>
                                            </a>
                                            <a href="#" className="">
                                                <div className="d-flex align-items-center">
                                                    <span className="me-3 icon fail">
                                                        <i className="bi bi-calendar2-date"></i>
                                                    </span>
                                                    <div>
                                                        <p>Your water bill is due on 12-10-2023.</p>
                                                        <span>Please ensure it's paid on time.</span>
                                                    </div>
                                                </div>
                                            </a>
                                            <a href="#" className="">
                                                <div className="d-flex align-items-center">
                                                    <span className="me-3 icon fail">
                                                       
                                                        <i className="bi bi-x"></i>
                                                    </span>
                                                    <div>
                                                        <p>Payment unsuccessful.</p>
                                                        <span>Please check your payment details and try again.</span>
                                                    </div>
                                                </div>
                                            </a>
                                            <a href="#" className="">
                                                <div className="d-flex align-items-center">
                                                    <span className="me-3 icon success">
                                                    <i className="bi bi-check"></i>
                                                    </span>
                                                    <div>
                                                        <p>Your application has been verified successfully.</p>
                                                        <span>2022-12-24 12:00:23</span>
                                                    </div>
                                                </div>
                                            </a>
                                            <a>
                                                More
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </Layout>
        </>
    );
}
export default Notification;