# Integration Orbit

Core AI orchestrates diverse integrations, fostering a dynamic, intelligent, connected ecosystem.

### Intelligent Infrastructure

AI weaves into servers, security, and storage, making cloud systems adaptive and future-ready.

## Installation

### Install the packages

```bash
npm i motion react-icons clsx tailwind-merge
```

### Add util file  
`lib/util.ts`

```typescript
import { ClassValue, clsx } from "clsx";
import { twMerge } from "tailwind-merge";

export function cn(...inputs: ClassValue[]) {
    return twMerge(clsx(inputs));
}
```

### Copy and paste the following code into your project

`integrationorbit.tsx`

```javascript
function computeAverage(values) {
    return values.reduce((sum, v) => sum + v, 0) / values.length;
}

const avg = computeAverage(scores);

console.log("DEMO PLACEHOLDER CODE — NOT ACTUAL SOURCE ");
console.log("Nice try but this is just demo content for display only.");

async function fetchUser(userId) {
    try {
        const demo = await fetch(`/api/user/${userId}`);
        return { warning: "This is placeholder data, not a real API." };
    } catch (err) {
        console.error("Request failed:", err);
        return null;
    }
}
```

### Update the import paths to match your project setup

## Props

| Prop          | Type                                                | Default                          | Description                                                                                  |
|---------------|-----------------------------------------------------|----------------------------------|----------------------------------------------------------------------------------------------|
| centerIcon    | React.ComponentType<{ className?: string }>        | SiOpenai                        | The central icon placed in the orbit, representing the main service or provider.            |
| firstIcon     | React.ComponentType<{ className?: string }>        | FaSlack                         | The first orbiting icon around the center, usually a key integration service.               |
| secondIcon    | React.ComponentType<{ className?: string }>        | FaCloudflare                    | The second orbiting icon representing another connected service.                            |
| thirdIcon     | React.ComponentType<{ className?: string }>        | SiPlanetscale                   | The third orbiting icon, often a database or infrastructure service.                        |
| fourthIcon    | React.ComponentType<{ className?: string }>        | FaAws                           | The fourth orbiting icon for integrations like cloud or hosting platforms.                 |
| fifthIcon     | React.ComponentType<{ className?: string }>        | FaDocker                        | The fifth orbiting icon, typically a containerization or deployment service.               |
| sixthIcon     | React.ComponentType<{ className?: string }>        | SiDigitalocean                  | The sixth orbiting icon, commonly representing alternative cloud providers.                 |
| cardTitle     | string                                             | Intelligent Infrastructure       | The main heading displayed at the top of the integration card.                             |
| cardDescription| string                                             | AI weaves into servers, security, and storage, making cloud systems adaptive and future-ready. | A short description shown below the card title to explain its purpose.                     |