94 lines
3.7 KiB
TypeScript
94 lines
3.7 KiB
TypeScript
import {
|
|
Accordion,
|
|
AccordionContent,
|
|
AccordionItem,
|
|
AccordionTrigger,
|
|
} from "@/components/ui/accordion";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
interface FaqItem {
|
|
id: string;
|
|
question: string;
|
|
answer: string;
|
|
className?: string;
|
|
}
|
|
|
|
interface Faq1Props {
|
|
heading?: string;
|
|
items?: FaqItem[];
|
|
className?: string;
|
|
}
|
|
|
|
const Faq1 = ({
|
|
heading = "پرسش‌های متداول",
|
|
items = [
|
|
{
|
|
id: "faq-1",
|
|
question: "این بخش چه کاربردی دارد؟",
|
|
answer:
|
|
"در این بخش، پاسخ رایج‌ترین پرسش‌های کاربران درباره خدمات، محصولات و نحوه استفاده از سامانه ارائه شده تا بدون نیاز به تماس با پشتیبانی، پاسخ خود را پیدا کنید.",
|
|
},
|
|
{
|
|
id: "faq-2",
|
|
question: "چرا این بخش برای کاربران مفید است؟",
|
|
answer:
|
|
"هدف این بخش کاهش زمان جستجوی اطلاعات، افزایش رضایت کاربران و دسترسی سریع به پاسخ پرسش‌های متداول است.",
|
|
},
|
|
{
|
|
id: "faq-3",
|
|
question: "چگونه یک بخش پرسش‌های متداول مؤثر طراحی کنیم؟",
|
|
answer:
|
|
"پرسش‌های پرتکرار کاربران را جمع‌آوری کنید، برای هرکدام پاسخی دقیق و شفاف بنویسید و آن‌ها را بر اساس موضوع دسته‌بندی کنید.",
|
|
},
|
|
{
|
|
id: "faq-4",
|
|
question: "وجود این بخش چه مزایایی دارد؟",
|
|
answer:
|
|
"این بخش باعث کاهش حجم درخواست‌های پشتیبانی، افزایش سرعت پاسخ‌گویی و بهبود تجربه کاربری می‌شود.",
|
|
},
|
|
{
|
|
id: "faq-5",
|
|
question: "چگونه پرسش‌ها را دسته‌بندی کنیم؟",
|
|
answer:
|
|
"پرسش‌ها را براساس موضوعاتی مانند حساب کاربری، خرید، پرداخت، ارسال، پشتیبانی و تنظیمات گروه‌بندی کنید تا کاربران سریع‌تر پاسخ خود را بیابند.",
|
|
},
|
|
{
|
|
id: "faq-6",
|
|
question: "پاسخ‌ها باید چه میزان جزئیات داشته باشند؟",
|
|
answer:
|
|
"پاسخ‌ها باید کوتاه، دقیق و کاربردی باشند؛ در صورت نیاز می‌توان لینک راهنما یا مستندات تکمیلی را نیز ارائه کرد.",
|
|
},
|
|
{
|
|
id: "faq-7",
|
|
question: "آیا ارجاع به راهنماهای بیشتر مفید است؟",
|
|
answer:
|
|
"بله، لینک به مستندات، آموزش‌ها یا مقالات مرتبط به کاربران کمک می‌کند اطلاعات کامل‌تری دریافت کنند.",
|
|
},
|
|
],
|
|
className,
|
|
}: Faq1Props) => {
|
|
return (
|
|
<section dir="rtl" lang="fa" className={cn("py-32", className)}>
|
|
<div className="container mx-auto max-w-3xl">
|
|
<h1 className="mb-4 text-center text-3xl font-semibold md:mb-11 md:text-xl">
|
|
{heading}
|
|
</h1>
|
|
<Accordion type="single" collapsible className="w-full text-start">
|
|
{items.map((item, index) => (
|
|
<AccordionItem key={index} value={`item-${index}`}>
|
|
<AccordionTrigger className="font-semibold hover:no-underline">
|
|
{item.question}
|
|
</AccordionTrigger>
|
|
<AccordionContent className="text-muted-foreground">
|
|
{item.answer}
|
|
</AccordionContent>
|
|
</AccordionItem>
|
|
))}
|
|
</Accordion>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export { Faq1 };
|