64 lines
1.9 KiB
JavaScript
64 lines
1.9 KiB
JavaScript
import { Sparkles, Tag, Layers } from 'lucide-react'
|
|
import './OnboardingPost.css'
|
|
|
|
export default function OnboardingPost({ type, onAction, onDismiss }) {
|
|
const content = {
|
|
welcome: {
|
|
icon: Sparkles,
|
|
title: '👋 Добро пожаловать в Nakama!',
|
|
text: 'Здесь ты найдешь furry и anime контент от сообщества',
|
|
action: 'Настроить интересы',
|
|
color: '#007AFF'
|
|
},
|
|
tags: {
|
|
icon: Tag,
|
|
title: '🎯 Настрой свою ленту',
|
|
text: 'Выбери теги, чтобы видеть только интересный контент',
|
|
action: 'Выбрать теги',
|
|
color: '#FF8A33'
|
|
},
|
|
media: {
|
|
icon: Layers,
|
|
title: '🎨 Открой для себя больше',
|
|
text: 'Furry, Anime арт и Music — всё в одном месте',
|
|
action: 'Посмотреть',
|
|
color: '#9b59b6'
|
|
}
|
|
}
|
|
|
|
const current = content[type] || content.welcome
|
|
const Icon = current.icon
|
|
|
|
return (
|
|
<div className="onboarding-post">
|
|
<div className="onboarding-icon" style={{ backgroundColor: `${current.color}15` }}>
|
|
<Icon size={32} color={current.color} strokeWidth={2} />
|
|
</div>
|
|
|
|
<div className="onboarding-content">
|
|
<h3>{current.title}</h3>
|
|
<p>{current.text}</p>
|
|
|
|
<div className="onboarding-actions">
|
|
<button
|
|
className="onboarding-btn primary"
|
|
onClick={onAction}
|
|
style={{ backgroundColor: current.color }}
|
|
>
|
|
{current.action}
|
|
</button>
|
|
{onDismiss && (
|
|
<button
|
|
className="onboarding-btn secondary"
|
|
onClick={onDismiss}
|
|
>
|
|
Позже
|
|
</button>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|