131 lines
4.4 KiB
TypeScript
131 lines
4.4 KiB
TypeScript
"use client";
|
|
|
|
import { useState, useEffect } from "react";
|
|
import {
|
|
Accordion,
|
|
AccordionContent,
|
|
AccordionItem,
|
|
AccordionTrigger,
|
|
} from "@/components/ui/accordion";
|
|
import { Loader2, HelpCircle } from "lucide-react";
|
|
import { Dictionary } from "@/lib/IDict";
|
|
import { pb } from "@/lib/pb";
|
|
|
|
interface PBFaq {
|
|
id: string;
|
|
question: string;
|
|
answer: string;
|
|
lang: string;
|
|
order: number;
|
|
}
|
|
|
|
export function FAQ({ dict, lang }: { dict: Dictionary["faq"]; lang: string }) {
|
|
const [faqs, setFaqs] = useState<PBFaq[]>([]);
|
|
const [loading, setLoading] = useState(true);
|
|
|
|
useEffect(() => {
|
|
async function fetchFaqs() {
|
|
try {
|
|
setLoading(true);
|
|
const records = await pb.collection(`faqs_${lang}`).getFullList<PBFaq>({
|
|
sort: "order",
|
|
requestKey: null,
|
|
});
|
|
setFaqs(records);
|
|
} catch (error) {
|
|
console.error("Ошибка загрузки FAQ:", error);
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
}
|
|
fetchFaqs();
|
|
}, [lang]);
|
|
|
|
// Функция для красивого рендеринга текста с поддержкой переносов и буллитов
|
|
const formatAnswer = (text: string) => {
|
|
return text.split("\n").map((line, i) => {
|
|
const trimmedLine = line.trim();
|
|
|
|
// Если строка начинается с буллита
|
|
if (trimmedLine.startsWith("•")) {
|
|
return (
|
|
<div key={i} className="flex gap-3 mb-2 pl-2 group">
|
|
<span className="text-secondary font-bold group-hover:animate-pulse">
|
|
•
|
|
</span>
|
|
<span className="text-muted-foreground/90">
|
|
{trimmedLine.replace("•", "").trim()}
|
|
</span>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// Если строка пустая — это отступ между абзацами
|
|
if (!trimmedLine) return <div key={i} className="h-4" />;
|
|
|
|
// Обычный параграф
|
|
return (
|
|
<p
|
|
key={i}
|
|
className="mb-3 last:mb-0 text-muted-foreground/90 leading-relaxed"
|
|
>
|
|
{line}
|
|
</p>
|
|
);
|
|
});
|
|
};
|
|
|
|
return (
|
|
<section
|
|
id="faq"
|
|
className="py-32 px-4 container mx-auto max-w-4xl relative overflow-hidden"
|
|
>
|
|
{/* Мягкий фон */}
|
|
<div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[100vw] h-[500px] bg-primary/5 blur-[120px] rounded-full pointer-events-none -z-10" />
|
|
|
|
<div className="flex flex-col items-center mb-16">
|
|
<div className="bg-primary/10 p-3 rounded-2xl mb-6 border border-primary/20">
|
|
<HelpCircle className="w-8 h-8 text-primary" />
|
|
</div>
|
|
<h2 className="text-4xl md:text-5xl font-black tracking-tight text-center">
|
|
{dict.title}
|
|
</h2>
|
|
</div>
|
|
|
|
{loading ? (
|
|
<div className="flex flex-col items-center justify-center py-20 text-primary opacity-50">
|
|
<Loader2 className="w-10 h-10 animate-spin mb-4" />
|
|
<span className="text-xs tracking-[0.3em] uppercase font-mono">
|
|
Synchronizing_Knowledge...
|
|
</span>
|
|
</div>
|
|
) : faqs.length === 0 ? (
|
|
<div className="text-center py-20 border border-dashed border-border/50 rounded-[2.5rem] bg-card/20">
|
|
<p className="text-muted-foreground font-mono text-sm uppercase tracking-widest">
|
|
0 protocols found in cache.
|
|
</p>
|
|
</div>
|
|
) : (
|
|
<Accordion type="single" collapsible className="w-full space-y-4">
|
|
{faqs.map((faq) => (
|
|
<AccordionItem
|
|
key={faq.id}
|
|
value={`item-${faq.id}`}
|
|
className="border border-border/40 bg-card/30 backdrop-blur-md rounded-[1.5rem] px-6 transition-all duration-300 hover:border-primary/30 data-[state=open]:border-primary/50 data-[state=open]:bg-card/50 shadow-sm"
|
|
>
|
|
<AccordionTrigger className="text-left text-foreground hover:no-underline hover:text-primary transition-colors font-bold text-lg md:text-xl py-6">
|
|
{faq.question}
|
|
</AccordionTrigger>
|
|
<AccordionContent className="pb-8 text-base antialiased">
|
|
<div className="border-t border-border/30 pt-6">
|
|
{formatAnswer(faq.answer)}
|
|
</div>
|
|
</AccordionContent>
|
|
</AccordionItem>
|
|
))}
|
|
</Accordion>
|
|
)}
|
|
</section>
|
|
);
|
|
}
|