108 lines
3.7 KiB
TypeScript
108 lines
3.7 KiB
TypeScript
|
import { useState, useEffect } from 'react'
|
|||
|
|
import { useParams, useLocation, Link } from 'react-router-dom'
|
|||
|
|
import { contentApi } from '@/api/admin'
|
|||
|
|
import type { StaticContent } from '@/types'
|
|||
|
|
import { GlassCard } from '@/components/ui'
|
|||
|
|
import { ArrowLeft, Loader2, FileText } from 'lucide-react'
|
|||
|
|
|
|||
|
|
// Map routes to content keys
|
|||
|
|
const ROUTE_KEY_MAP: Record<string, string> = {
|
|||
|
|
'/terms': 'terms_of_service',
|
|||
|
|
'/privacy': 'privacy_policy',
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
export function StaticContentPage() {
|
|||
|
|
const { key: paramKey } = useParams<{ key: string }>()
|
|||
|
|
const location = useLocation()
|
|||
|
|
const [content, setContent] = useState<StaticContent | null>(null)
|
|||
|
|
const [isLoading, setIsLoading] = useState(true)
|
|||
|
|
const [error, setError] = useState<string | null>(null)
|
|||
|
|
|
|||
|
|
// Determine content key from route or param
|
|||
|
|
const contentKey = ROUTE_KEY_MAP[location.pathname] || paramKey
|
|||
|
|
|
|||
|
|
useEffect(() => {
|
|||
|
|
if (!contentKey) return
|
|||
|
|
|
|||
|
|
const loadContent = async () => {
|
|||
|
|
setIsLoading(true)
|
|||
|
|
setError(null)
|
|||
|
|
try {
|
|||
|
|
const data = await contentApi.getPublicContent(contentKey)
|
|||
|
|
setContent(data)
|
|||
|
|
} catch {
|
|||
|
|
setError('Контент не найден')
|
|||
|
|
} finally {
|
|||
|
|
setIsLoading(false)
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
loadContent()
|
|||
|
|
}, [contentKey])
|
|||
|
|
|
|||
|
|
if (isLoading) {
|
|||
|
|
return (
|
|||
|
|
<div className="flex flex-col items-center justify-center py-24">
|
|||
|
|
<Loader2 className="w-12 h-12 animate-spin text-neon-500 mb-4" />
|
|||
|
|
<p className="text-gray-400">Загрузка...</p>
|
|||
|
|
</div>
|
|||
|
|
)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (error || !content) {
|
|||
|
|
return (
|
|||
|
|
<div className="max-w-3xl mx-auto">
|
|||
|
|
<GlassCard className="text-center py-16">
|
|||
|
|
<div className="w-20 h-20 mx-auto mb-6 rounded-2xl bg-dark-700 flex items-center justify-center">
|
|||
|
|
<FileText className="w-10 h-10 text-gray-600" />
|
|||
|
|
</div>
|
|||
|
|
<h3 className="text-xl font-semibold text-white mb-2">Страница не найдена</h3>
|
|||
|
|
<p className="text-gray-400 mb-6">Запрашиваемый контент не существует</p>
|
|||
|
|
<Link
|
|||
|
|
to="/"
|
|||
|
|
className="inline-flex items-center gap-2 text-neon-400 hover:text-neon-300 transition-colors"
|
|||
|
|
>
|
|||
|
|
<ArrowLeft className="w-4 h-4" />
|
|||
|
|
На главную
|
|||
|
|
</Link>
|
|||
|
|
</GlassCard>
|
|||
|
|
</div>
|
|||
|
|
)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<div className="max-w-3xl mx-auto">
|
|||
|
|
<Link
|
|||
|
|
to="/"
|
|||
|
|
className="inline-flex items-center gap-2 text-gray-400 hover:text-neon-400 mb-6 transition-colors group"
|
|||
|
|
>
|
|||
|
|
<ArrowLeft className="w-4 h-4 group-hover:-translate-x-1 transition-transform" />
|
|||
|
|
На главную
|
|||
|
|
</Link>
|
|||
|
|
|
|||
|
|
<GlassCard>
|
|||
|
|
<h1 className="text-2xl md:text-3xl font-bold text-white mb-6">{content.title}</h1>
|
|||
|
|
<div
|
|||
|
|
className="prose prose-invert prose-gray max-w-none
|
|||
|
|
prose-headings:text-white prose-headings:font-semibold
|
|||
|
|
prose-p:text-gray-300 prose-p:leading-relaxed
|
|||
|
|
prose-a:text-neon-400 prose-a:no-underline hover:prose-a:text-neon-300
|
|||
|
|
prose-strong:text-white
|
|||
|
|
prose-ul:text-gray-300 prose-ol:text-gray-300
|
|||
|
|
prose-li:marker:text-gray-500
|
|||
|
|
prose-hr:border-dark-600 prose-hr:my-6
|
|||
|
|
prose-img:rounded-xl prose-img:shadow-lg"
|
|||
|
|
dangerouslySetInnerHTML={{ __html: content.content }}
|
|||
|
|
/>
|
|||
|
|
<div className="mt-8 pt-6 border-t border-dark-600 text-sm text-gray-500">
|
|||
|
|
Последнее обновление: {new Date(content.updated_at).toLocaleDateString('ru-RU', {
|
|||
|
|
day: 'numeric',
|
|||
|
|
month: 'long',
|
|||
|
|
year: 'numeric'
|
|||
|
|
})}
|
|||
|
|
</div>
|
|||
|
|
</GlassCard>
|
|||
|
|
</div>
|
|||
|
|
)
|
|||
|
|
}
|