npm package: @licuido-ui/ui_empty-page
Description: Application appears to have crashed and only displays a EmptyPage.
Latest version: 0.0.2

# EmptyPage

Application appears to have crashed and only displays a EmptyPage.

### Author
 * @author Henry Dyson J <henry@crayond.co>
## Link
[Story Book Link EmptyPage](http://216.48.182.148:3333/?path=/docs)

### PlayGround
[Try it have a fun codeBox](https://codesandbox.io/p/sandbox/hungry-cache-zglwy6?file=%2Fsrc%2FApp.js%3A16%2C30)

## Installation

```sh
npm i  @licuido-ui/ui_empty-page
```

## Import component

```jsx
import { EmptyPage } from '@licuido-ui/ui_empty-page';
```

## Usage

```jsx
<EmptyPage emptyPageIcon={'icon'} />
```

## Image
![alt text](./EmptyPage.png)


## Sample Code
```jsx
 <EmptyPage
    emptyPageIcon={""}
    emptyPageInfographic={""}
    emptyPageUrl={
        "https://cdn.vectorstock.com/i/preview-1x/04/12/no-data-empty-data-concept-vector-41830412.jpg"
    }
    emptyPageUrlHeight={"100%"}
    emptyPageUrlWidth={"100%"}
    containerStyle={{}}
    iconContainerStyle={{ minHeight: "100vh" }}
    emptyPageIconBgColor={"#EFEEFB"}
    handleClickIcon={() => {}}
    title1Styles={{}}
    title2Styles={{}}
    title1MarginTop={2}
    title1MarginBottom={3}
    title1Size={16}
    title1Weight={600}
    title1Color={"#3B3B3B"}
    title1={"Add Bookmark"}
    title2Size={14}
    title2Weight={500}
    title2Color={"#3B3B3B"}
    title2={"Click the above icon to add"}
    title2MarginTop={0}
    title2MarginBottom={0}
    buttonColumnGap={2}
    buttonMarginTop={2}
    buttonStyles={{}}
    buttons={buttons}
/>
```
## Props

| Name                     | Description                                                                                                                                                    | Default        | Control                                                                                     |
| ------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------- | ------------------------------------------------------------------------------------------- |
| **containerStyle**       | SxProps&lt;{}&gt;                                                                                                                                              | { }            | containerStyle : {background : "#ffff"minHeight : "100vh"}                                  |
| **emptyPageUrlHeight**   | number                                                                                                                                                         | 225            |                                                                                             |
| **emptyPageUrlWidth**    | number                                                                                                                                                         | 225            |                                                                                             |
| **iconContainerStyle**   | SxProps&lt;{}&gt;                                                                                                                                              | { }            | iconContainerStyle : {}                                                                     |
| **emptyPageIconBgColor** | string                                                                                                                                                         | ""             | linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255));                                    |
| **handleClickIcon**      | () =&gt; void                                                                                                                                                  | () =&gt; false | -                                                                                           |
| **title1Styles**         | SxProps&lt;{}&gt;                                                                                                                                              | { }            | title1Styles : {}                                                                           |
| **title2Styles**         | SxProps&lt;{}&gt;                                                                                                                                              | { }            | title2Styles : {}                                                                           |
| **title1MarginTop**      | number                                                                                                                                                         | 0              |                                                                                             |
| **title1MarginBottom**   | number                                                                                                                                                         | 0              |                                                                                             |
| **title1Size**           | number                                                                                                                                                         | 0              |                                                                                             |
| **title1Weight**         | number                                                                                                                                                         | 0              |                                                                                             |
| **title1Color**          | string                                                                                                                                                         | ""             | linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255));                                    |
| **title1**               | string                                                                                                                                                         | ""             | Add Bookmark                                                                                |
| **title2Size**           | number                                                                                                                                                         | 12             |                                                                                             |
| **title2Weight**         | number                                                                                                                                                         | 0              |                                                                                             |
| **title2Color**          | string                                                                                                                                                         | ""             | linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255));                                    |
| **title2**               | string                                                                                                                                                         | ""             | -                                                                                           |
| **title2MarginTop**      | number                                                                                                                                                         | 0              |                                                                                             |
| **title2MarginBottom**   | number                                                                                                                                                         | 0              |                                                                                             |
| **emptyPageIcon**        | ReactNode                                                                                                                                                      | ""             | ""                                                                                          |
| **emptyPageInfographic** | ReactNode                                                                                                                                                      | ""             | ""                                                                                          |
| **emptyPageUrl**         | string                                                                                                                                                         | ""             | https://freefrontend.com/assets/img/html-css-404-page-templates/Pure-CSS-404-Error-Page.gif |
| **buttonColumnGap**      | number                                                                                                                                                         | 2              |                                                                                             |
| **buttonMarginTop**      | number                                                                                                                                                         | 2              |                                                                                             |
| **buttonStyles**         | SxProps&lt;{}&gt;                                                                                                                                              | { }            | buttonStyles : {}                                                                           |
| **buttons**              | [ {label:"",handleClick:()=&gt;{},color:"", backgroundColor:"" } ]{ label?: string; handleClick?: () =&gt; void; color?: string; backgroundColor?: string; }[] | []             | buttons : [0 : {...} 4 keys1 : {...} 4 keys]                                                |
| **className**            | string                                                                                                                                                         | -              | Set string                                                                                  |
| **id**                   | string                                                                                                                                                         | string         | string                                                                                      |
| **sx**                   | SxProps&lt;Theme&gt;                                                                                                                                           | -              | Set object                                                                                  |