502 lines
20 KiB
TypeScript
502 lines
20 KiB
TypeScript
|
import { useState, useRef, useEffect } from 'react'
|
|||
|
|
import { useForm } from 'react-hook-form'
|
|||
|
|
import { zodResolver } from '@hookform/resolvers/zod'
|
|||
|
|
import { z } from 'zod'
|
|||
|
|
import { marathonsApi } from '@/api'
|
|||
|
|
import type { Marathon, GameProposalMode } from '@/types'
|
|||
|
|
import { NeonButton, Input } from '@/components/ui'
|
|||
|
|
import { useToast } from '@/store/toast'
|
|||
|
|
import {
|
|||
|
|
X, Camera, Trash2, Loader2, Save, Globe, Lock, Users, UserCog, Sparkles, Zap
|
|||
|
|
} from 'lucide-react'
|
|||
|
|
|
|||
|
|
const settingsSchema = z.object({
|
|||
|
|
title: z.string().min(1, 'Название обязательно').max(100, 'Максимум 100 символов'),
|
|||
|
|
description: z.string().optional(),
|
|||
|
|
start_date: z.string().min(1, 'Дата начала обязательна'),
|
|||
|
|
is_public: z.boolean(),
|
|||
|
|
game_proposal_mode: z.enum(['all_participants', 'organizer_only']),
|
|||
|
|
auto_events_enabled: z.boolean(),
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
type SettingsForm = z.infer<typeof settingsSchema>
|
|||
|
|
|
|||
|
|
interface MarathonSettingsModalProps {
|
|||
|
|
marathon: Marathon
|
|||
|
|
isOpen: boolean
|
|||
|
|
onClose: () => void
|
|||
|
|
onUpdate: (marathon: Marathon) => void
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
export function MarathonSettingsModal({
|
|||
|
|
marathon,
|
|||
|
|
isOpen,
|
|||
|
|
onClose,
|
|||
|
|
onUpdate,
|
|||
|
|
}: MarathonSettingsModalProps) {
|
|||
|
|
const toast = useToast()
|
|||
|
|
const fileInputRef = useRef<HTMLInputElement>(null)
|
|||
|
|
|
|||
|
|
const [isUploading, setIsUploading] = useState(false)
|
|||
|
|
const [isDeleting, setIsDeleting] = useState(false)
|
|||
|
|
const [coverPreview, setCoverPreview] = useState<string | null>(null)
|
|||
|
|
|
|||
|
|
const {
|
|||
|
|
register,
|
|||
|
|
handleSubmit,
|
|||
|
|
watch,
|
|||
|
|
setValue,
|
|||
|
|
reset,
|
|||
|
|
formState: { errors, isSubmitting, isDirty },
|
|||
|
|
} = useForm<SettingsForm>({
|
|||
|
|
resolver: zodResolver(settingsSchema),
|
|||
|
|
defaultValues: {
|
|||
|
|
title: marathon.title,
|
|||
|
|
description: marathon.description || '',
|
|||
|
|
start_date: marathon.start_date
|
|||
|
|
? new Date(marathon.start_date).toISOString().slice(0, 16)
|
|||
|
|
: '',
|
|||
|
|
is_public: marathon.is_public,
|
|||
|
|
game_proposal_mode: marathon.game_proposal_mode as GameProposalMode,
|
|||
|
|
auto_events_enabled: marathon.auto_events_enabled,
|
|||
|
|
},
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
const isPublic = watch('is_public')
|
|||
|
|
const gameProposalMode = watch('game_proposal_mode')
|
|||
|
|
const autoEventsEnabled = watch('auto_events_enabled')
|
|||
|
|
|
|||
|
|
// Reset form when marathon changes
|
|||
|
|
useEffect(() => {
|
|||
|
|
reset({
|
|||
|
|
title: marathon.title,
|
|||
|
|
description: marathon.description || '',
|
|||
|
|
start_date: marathon.start_date
|
|||
|
|
? new Date(marathon.start_date).toISOString().slice(0, 16)
|
|||
|
|
: '',
|
|||
|
|
is_public: marathon.is_public,
|
|||
|
|
game_proposal_mode: marathon.game_proposal_mode as GameProposalMode,
|
|||
|
|
auto_events_enabled: marathon.auto_events_enabled,
|
|||
|
|
})
|
|||
|
|
setCoverPreview(null)
|
|||
|
|
}, [marathon, reset])
|
|||
|
|
|
|||
|
|
// Handle escape key
|
|||
|
|
useEffect(() => {
|
|||
|
|
const handleKeyDown = (e: KeyboardEvent) => {
|
|||
|
|
if (e.key === 'Escape' && isOpen) {
|
|||
|
|
onClose()
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
window.addEventListener('keydown', handleKeyDown)
|
|||
|
|
return () => window.removeEventListener('keydown', handleKeyDown)
|
|||
|
|
}, [isOpen, onClose])
|
|||
|
|
|
|||
|
|
// Prevent body scroll when modal is open
|
|||
|
|
useEffect(() => {
|
|||
|
|
if (isOpen) {
|
|||
|
|
document.body.style.overflow = 'hidden'
|
|||
|
|
} else {
|
|||
|
|
document.body.style.overflow = ''
|
|||
|
|
}
|
|||
|
|
return () => {
|
|||
|
|
document.body.style.overflow = ''
|
|||
|
|
}
|
|||
|
|
}, [isOpen])
|
|||
|
|
|
|||
|
|
const onSubmit = async (data: SettingsForm) => {
|
|||
|
|
try {
|
|||
|
|
const updated = await marathonsApi.update(marathon.id, {
|
|||
|
|
title: data.title,
|
|||
|
|
description: data.description || undefined,
|
|||
|
|
start_date: new Date(data.start_date).toISOString(),
|
|||
|
|
is_public: data.is_public,
|
|||
|
|
game_proposal_mode: data.game_proposal_mode,
|
|||
|
|
auto_events_enabled: data.auto_events_enabled,
|
|||
|
|
})
|
|||
|
|
onUpdate(updated)
|
|||
|
|
toast.success('Настройки сохранены')
|
|||
|
|
onClose()
|
|||
|
|
} catch (err: unknown) {
|
|||
|
|
const error = err as { response?: { data?: { detail?: string } } }
|
|||
|
|
toast.error(error.response?.data?.detail || 'Не удалось сохранить настройки')
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const handleCoverClick = () => {
|
|||
|
|
fileInputRef.current?.click()
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const handleCoverChange = async (e: React.ChangeEvent<HTMLInputElement>) => {
|
|||
|
|
const file = e.target.files?.[0]
|
|||
|
|
if (!file) return
|
|||
|
|
|
|||
|
|
if (!file.type.startsWith('image/')) {
|
|||
|
|
toast.error('Файл должен быть изображением')
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
if (file.size > 5 * 1024 * 1024) {
|
|||
|
|
toast.error('Максимальный размер файла 5 МБ')
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// Show preview immediately
|
|||
|
|
const previewUrl = URL.createObjectURL(file)
|
|||
|
|
setCoverPreview(previewUrl)
|
|||
|
|
|
|||
|
|
setIsUploading(true)
|
|||
|
|
try {
|
|||
|
|
const updated = await marathonsApi.uploadCover(marathon.id, file)
|
|||
|
|
onUpdate(updated)
|
|||
|
|
toast.success('Обложка загружена')
|
|||
|
|
} catch (err: unknown) {
|
|||
|
|
const error = err as { response?: { data?: { detail?: string } } }
|
|||
|
|
toast.error(error.response?.data?.detail || 'Не удалось загрузить обложку')
|
|||
|
|
setCoverPreview(null)
|
|||
|
|
} finally {
|
|||
|
|
setIsUploading(false)
|
|||
|
|
// Reset input
|
|||
|
|
if (fileInputRef.current) {
|
|||
|
|
fileInputRef.current.value = ''
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const handleDeleteCover = async () => {
|
|||
|
|
setIsDeleting(true)
|
|||
|
|
try {
|
|||
|
|
const updated = await marathonsApi.deleteCover(marathon.id)
|
|||
|
|
onUpdate(updated)
|
|||
|
|
setCoverPreview(null)
|
|||
|
|
toast.success('Обложка удалена')
|
|||
|
|
} catch (err: unknown) {
|
|||
|
|
const error = err as { response?: { data?: { detail?: string } } }
|
|||
|
|
toast.error(error.response?.data?.detail || 'Не удалось удалить обложку')
|
|||
|
|
} finally {
|
|||
|
|
setIsDeleting(false)
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (!isOpen) return null
|
|||
|
|
|
|||
|
|
const displayCover = coverPreview || marathon.cover_url
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<div className="fixed inset-0 z-50 flex items-center justify-center p-4">
|
|||
|
|
{/* Backdrop */}
|
|||
|
|
<div
|
|||
|
|
className="absolute inset-0 bg-black/70 backdrop-blur-sm animate-in fade-in duration-200"
|
|||
|
|
onClick={onClose}
|
|||
|
|
/>
|
|||
|
|
|
|||
|
|
{/* Modal */}
|
|||
|
|
<div className="relative glass rounded-xl shadow-2xl max-w-2xl w-full max-h-[90vh] overflow-y-auto animate-in zoom-in-95 fade-in duration-200 border border-dark-600 custom-scrollbar">
|
|||
|
|
{/* Header */}
|
|||
|
|
<div className="sticky top-0 z-10 bg-dark-800/95 backdrop-blur-sm border-b border-dark-600 px-6 py-4 flex items-center justify-between">
|
|||
|
|
<h2 className="text-xl font-bold text-white">Настройки марафона</h2>
|
|||
|
|
<button
|
|||
|
|
onClick={onClose}
|
|||
|
|
className="text-gray-400 hover:text-white transition-colors p-1"
|
|||
|
|
>
|
|||
|
|
<X className="w-5 h-5" />
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div className="p-6 space-y-6">
|
|||
|
|
{/* Cover Image */}
|
|||
|
|
<div>
|
|||
|
|
<label className="block text-sm font-medium text-gray-300 mb-3">
|
|||
|
|
Обложка марафона
|
|||
|
|
</label>
|
|||
|
|
<div className="relative group">
|
|||
|
|
<button
|
|||
|
|
type="button"
|
|||
|
|
onClick={handleCoverClick}
|
|||
|
|
disabled={isUploading || isDeleting}
|
|||
|
|
className="relative w-full h-48 rounded-xl overflow-hidden bg-dark-700 border-2 border-dashed border-dark-500 hover:border-neon-500/50 transition-all"
|
|||
|
|
>
|
|||
|
|
{displayCover ? (
|
|||
|
|
<img
|
|||
|
|
src={displayCover}
|
|||
|
|
alt="Обложка марафона"
|
|||
|
|
className="w-full h-full object-cover"
|
|||
|
|
/>
|
|||
|
|
) : (
|
|||
|
|
<div className="w-full h-full flex flex-col items-center justify-center text-gray-500">
|
|||
|
|
<Camera className="w-10 h-10 mb-2" />
|
|||
|
|
<span className="text-sm">Нажмите для загрузки</span>
|
|||
|
|
<span className="text-xs text-gray-600 mt-1">JPG, PNG до 5 МБ</span>
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
{(isUploading || isDeleting) && (
|
|||
|
|
<div className="absolute inset-0 bg-dark-900/80 flex items-center justify-center">
|
|||
|
|
<Loader2 className="w-8 h-8 text-neon-500 animate-spin" />
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
{displayCover && !isUploading && !isDeleting && (
|
|||
|
|
<div className="absolute inset-0 bg-dark-900/70 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity">
|
|||
|
|
<Camera className="w-8 h-8 text-neon-500" />
|
|||
|
|
<span className="ml-2 text-white">Изменить</span>
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
</button>
|
|||
|
|
{displayCover && !isUploading && !isDeleting && (
|
|||
|
|
<button
|
|||
|
|
type="button"
|
|||
|
|
onClick={handleDeleteCover}
|
|||
|
|
className="absolute top-2 right-2 p-2 rounded-lg bg-red-500/20 text-red-400 hover:bg-red-500/30 transition-colors"
|
|||
|
|
>
|
|||
|
|
<Trash2 className="w-4 h-4" />
|
|||
|
|
</button>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
<input
|
|||
|
|
ref={fileInputRef}
|
|||
|
|
type="file"
|
|||
|
|
accept="image/*"
|
|||
|
|
onChange={handleCoverChange}
|
|||
|
|
className="hidden"
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<form onSubmit={handleSubmit(onSubmit)} className="space-y-6">
|
|||
|
|
{/* Title */}
|
|||
|
|
<Input
|
|||
|
|
label="Название"
|
|||
|
|
placeholder="Введите название марафона"
|
|||
|
|
error={errors.title?.message}
|
|||
|
|
{...register('title')}
|
|||
|
|
/>
|
|||
|
|
|
|||
|
|
{/* Description */}
|
|||
|
|
<div>
|
|||
|
|
<label className="block text-sm font-medium text-gray-300 mb-2">
|
|||
|
|
Описание (необязательно)
|
|||
|
|
</label>
|
|||
|
|
<textarea
|
|||
|
|
className="input min-h-[100px] resize-none w-full"
|
|||
|
|
placeholder="Расскажите о вашем марафоне..."
|
|||
|
|
{...register('description')}
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{/* Start date */}
|
|||
|
|
<div>
|
|||
|
|
<label className="block text-sm font-medium text-gray-300 mb-2">
|
|||
|
|
Дата начала
|
|||
|
|
</label>
|
|||
|
|
<input
|
|||
|
|
type="datetime-local"
|
|||
|
|
className="input w-full"
|
|||
|
|
{...register('start_date')}
|
|||
|
|
/>
|
|||
|
|
{errors.start_date && (
|
|||
|
|
<p className="text-red-400 text-xs mt-1">{errors.start_date.message}</p>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{/* Marathon type */}
|
|||
|
|
<div>
|
|||
|
|
<label className="block text-sm font-medium text-gray-300 mb-3">
|
|||
|
|
Тип марафона
|
|||
|
|
</label>
|
|||
|
|
<div className="grid grid-cols-2 gap-3">
|
|||
|
|
<button
|
|||
|
|
type="button"
|
|||
|
|
onClick={() => setValue('is_public', false, { shouldDirty: true })}
|
|||
|
|
className={`
|
|||
|
|
relative p-4 rounded-xl border-2 transition-all duration-300 text-left group
|
|||
|
|
${!isPublic
|
|||
|
|
? 'border-neon-500/50 bg-neon-500/10 shadow-[0_0_14px_rgba(34,211,238,0.08)]'
|
|||
|
|
: 'border-dark-600 bg-dark-700/50 hover:border-dark-500'
|
|||
|
|
}
|
|||
|
|
`}
|
|||
|
|
>
|
|||
|
|
<div className={`
|
|||
|
|
w-10 h-10 rounded-xl mb-3 flex items-center justify-center transition-colors
|
|||
|
|
${!isPublic ? 'bg-neon-500/20' : 'bg-dark-600'}
|
|||
|
|
`}>
|
|||
|
|
<Lock className={`w-5 h-5 ${!isPublic ? 'text-neon-400' : 'text-gray-400'}`} />
|
|||
|
|
</div>
|
|||
|
|
<div className={`font-semibold mb-1 ${!isPublic ? 'text-white' : 'text-gray-300'}`}>
|
|||
|
|
Закрытый
|
|||
|
|
</div>
|
|||
|
|
<div className="text-xs text-gray-500">
|
|||
|
|
Вход только по коду приглашения
|
|||
|
|
</div>
|
|||
|
|
{!isPublic && (
|
|||
|
|
<div className="absolute top-3 right-3">
|
|||
|
|
<Sparkles className="w-4 h-4 text-neon-400" />
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
</button>
|
|||
|
|
|
|||
|
|
<button
|
|||
|
|
type="button"
|
|||
|
|
onClick={() => setValue('is_public', true, { shouldDirty: true })}
|
|||
|
|
className={`
|
|||
|
|
relative p-4 rounded-xl border-2 transition-all duration-300 text-left group
|
|||
|
|
${isPublic
|
|||
|
|
? 'border-accent-500/50 bg-accent-500/10 shadow-[0_0_14px_rgba(139,92,246,0.08)]'
|
|||
|
|
: 'border-dark-600 bg-dark-700/50 hover:border-dark-500'
|
|||
|
|
}
|
|||
|
|
`}
|
|||
|
|
>
|
|||
|
|
<div className={`
|
|||
|
|
w-10 h-10 rounded-xl mb-3 flex items-center justify-center transition-colors
|
|||
|
|
${isPublic ? 'bg-accent-500/20' : 'bg-dark-600'}
|
|||
|
|
`}>
|
|||
|
|
<Globe className={`w-5 h-5 ${isPublic ? 'text-accent-400' : 'text-gray-400'}`} />
|
|||
|
|
</div>
|
|||
|
|
<div className={`font-semibold mb-1 ${isPublic ? 'text-white' : 'text-gray-300'}`}>
|
|||
|
|
Открытый
|
|||
|
|
</div>
|
|||
|
|
<div className="text-xs text-gray-500">
|
|||
|
|
Виден всем пользователям
|
|||
|
|
</div>
|
|||
|
|
{isPublic && (
|
|||
|
|
<div className="absolute top-3 right-3">
|
|||
|
|
<Sparkles className="w-4 h-4 text-accent-400" />
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{/* Game proposal mode */}
|
|||
|
|
<div>
|
|||
|
|
<label className="block text-sm font-medium text-gray-300 mb-3">
|
|||
|
|
Кто может предлагать игры
|
|||
|
|
</label>
|
|||
|
|
<div className="grid grid-cols-2 gap-3">
|
|||
|
|
<button
|
|||
|
|
type="button"
|
|||
|
|
onClick={() => setValue('game_proposal_mode', 'all_participants', { shouldDirty: true })}
|
|||
|
|
className={`
|
|||
|
|
relative p-4 rounded-xl border-2 transition-all duration-300 text-left
|
|||
|
|
${gameProposalMode === 'all_participants'
|
|||
|
|
? 'border-neon-500/50 bg-neon-500/10 shadow-[0_0_14px_rgba(34,211,238,0.08)]'
|
|||
|
|
: 'border-dark-600 bg-dark-700/50 hover:border-dark-500'
|
|||
|
|
}
|
|||
|
|
`}
|
|||
|
|
>
|
|||
|
|
<div className={`
|
|||
|
|
w-10 h-10 rounded-xl mb-3 flex items-center justify-center transition-colors
|
|||
|
|
${gameProposalMode === 'all_participants' ? 'bg-neon-500/20' : 'bg-dark-600'}
|
|||
|
|
`}>
|
|||
|
|
<Users className={`w-5 h-5 ${gameProposalMode === 'all_participants' ? 'text-neon-400' : 'text-gray-400'}`} />
|
|||
|
|
</div>
|
|||
|
|
<div className={`font-semibold mb-1 ${gameProposalMode === 'all_participants' ? 'text-white' : 'text-gray-300'}`}>
|
|||
|
|
Все участники
|
|||
|
|
</div>
|
|||
|
|
<div className="text-xs text-gray-500">
|
|||
|
|
С модерацией организатором
|
|||
|
|
</div>
|
|||
|
|
{gameProposalMode === 'all_participants' && (
|
|||
|
|
<div className="absolute top-3 right-3">
|
|||
|
|
<Sparkles className="w-4 h-4 text-neon-400" />
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
</button>
|
|||
|
|
|
|||
|
|
<button
|
|||
|
|
type="button"
|
|||
|
|
onClick={() => setValue('game_proposal_mode', 'organizer_only', { shouldDirty: true })}
|
|||
|
|
className={`
|
|||
|
|
relative p-4 rounded-xl border-2 transition-all duration-300 text-left
|
|||
|
|
${gameProposalMode === 'organizer_only'
|
|||
|
|
? 'border-accent-500/50 bg-accent-500/10 shadow-[0_0_14px_rgba(139,92,246,0.08)]'
|
|||
|
|
: 'border-dark-600 bg-dark-700/50 hover:border-dark-500'
|
|||
|
|
}
|
|||
|
|
`}
|
|||
|
|
>
|
|||
|
|
<div className={`
|
|||
|
|
w-10 h-10 rounded-xl mb-3 flex items-center justify-center transition-colors
|
|||
|
|
${gameProposalMode === 'organizer_only' ? 'bg-accent-500/20' : 'bg-dark-600'}
|
|||
|
|
`}>
|
|||
|
|
<UserCog className={`w-5 h-5 ${gameProposalMode === 'organizer_only' ? 'text-accent-400' : 'text-gray-400'}`} />
|
|||
|
|
</div>
|
|||
|
|
<div className={`font-semibold mb-1 ${gameProposalMode === 'organizer_only' ? 'text-white' : 'text-gray-300'}`}>
|
|||
|
|
Только организатор
|
|||
|
|
</div>
|
|||
|
|
<div className="text-xs text-gray-500">
|
|||
|
|
Без модерации
|
|||
|
|
</div>
|
|||
|
|
{gameProposalMode === 'organizer_only' && (
|
|||
|
|
<div className="absolute top-3 right-3">
|
|||
|
|
<Sparkles className="w-4 h-4 text-accent-400" />
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{/* Auto events toggle */}
|
|||
|
|
<div>
|
|||
|
|
<label className="block text-sm font-medium text-gray-300 mb-3">
|
|||
|
|
Автоматические события
|
|||
|
|
</label>
|
|||
|
|
<button
|
|||
|
|
type="button"
|
|||
|
|
onClick={() => setValue('auto_events_enabled', !autoEventsEnabled, { shouldDirty: true })}
|
|||
|
|
className={`
|
|||
|
|
w-full p-4 rounded-xl border-2 transition-all duration-300 text-left flex items-center gap-4
|
|||
|
|
${autoEventsEnabled
|
|||
|
|
? 'border-yellow-500/50 bg-yellow-500/10'
|
|||
|
|
: 'border-dark-600 bg-dark-700/50 hover:border-dark-500'
|
|||
|
|
}
|
|||
|
|
`}
|
|||
|
|
>
|
|||
|
|
<div className={`
|
|||
|
|
w-10 h-10 rounded-xl flex items-center justify-center transition-colors flex-shrink-0
|
|||
|
|
${autoEventsEnabled ? 'bg-yellow-500/20' : 'bg-dark-600'}
|
|||
|
|
`}>
|
|||
|
|
<Zap className={`w-5 h-5 ${autoEventsEnabled ? 'text-yellow-400' : 'text-gray-400'}`} />
|
|||
|
|
</div>
|
|||
|
|
<div className="flex-1">
|
|||
|
|
<div className={`font-semibold ${autoEventsEnabled ? 'text-white' : 'text-gray-300'}`}>
|
|||
|
|
{autoEventsEnabled ? 'Включены' : 'Выключены'}
|
|||
|
|
</div>
|
|||
|
|
<div className="text-xs text-gray-500">
|
|||
|
|
Случайные бонусные события во время марафона
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div className={`
|
|||
|
|
w-12 h-7 rounded-full transition-colors relative flex-shrink-0
|
|||
|
|
${autoEventsEnabled ? 'bg-yellow-500' : 'bg-dark-600'}
|
|||
|
|
`}>
|
|||
|
|
<div className={`
|
|||
|
|
absolute top-1 w-5 h-5 rounded-full bg-white shadow transition-transform
|
|||
|
|
${autoEventsEnabled ? 'left-6' : 'left-1'}
|
|||
|
|
`} />
|
|||
|
|
</div>
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{/* Actions */}
|
|||
|
|
<div className="flex gap-3 pt-4 border-t border-dark-600">
|
|||
|
|
<NeonButton
|
|||
|
|
type="button"
|
|||
|
|
variant="outline"
|
|||
|
|
className="flex-1"
|
|||
|
|
onClick={onClose}
|
|||
|
|
>
|
|||
|
|
Отмена
|
|||
|
|
</NeonButton>
|
|||
|
|
<NeonButton
|
|||
|
|
type="submit"
|
|||
|
|
className="flex-1"
|
|||
|
|
isLoading={isSubmitting}
|
|||
|
|
disabled={!isDirty}
|
|||
|
|
icon={<Save className="w-4 h-4" />}
|
|||
|
|
>
|
|||
|
|
Сохранить
|
|||
|
|
</NeonButton>
|
|||
|
|
</div>
|
|||
|
|
</form>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
)
|
|||
|
|
}
|