npm package: @licuido-ui/ui_error-page
Description: As a developer, handling 404 errors means creating a page that the server uses as a replacement when it can't find the requested page.
Latest version: 0.0.2

# ErrorPage

As a developer, handling 404 errors means creating a page that the server uses as a replacement when it can't find the requested page.

### Author

- @author Henry Dyson J <henry@crayond.co>

## Link

[Story Book Link ErrorPage](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_error-page
```

## Import component

```jsx
import { ErrorPage } from '@licuido-ui/ui_error-page';
```

## Usage

```jsx
<ErrorPage pageNotFoundText={'Page Not Found'} />
```

## Image

![alt text](./errorPage.png)

## Sample Code

```jsx
<ErrorPage
  urlImgHeight={300}
  urlImgWidth={300}
  pageNotFoundText={'Page Not Found'}
  goBackButton={{ label: 'Back', style: { color: '#ffff' } }}
  pageNotFoundIconUrl='https://img.freepik.com/free-vector/internet-network-warning-404-error-page-file-found-web-page-internet-error-page-issue-found-network-404-error-present-by-man-sleep-display_1150-55450.jpg'
/>
```

## Props

| **Name**                      | **Description**                                      | **Default**        | **Control**                                                                                     |
| ----------------------------- | ---------------------------------------------------- | ------------------ | ----------------------------------------------------------------------------------------------- |
| **pageNotFoundIconUrl**       | string                                               | ""                 | https://cdni\.iconscout\.com/illustration/premium/thumb/error\-404\-page\-3100465\-2582986\.png |
| **pageNotFoundIconComponent** | ReactNode                                            | \-                 | -                                                                                               |
| **goBackButton**              | object\{ label: string; onClick: \(\) =&gt; void; \} | object             | {}                                                                                              |
| **pageNotFoundText**          | string                                               | Page not found !!! | Page not found \!\!\!                                                                           |
| **urlImgHeight**              | number                                               | \-                 |
| **urlImgWidth**               | number                                               | \-                 |
| **urlImgStyle**               | SxProps                                              | \{ \}              | urlImgStyle : \{\}                                                                              |
| **ButtonBlockStyle**          | SxProps&lt;\{\}&gt;                                  | \{ \}              | ButtonBlockStyle : \{\}                                                                         |
| **messageTextStyle**          | SxProps&lt;\{\}&gt;                                  | \{ \}              | \{\}                                                                                            |
| **rootStyle**                 | SxProps&lt;\{\}&gt;                                  | \{ \}              | rootStyle : \{\}                                                                                |
| **iconBlockStyle**            | SxProps&lt;\{\}&gt;                                  | \{ \}              | iconBlockStyle : \{\}                                                                           |
| **className**                 | string                                               | ""                 | Set string                                                                                      |
| **id**                        | string                                               | string             | string                                                                                          |
| **sx**                        | SxProps&lt;Theme&gt;                                 | \{ \}              | Set object                                                                                      |