Empty States

import React from 'react'
import { Button } from 'react-bootstrap'
//Redux
import { connect } from 'react-redux';
import { drawerToggle } from '../../../redux/action/Drawer'
//Img 
import emptyCardImg from '../../../Assets/dist/img/empty-cart.png'

const EmptyDrawer = ({ drawerToggle, drawerContents }) => {

    const handleDrawer = () => {
        drawerToggle({
            status: true,
            rootClass: "",
            classes: "drawer-overlay drawer-right",
            title: "Your Cart",
            text: "With supporting text below as a natural lead-in to additional content.",
            img: emptyCardImg,
            footer: "All illustration are powered by OUCH"
        })
    }

    return (
        <div className="hstack flex-wrap gap-3 p-4">
            <Button variant="primary" onClick={handleDrawer} >Drawer</Button>
        </div>
    )
}

const mapStateToProps = ({ drawerReducer }) => {
    const { drawerContents } = drawerReducer;
    return { drawerContents }
};

export default connect(mapStateToProps, { drawerToggle })(EmptyDrawer);

import React from 'react';
import { Button, Card, Image } from 'react-bootstrap'
//Image
import EmptyImg from '../../../Assets/dist/img/empty-2.png';

const EmptyCard = () => {
  const [show, setShow] = useState(false);
  return (
    <Card className="mb-0">
        <Card.Body>
            <div className="w-250p mx-auto">
                <Image fluid src={EmptyImg} className="d-inline-block" />
            </div>
            <div className="text-center">
                <h4 className="h4">You have nothing to display</h4>
                <Card.Text>With supporting text below as a natural lead-in to additional content.</Card.Text>
                <Button variant="primary">Add event</Button>
            </div>
        </Card.Body>
    </Card>
  );
}

export default EmptyCard;