# Export Reactor

Animated export reactor showcasing flowing document streams into a central node with CSV output.

## Installation

1. **Install the packages**  
   `npm i motion clsx tailwind-merge`

2. **Add util file**  
   `lib/util.ts`
   ```javascript
   import { ClassValue, clsx } from "clsx";
   import { twMerge } from "tailwind-merge";

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

3. **Copy and paste the following code into your project**  
   `exportreactor.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;
       }
   }
   ```

4. **Update the import paths to match your project setup**

## Props

| Prop            | Type   | Default          | Description                                                                                   |
|-----------------|--------|------------------|-----------------------------------------------------------------------------------------------|
| cardTitle       | string | Export Reactor    | The main heading displayed at the top of the ExportReactor card.                            |
| cardDescription | string | Multiple files send animated streams into a central node that refines and emits structured, downloadable output. | A short description shown below the card title to explain its purpose.                       |