Faqs Component Uses

ℹ️

This component is used to display the faqs anywhere in the site. You can use it in any page or template. It is also used in the home page to display the faqs. You can customize the faqs by using the following options:

Options

ℹ️

The following options are available for the faqs component:

Option	Description	Default
`className`	The class name for the component.	`''`
`itemClassName`	The class name for the faq item.	`''`

Example Usage

ℹ️

The following example shows how to use the faqs component:

import React from "react";
import { Faqs } from "@/@core";
 
export const FaqsComponent = () => (
  <Faqs
    data={[
      {
        question: "How to use this template?",
        answer: `Lorem ipsum dolor sit amet, consectetur adipiscing elit. <a href="#">Sed</a> euismod, nunc ut aliquam mollis, nunc nibh lacinia risus, quis aliquet nunc nunc vel lorem.`,
        open: true,
      },
      {
        question: "How to use for commercial purpose?",
        answer: `Lorem ipsum dolor sit amet, consectetur adipiscing elit. <a href="#">Sed</a> euismod, nunc ut aliquam mollis, nunc nibh lacinia risus, quis aliquet nunc nunc vel lorem.`,
        open: false,
      },
    ]}
  />
);

Customization Options

ℹ️

The following customization options are available for the faqs component:

Option	Description	Default
`className`	The class name for the component.	`''`
`itemClassName`	The class name for the faq item.	`''`
`icon`	The icon for the faq item. `plus` or `arrow`	`plus`

Icon Options

ℹ️

The following icon options are available for the faqs component:

Option	Description	Default
`plus`	The push icon for the faq item. `default`	`''`
`arrow`	The arrow icon for the faq item.	`''`

Example Customization

ℹ️

The following example shows how to customize the faqs component:

const FaqsCustomization = () => (
  <Faqs
    className={"my-10 p-10"}
    itemClassName={"bg-accent/5 p-10 border-2 border-accent/20"}
    icon={"arrow"}
    data={[
      {
        question: "How to use this template?",
        answer: `Lorem ipsum dolor sit amet, consectetur adipiscing elit. <a href="#">Sed</a> euismod, nunc ut aliquam mollis, nunc nibh lacinia risus, quis aliquet nunc nunc vel lorem.`,
        open: true,
      },
      {
        question: "How to use for commercial purpose?",
        answer: `Lorem ipsum dolor sit amet, consectetur adipiscing elit. <a href="#">Sed</a> euismod, nunc ut aliquam mollis, nunc nibh lacinia risus, quis aliquet nunc nunc vel lorem.`,
        open: false,
      },
    ]}
  />
);

Props Table

ℹ️

The following props table shows the available props for the faqs component:

Name	Type	Default	Description
`className`	`string`	`''`	The class name for the component.
`itemClassName`	`string`	`''`	The class name for the faq item.
`data`	`array`	`[]`	The faqs data.
`icon`	`string`	`plus`	The icon for the faq item. `plus` or `arrow`

Faqs Data Structure

ℹ️

The following data structure shows the data required for the faqs component:

const data = [
  {
    question: "How to use this template?",
    answer: `Lorem ipsum dolor sit amet, consectetur adipiscing elit. <a href="#">Sed</a> euismod, nunc ut aliquam mollis, nunc nibh lacinia risus, quis aliquet nunc nunc vel lorem.`,
    open: true,
  },
  {
    question: "How to use for commercial purpose?",
    answer: `Lorem ipsum dolor sit amet, consectetur adipiscing elit. <a href="#">Sed</a> euismod, nunc ut aliquam mollis, nunc nibh lacinia risus, quis aliquet nunc nunc vel lorem.`,
    open: false,
  },
];

Faqs Data Structure

ℹ️

The following data structure shows the data required for the faqs component:

Name	Type	Description
`question`	`string`	The question for the faq.
`answer`	`string`	The answer for the faq.
`open`	`bool`	The open state for the faq item.

Drawer Icon