FAQ компонент

Обзор

FAQ (Часто задаваемые вопросы) компонент используется на лендинге для отображения часто задаваемых вопросов и ответов в формате аккордеона. Этот компонент позволяет организовать информацию в компактном формате, где пользователи могут раскрывать только интересующие их вопросы.

Компонент состоит из трех основных частей:

FAQ.tsx - основной контейнер, который включает заголовок, описание и список вопросов
FAQList.tsx - компонент-обертка для организации списка вопросов в аккордеон
FAQItem.tsx - отдельный элемент вопрос-ответ

Структура компонентов

1. FAQ.tsx

Основной контейнерный компонент, который содержит секцию FAQ, заголовок, описание и массив вопросов с ответами.

"use client";

import FAQList from "./FAQList";
import { Button } from "@/components/ui/button";

export default function FAQ() {
  const faqItems = [
    {
      question: "Что включено в boilerplate?",
      answer: "Наш boilerplate включает полноценный фронтенд на Next.js 15...",
    },
    // Другие вопросы и ответы
  ];

  return (
    <section id="faq" className="section py-20 bg-gray-900">
      <div className="container">
        <div className="text-center mb-16">
          <h2 className="mb-4">Часто задаваемые вопросы</h2>
          <p className="text-xl text-gray-400 max-w-3xl mx-auto">
            Все, что вам нужно знать о нашем boilerplate.
          </p>
        </div>

        <FAQList items={faqItems} defaultValue="item-0" />

        <div className="mt-16 text-center">
          <p className="mb-6">Остались вопросы?</p>
          <Button asChild>
            <a href="mailto:support@example.com">Связаться с нами</a>
          </Button>
        </div>
      </div>
    </section>
  );
}

2. FAQList.tsx

Компонент, который принимает массив вопросов и ответов и выводит их в виде аккордеона. Использует компонент Accordion из библиотеки Shadcn UI.

import { Accordion } from "@/components/ui/accordion";
import FAQItem from "./FAQItem";

interface FAQListProps {
  items: Array<{
    question: string;
    answer: string;
  }>;
  defaultValue?: string;
}

export default function FAQList({ items, defaultValue }: FAQListProps) {
  return (
    <Accordion
      type="single"
      collapsible
      defaultValue={defaultValue}
      className="max-w-3xl mx-auto"
    >
      {items.map((item, index) => (
        <FAQItem
          key={index}
          question={item.question}
          answer={item.answer}
          value={`item-${index}`}
        />
      ))}
    </Accordion>
  );
}

3. FAQItem.tsx

Компонент для отдельного элемента вопрос-ответ. Использует компоненты AccordionItem,AccordionTrigger и AccordionContent из Shadcn UI.

import {
  AccordionItem,
  AccordionTrigger,
  AccordionContent,
} from "@/components/ui/accordion";

interface FAQItemProps {
  question: string;
  answer: string;
  value: string;
}

export default function FAQItem({ question, answer, value }: FAQItemProps) {
  return (
    <AccordionItem value={value} className="border-b border-gray-800 py-2">
      <AccordionTrigger className="text-xl font-semibold hover:no-underline">
        {question}
      </AccordionTrigger>
      <AccordionContent className="text-gray-400">
        <p>{answer}</p>
      </AccordionContent>
    </AccordionItem>
  );
}

Использование

Для добавления секции FAQ на страницу, импортируйте и используйте компонент FAQ:

import FAQ from "@/app/(landing)/_components/FAQ";

export default function LandingPage() {
  return (
    <main>
      {/* Другие секции страницы */}
      <FAQ />
    </main>
  );
}

Если вам нужно использовать компонент FAQ с собственными вопросами в другом месте, вы можете создать собственный экземпляр с другими данными:

import FAQList from "@/app/(landing)/_components/FAQList";

export default function CustomFAQSection() {
  const customFaqItems = [
    {
      question: "Вопрос 1?",
      answer: "Ответ на вопрос 1.",
    },
    {
      question: "Вопрос 2?",
      answer: "Ответ на вопрос 2.",
    },
    // Другие вопросы
  ];

  return (
    <section className="my-section">
      <h2>Наши FAQ</h2>
      <FAQList items={customFaqItems} defaultValue="item-0" />
    </section>
  );
}

Кастомизация

Изменение стилей

Вы можете настроить внешний вид компонентов FAQ, изменяя классы Tailwind CSS в соответствующих компонентах. Основные места для изменения стилей:

В FAQ.tsx - для изменения секции, заголовков и общего контейнера
В FAQList.tsx - для изменения аккордеона и его размеров
В FAQItem.tsx - для изменения стилей отдельных вопросов и ответов

Примеры изменения стилей:

// Изменение стиля вопроса в FAQItem.tsx
<AccordionTrigger className="text-xl font-bold text-primary hover:text-primary-dark hover:no-underline">
  {question}
</AccordionTrigger>

// Изменение стиля ответа в FAQItem.tsx
<AccordionContent className="text-gray-600 dark:text-gray-300 text-base">
  <p>{answer}</p>
</AccordionContent>

Добавление расширенного контента

В ответах вы также можете использовать расширенный контент, например, ссылки, списки или другие HTML-элементы:

// Модифицированный FAQItem для поддержки HTML в ответах
import {
  AccordionItem,
  AccordionTrigger,
  AccordionContent,
} from "@/components/ui/accordion";

interface FAQItemProps {
  question: string;
  answer: React.ReactNode; // Изменено с string на ReactNode
  value: string;
}

export default function FAQItem({ question, answer, value }: FAQItemProps) {
  return (
    <AccordionItem value={value} className="border-b border-gray-800 py-2">
      <AccordionTrigger className="text-xl font-semibold hover:no-underline">
        {question}
      </AccordionTrigger>
      <AccordionContent className="text-gray-400">
        {typeof answer === 'string' ? <p>{answer}</p> : answer}
      </AccordionContent>
    </AccordionItem>
  );
}

Используя модифицированный компонент:

const faqItems = [
  {
    question: "Как установить проект?",
    answer: (
      <div>
        <p>Следуйте этим шагам:</p>
        <ol className="list-decimal ml-5 mt-2 space-y-1">
          <li>Клонируйте репозиторий</li>
          <li>Выполните команду `npm install`</li>
          <li>Запустите проект с помощью `npm run dev`</li>
        </ol>
        <p className="mt-2">
          Дополнительную информацию можно найти в 
          <a href="/docs" className="text-blue-500 hover:underline"> документации</a>.
        </p>
      </div>
    ),
  },
  // Другие вопросы
];

Использование без аккордеона

Если вам нужно отобразить FAQ без аккордеона, вы можете создать альтернативный компонент:

export function SimpleFAQList({ items }: { items: Array<{ question: string; answer: string }> }) {
  return (
    <div className="space-y-8 max-w-3xl mx-auto">
      {items.map((item, index) => (
        <div key={index} className="border-b border-gray-800 pb-6">
          <h3 className="text-xl font-semibold mb-3">{item.question}</h3>
          <p className="text-gray-400">{item.answer}</p>
        </div>
      ))}
    </div>
  );
}

Заключение

Компонент FAQ - это удобный способ организации ответов на часто задаваемые вопросы на вашем сайте. Используя аккордеон, вы можете представить большой объем информации в компактном и удобном для пользователей формате.

Не забывайте, что хорошо составленный раздел FAQ может значительно снизить нагрузку на службу поддержки и повысить удовлетворенность пользователей.