# Event Card

An interactive, animated event timeline card displaying daily schedules with hover-triggered time slot transitions.

## PreviewCode

[Full Screen](/content/preview/eventcard/index.html)

### Event Timeline

Visualize and navigate your daily flow with beautifully animated, color-coded time blocks.

*Hover to animate*

## Installation

### 1. Install the packages

```bash
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

`eventcard.tsx`

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

// Placeholder component code
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                                                                                      |
|------------------|--------|---------------------|--------------------------------------------------------------------------------------------------|
| firstEvent       | string | "Solana Meet: BLR" | Title of the first event shown in the timeline.                                                |
| firstEventTime   | string | "8:30–11PM"       | Time range for the first event.                                                                |
| secondEvent      | string | "UX Testing Slot"  | Title of the second event shown in the timeline.                                               |
| secondEventTime  | string | "5:30–8:30PM"     | Time range for the second event.                                                                |
| cardTitle        | string | "Event Timeline"   | Title displayed below the timeline card.                                                       |
| cardDescription  | string | "Visualize and navigate your daily flow with beautifully animated, color-coded time blocks." | Short description displayed below the card title.