# InfoCard

A component that displays data in an ItemCard or ProfileImage with optional dropdown details. Supports both fetching data via useExecuteRequest or using already-fetched data.

## Installation

```tsx
import { InfoCard } from 'uxp/components';
```

## Signature

```tsx
const InfoCard: React.FunctionComponent<InfoCardProps>
```

## Examples

```tsx
With executeConfig (InfoCard fetches data):
```

\<InfoCard data={{ executeConfig: { type: 'action', model: 'User', action: 'GetDetails', parameters: { id: '123' } } }} fields={{ image: 'avatar', title: 'name', subtitle: 'email' }} details={(item) => ({ fields: \[ { label: 'Phone', value: item.phone }, { label: 'Department', value: item.department } ] })} />

````

```tsx
With direct data (already fetched):
````

\<InfoCard data={{ avatar: '<https://example.com/avatar.jpg>', name: 'John Doe', email: '<john@example.com>', phone: '123-456-7890', department: 'Engineering' }} fields={{ image: 'avatar', title: 'name', subtitle: 'email' }} details={(item) => (

Phone: {item.phone}

Department: {item.department}

)} dropdownPosition="bottom-right" />

````

```tsx
Avatar variant (just profile image):
````

\<InfoCard data={{ avatar: '<https://example.com/avatar.jpg>', name: 'John Doe' }} fields={{ image: 'avatar', name: 'name' }} variant="avatar" size="large" shape="circle" details={(item) => (

User: {item.name})} />

```

## Properties

|Name|Type|Mandatory|Default Value|Example Value|
|-|-|-|-|-|
|data|[InfoCardData](../types/InfoCardData.md)|Yes|-|-|
|fields|[InfoCardFields](../types/InfoCardFields.md)|No|-|-|
|details|[InfoCardDetailsContent](../types/InfoCardDetailsContent.md)|No|-|-|
|variant|'card' \| 'avatar'|No|-|-|
|size|[Size](../types/Size.md)|No|-|-|
|shape|[Shape](../types/Shape.md)|No|-|-|
|dropdownPosition|[DropdownPosition](../types/DropdownPosition.md)|No|-|-|
|className|string|No|-|-|
|style|React.CSSProperties|No|-|-|

## Related Types

- [InfoCardProps](../types/InfoCardProps.md)
- [InfoCardData](../types/InfoCardData.md)
- [ExecuteRequestConfig](../types/ExecuteRequestConfig.md)
- [ExecuteConfig](../types/ExecuteConfig.md)
- [ExecuteActionConfig](../types/ExecuteActionConfig.md)
- [ExecuteConfigBase](../types/ExecuteConfigBase.md)
- [ExecutionOptions](../types/ExecutionOptions.md)
- [CachingOptions](../types/CachingOptions.md)
- [ExecuteServiceConfig](../types/ExecuteServiceConfig.md)
- [ExecuteMicroserviceConfig](../types/ExecuteMicroserviceConfig.md)
- [ExecuteAPIConfig](../types/ExecuteAPIConfig.md)
- [ExecuteQueryConfig](../types/ExecuteQueryConfig.md)
- [QueryParams](../types/QueryParams.md)
- [ExecuteCollectionConfig](../types/ExecuteCollectionConfig.md)
- [UseExecuteOptions](../types/UseExecuteOptions.md)
- [InfoCardFields](../types/InfoCardFields.md)
- [InfoCardDetailsContent](../types/InfoCardDetailsContent.md)
- [DetailsContent](../types/DetailsContent.md)
- [RowData](../types/RowData.md)
- [ObjectInfoCardProps](../types/ObjectInfoCardProps.md)
- [ObjectField](../types/ObjectField.md)
- [Size](../types/Size.md)
- [Shape](../types/Shape.md)
- [DropdownPosition](../types/DropdownPosition.md)

```