StickerAI-Front/src/components/generation/StyleSelector.tsx

58 lines
1.8 KiB
TypeScript

import React from 'react';
import BlockRenderer from '../blocks/BlockRenderer';
import { homeScreenConfig } from '../../config/homeScreen';
import customAnalyticsService from '../../services/customAnalyticsService';
import { getCurrentUserId } from '../../constants/user';
interface StyleSelectorProps {
selectedStyleButtonId?: string;
onStyleSelect: (style: string, buttonId?: string) => void;
}
/**
* Компонент для выбора стиля генерации
*/
const StyleSelector: React.FC<StyleSelectorProps> = ({
selectedStyleButtonId,
onStyleSelect
}) => {
// Находим заголовок и блок выбора стиля в конфигурации
const titleBlock = homeScreenConfig.homeScreen.blocks.find(block => block.id === 'step2');
const styleBlock = homeScreenConfig.homeScreen.blocks.find(block => block.id === 'styleActions');
if (!titleBlock || !styleBlock) {
return null;
}
// Обработчик выбора стиля
const handleAction = (actionType: string, actionValue: string, blockId?: string, buttonId?: string) => {
if (actionType === 'selectStyle') {
// Отслеживаем событие выбора стиля
const eventName = actionValue === 'chibi' ? 'chibi_style_click' : 'emoji_style_click';
customAnalyticsService.trackEvent({
telegram_id: getCurrentUserId(),
event_category: 'style',
event_name: eventName
});
onStyleSelect(actionValue, buttonId);
}
};
return (
<>
<BlockRenderer
block={titleBlock}
onAction={() => {}}
/>
<BlockRenderer
block={styleBlock}
onAction={handleAction}
selectedButtonId={selectedStyleButtonId}
/>
</>
);
};
export default StyleSelector;