# Data Sanitizer

Showcases a data processing pipeline visually, converting raw information into refined, actionable insights with animation.

## Installation

1. **Install the packages**

```
   npm i gsap @gsap/react react-icons clsx tailwind-merge
   ```

2. **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));
   }
   ```

3. **Copy and paste the following code into your project**

`datasanitizer.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                                                                 |
|--------------|--------|-----------|-----------------------------------------------------------------------------|
| labelHead    | string | Processing | Main label displayed above the sequence of processing steps.                |
| label1       | string | Filter     | Label for the first stage in the data sanitization process.                 |
| label2       | string | Transform  | Label for the second stage in the data sanitization process.                |
| label3       | string | Refine     | Label for the third stage in the data sanitization process.                 |
| cardTitle    | string | Insight Flow | Title displayed at the top of the card containing the visualization.         |
| cardDescription | string | Step into a visual pipeline where raw inputs get filtered, processed, and turned into meaningful intelligence. | Short description providing context for the DataSanitizer visualization.