FinSignal UI Components

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

Установка

npm install finsignal-segment-control

Компоненты

SegmentControl

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

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

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

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

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

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

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