npm package: @licuido-ui/ui_notification
Description: The `Notification` component displays a list of notifications with customizable styling and data.
Latest version: 4.0.2

# Notification Component

The `Notification` component displays a list of notifications with customizable styling and data.

### Author

- @author Narayanamoorthi <narayana@crayond.co>

## Link

[Story Book Link to MobileInput ](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_notification
```

## Import component

```jsx
import { Notification } from '@licuido-ui/ui_notification';
```

## Usage

```jsx
<Notification data={data} count={data?.length}></Notification>
```

## Image

![alt text](./noti.jpg)

| **Prop**              | **Type**          | **Description**                                   | **Default Props**                                                                                    |
| --------------------- | ----------------- | ------------------------------------------------- | ---------------------------------------------------------------------------------------------------- |
| **id**                | `string`          | Is this the principal call to action on the page? |                                                                                                      |
| **className**         | `string`          | Additional CSS class for styling the component.   |                                                                                                      |
| **sx**                | `SxProps<Theme>`  | Custom styling using the Theme UI system.         |                                                                                                      |
| **data**              | `DataProps[]`     | Data for rendering the notifications.             |                                                                                                      |
| **count**             | `React.ReactNode` | The number of messages to display.                |                                                                                                      |
| **messageBoxStyle**   | `SxProps`         | Custom styling for the message box.               |                                                                                                      |
| **mainBoxStyle**      | `SxProps`         | Custom styling for the main box.                  |                                                                                                      |
| **imageStyle**        | `SxProps`         | Custom styling for the image.                     |                                                                                                      |
| **messageStyle**      | `SxProps`         | Custom styling for the text message.              |                                                                                                      |
| **nodata**            | `React.ReactNode` | Display nodata content.                           |
| **messageVariant**    | `string`          | `subtitle2`                                       | messageVariant variant applied to the variant Props using an messageVariant to the Typography.       |
|                       |
| **headerTextVariant** | `string`          | `h6`                                              | headerTextVariant variant applied to the variant Props using an headerTextVariant to the Typography. |
|                       |
| **timeVariant**       | `string`          | `body1`                                           | timeVariant variant applied to the variant Props using an timeVariant to the Typography.             |
|                       |