111 lines
3.5 KiB
TypeScript
111 lines
3.5 KiB
TypeScript
import {
|
|
Accordion,
|
|
AccordionContent,
|
|
AccordionItem,
|
|
AccordionTrigger,
|
|
} from "@/components/ui/accordion";
|
|
import { 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;
|
|
}
|
|
|
|
// Теперь это Server Component
|
|
export async function FAQ({
|
|
dict,
|
|
lang,
|
|
}: {
|
|
dict: Dictionary["faq"];
|
|
lang: string;
|
|
}) {
|
|
let faqs: PBFaq[] = [];
|
|
|
|
try {
|
|
faqs = await pb.collection(`faqs_${lang}`).getFullList<PBFaq>({
|
|
sort: "order",
|
|
fetch: (url, config) =>
|
|
fetch(url, { ...config, next: { revalidate: 86400 } }), // Кэшируем на сутки
|
|
});
|
|
} catch (error) {
|
|
console.error("Ошибка загрузки FAQ:", error);
|
|
}
|
|
|
|
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"
|
|
>
|
|
<div className="absolute inset-0 bg-[radial-gradient(circle_at_center,_var(--tw-gradient-stops))] from-primary/10 dark:from-primary/20 via-transparent to-transparent blur-[100px] 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>
|
|
|
|
{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>
|
|
);
|
|
}
|