npm package: @licuido-ui/ui_media-card
Description: The MediaCard is a reusable React component that provides a customizable and versatile card layout for displaying media content, such as images, along with related information, titles, descriptions, and action buttons.
Latest version: 0.0.2

# MediaCard

The MediaCard is a reusable React component that provides a customizable and versatile card layout for displaying media content, such as images, along with related information, titles, descriptions, and action buttons.

### Author

- @author Akila Kalaiyarasan <akila@crayond.co>

## Link

[Story Book Link ButtonGroup](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_media-card
```

## Import component

```jsx
import { MediaCard } from '@licuido-ui/ui_media-card';
```

## Usage

```jsx
<MediaCard cardData={[]} />
```
## Image

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


## Usage

```jsx
      <MediaCard
        cardImage={'image-url.jpg'}
        title={'Sample Title'}
        mailId={'sample@email.com'}
        mobile={'123-456-7890'}
        desc={'This is a sample description for the MediaCard component.'}
        buttons={[
          {
            text: 'Button 1'
            onClick: () => {},
            style: {},
            disabled: false,
          },
        ]}
    />
```

## Props

| Name              | Type                                 | Default           | Description                                                                                                    |
| ----------------- | ------------------------------------ | ----------------- | -------------------------------------------------------------------------------------------------------------- |
| id                | string                               | string            | string                                                                                                         |
| className         | string                               | ''                | Custom class name for the root element of the `MediaCard`.                                                     |
| sx                | SxProps\<Theme>                      | {}                | Custom style object for the root element.                                                                      |
| cardImage         | string                               | (required)        | The URL of the image to be displayed on the card.                                                              |
| buttons           | ButtonItem[]                         | []                | An array of buttons to be displayed on the card.                                                               |
| title             | string                               | ''                | The title to be displayed on the card.                                                                         |
| mailId            | string                               | ''                | The email address to be displayed on the card.                                                                 |
| mobile            | string                               | ''                | The mobile number to be displayed on the card.                                                                 |
| divider           | boolean                              | true              | Set to `true` to display a divider between the content and buttons.                                            |
| desc              | string                               | ''                | The description to be displayed on the card (applicable only in 'contentOriented' variant).                    |
| variant           | 'imageOriented' or 'contentOriented' | 'contentOriented' | The variant of the `MediaCard`, either 'imageOriented' or 'contentOriented'.                                   |
| cardStyle         | SxProps                              | {}                | Custom style object for the card element.                                                                      |
| cardWrapperStyle  | SxProps                              | {}                | Custom style object for the wrapper element around the card.                                                   |
| cardMediastyle    | SxProps                              | {}                | Custom style object for the card media (image) element.                                                        |
| cardContentStyle  | SxProps                              | {}                | Custom style object for the card content element.                                                              |
| titleStyle        | SxProps                              | {}                | Custom style object for the title element.                                                                     |
| subTitleWrapStyle | SxProps                              | {}                | Custom style object for the subtitle wrapper element.                                                          |
| mailIdStyle       | SxProps                              | {}                | Custom style object for the mailId element.                                                                    |
| dotStyle          | SxProps                              | {}                | Custom style object for the dot separator element.                                                             |
| mobileNumberStyle | SxProps                              | {}                | Custom style object for the mobile number element.                                                             |
| dividerStyle      | SxProps                              | {}                | Custom style object for the divider element.                                                                   |
| descStyle         | SxProps                              | {}                | Custom style object for the description element (applicable only in 'contentOriented' variant).                |
| buttonWrapStyle   | SxProps                              | {}                | Custom style object for the wrapper element around the buttons (applicable only in 'contentOriented' variant). |