Add static pages and styles

2025-12-20 02:01:51 +07:00
parent 07745ea4ed
commit c645171671
11 changed files with 658 additions and 361 deletions
--- a/frontend/src/pages/StaticContentPage.tsx
+++ b/frontend/src/pages/StaticContentPage.tsx
@@ -0,0 +1,107 @@
+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>
+  )
+}