finsignal-segment-control/README.md

Segment control and news feed components for React web applications

# FinSignal UI Components

Набор UI компонентов для React веб-приложений: segment control и новостной фид.

## Установка

```bash
npm install finsignal-segment-control
```

## Компоненты

### SegmentControl

Переключатель вкладок с плавной анимацией.

```tsx
import { SegmentControl } from 'finsignal-segment-control';

function App() {
  const [selectedValue, setSelectedValue] = React.useState('option1');

  return (
    <SegmentControl
      options={[
        { value: 'option1', label: 'Опция 1' },
        { value: 'option2', label: 'Опция 2' },
        { value: 'option3', label: 'Опция 3' },
      ]}
      value={selectedValue}
      onValueChange={setSelectedValue}
    />
  );
}
```

### NewsFeed

Компонент новостной ленты с красивыми снипеттами.

```tsx
import { NewsFeed } from 'finsignal-segment-control';

function App() {
  return (
    <NewsFeed 
      onItemClick={(item) => console.log('Clicked:', item)}
    />
  );
}
```

С кастомными новостями:

```tsx
const customNews = [
  {
    id: '1',
    title: 'Заголовок новости',
    snippet: 'Краткое описание новости...',
    source: 'Источник',
    time: '5 мин назад',
    category: 'Категория'
  }
];

<NewsFeed 
  items={customNews}
  onItemClick={(item) => console.log(item)}
/>
```

## API

### SegmentControlProps

| Prop | Тип | Обязательно | Описание |
|------|-----|-------------|----------|
| `options` | `SegmentOption[]` | Да | Массив опций для отображения |
| `value` | `string` | Да | Текущее выбранное значение |
| `onValueChange` | `(value: string) => void` | Да | Callback при изменении значения |
| `className` | `string` | Нет | Дополнительные CSS классы |

### SegmentOption

| Свойство | Тип | Описание |
|----------|-----|----------|
| `value` | `string` | Уникальное значение опции |
| `label` | `string` | Отображаемый текст |

## Стилизация

Компонент использует CSS классы:
- `.segment-control` - контейнер
- `.segment-option` - кнопка опции
- `.segment-option.active` - активная опция

Можно переопределить стили или добавить свой className.

## Требования

- React >= 18.0.0

## Лицензия

MIT