# RepeaterList

## Description

A simple list rendering component that iterates over an array of data and renders each item using a specified component. It provides a minimal, lightweight approach to rendering collections without additional layout or styling, making it perfect for simple repetitive content rendering.

## Aliases

- RepeaterList
- ItemRepeater
- DataRepeater
- ComponentRepeater

## Props Breakdown

| Prop | Type | Default | Required | Description |
|------|------|---------|----------|-------------|
| `data` | `T[]` | - | Yes | Array of data items to render |
| `component` | `React.ComponentType<T>` | - | Yes | Component to render for each data item |

## Examples

### Basic Usage
```tsx
import { RepeaterList } from '@delightui/components';

const ListItem = ({ name, email }) => (
  <div className="user-item">
    <span>{name}</span>
    <span>{email}</span>
  </div>
);

function BasicRepeaterExample() {
  const users = [
    { name: 'John Doe', email: 'john@example.com' },
    { name: 'Jane Smith', email: 'jane@example.com' },
    { name: 'Bob Johnson', email: 'bob@example.com' },
  ];

  return (
    <div className="user-list">
      <RepeaterList data={users} component={ListItem} />
    </div>
  );
}
```

### Simple Text List
```tsx
function SimpleTextExample() {
  const items = ['Apple', 'Banana', 'Cherry', 'Date', 'Elderberry'];
  
  const TextItem = ({ children }) => (
    <li className="fruit-item">{children}</li>
  );

  // Transform strings to objects for the component
  const data = items.map(item => ({ children: item }));

  return (
    <ul className="fruit-list">
      <RepeaterList data={data} component={TextItem} />
    </ul>
  );
}
```

### Card Repeater
```tsx
import { Card, Text, Button } from '@delightui/components';

function CardRepeaterExample() {
  const products = [
    { id: 1, name: 'Laptop', price: 999, description: 'High-performance laptop' },
    { id: 2, name: 'Phone', price: 699, description: 'Latest smartphone' },
    { id: 3, name: 'Tablet', price: 399, description: 'Portable tablet device' },
  ];

  const ProductCard = ({ name, price, description, onAddToCart }) => (
    <Card className="product-card">
      <Text type="Heading" size="Medium">{name}</Text>
      <Text type="Body" color="Secondary">{description}</Text>
      <Text type="Heading" size="Small">${price}</Text>
      <Button onClick={() => onAddToCart(id)}>Add to Cart</Button>
    </Card>
  );

  const handleAddToCart = (productId) => {
    console.log('Added to cart:', productId);
  };

  return (
    <div className="product-grid">
      <RepeaterList 
        data={products.map(product => ({ 
          ...product, 
          onAddToCart: handleAddToCart 
        }))} 
        component={ProductCard} 
      />
    </div>
  );
}
```

### Navigation Menu
```tsx
function NavigationExample() {
  const menuItems = [
    { label: 'Home', href: '/', icon: 'Home' },
    { label: 'Products', href: '/products', icon: 'ShoppingBag' },
    { label: 'About', href: '/about', icon: 'Info' },
    { label: 'Contact', href: '/contact', icon: 'Mail' },
  ];

  const MenuItem = ({ label, href, icon }) => (
    <a href={href} className="menu-item">
      <Icon icon={icon} size="Small" />
      <span>{label}</span>
    </a>
  );

  return (
    <nav className="navigation">
      <RepeaterList data={menuItems} component={MenuItem} />
    </nav>
  );
}
```

### Status List
```tsx
function StatusListExample() {
  const statuses = [
    { id: 1, message: 'System is running normally', type: 'success', timestamp: '2024-01-15 10:30:00' },
    { id: 2, message: 'Minor delay in processing', type: 'warning', timestamp: '2024-01-15 10:25:00' },
    { id: 3, message: 'Maintenance completed', type: 'info', timestamp: '2024-01-15 10:20:00' },
  ];

  const StatusItem = ({ message, type, timestamp }) => (
    <div className={`status-item status-${type}`}>
      <div className="status-message">{message}</div>
      <div className="status-timestamp">{timestamp}</div>
    </div>
  );

  return (
    <div className="status-feed">
      <RepeaterList data={statuses} component={StatusItem} />
    </div>
  );
}
```

### Comment Thread
```tsx
function CommentThreadExample() {
  const comments = [
    { id: 1, author: 'Alice', content: 'Great post!', likes: 5, timestamp: '2 hours ago' },
    { id: 2, author: 'Bob', content: 'Thanks for sharing this.', likes: 2, timestamp: '1 hour ago' },
    { id: 3, author: 'Charlie', content: 'Very informative.', likes: 8, timestamp: '30 minutes ago' },
  ];

  const CommentItem = ({ author, content, likes, timestamp }) => (
    <div className="comment">
      <div className="comment-header">
        <strong>{author}</strong>
        <span className="comment-time">{timestamp}</span>
      </div>
      <div className="comment-content">{content}</div>
      <div className="comment-actions">
        <button className="like-button">👍 {likes}</button>
        <button className="reply-button">Reply</button>
      </div>
    </div>
  );

  return (
    <div className="comment-thread">
      <RepeaterList data={comments} component={CommentItem} />
    </div>
  );
}
```