Make Collapse component icons customizable

app/pricing/page.tsx

@@ -1,13 +1,15 @@
 import Pricing from '~/components/widgets/Pricing';
 import Comparison from '~/components/widgets/Comparison';
 import FAQs3 from '~/components/widgets/FAQs3';
+import CallToAction from '~/components/widgets/CallToAction';
 
 const Page = () => {
   return (
     <>
       <Pricing />
       <Comparison />
       <FAQs3 />
+      <CallToAction />
     </>
   );
 };

src/components/common/Collapse.tsx

@@ -1,10 +1,9 @@
 'use client';
 
-import { IconChevronDown, IconChevronUp } from '@tabler/icons-react';
 import { useState } from 'react';
 import { CollapseProps } from '~/shared/types';
 
-const Collapse = ({ items, classCollapseItem }: CollapseProps) => {
+const Collapse = ({ items, classCollapseItem, iconUp, iconDown }: CollapseProps) => {
   const [toggle, setToggle] = useState<boolean>(true);
   const [activeIndex, setActiveIndex] = useState<undefined | number>(undefined);
 
@@ -36,11 +35,7 @@ const Collapse = ({ items, classCollapseItem }: CollapseProps) => {
               role="button"
             >
               <h2 className="w-full pr-2 text-lg font-medium leading-6 text-gray-900 dark:text-slate-300">{title}</h2>
-              {activeIndex === index ? (
-                <IconChevronUp className="h-6 w-6 text-primary-600 dark:text-slate-200" />
-              ) : (
-                <IconChevronDown className="h-6 w-6 text-primary-600 dark:text-slate-200" />
-              )}
+              {activeIndex === index ? iconUp : iconDown}
             </div>
             {activeIndex === index && (
               <div

src/components/widgets/CallToAction.tsx

@@ -4,10 +4,10 @@ const CallToAction = () => {
   const { title, subtitle, callToAction } = callToActionData;
 
   return (
-    <section className="relative" id="callToActionOne">
+    <section className="bg-primary-50 dark:bg-slate-800" id="callToActionOne">
       <div className="mx-auto max-w-6xl px-4 sm:px-6">
-        <div className="py-12 md:py-20">
-          <div className="mx-auto max-w-3xl rounded-md p-6 text-center shadow-xl dark:border dark:border-slate-600 dark:shadow-none">
+        <div className="pt-4 pb-12 md:pb-20 md:pt-12">
+          <div className="card mx-auto max-w-3xl p-6 text-center">
             {title && (
               <h2 className="leading-tighter font-heading mb-4 text-4xl font-bold tracking-tighter md:text-4xl">
                 {title}

src/components/widgets/FAQs2.tsx

@@ -1,6 +1,7 @@
 import { faqsData } from '~/shared/data';
 import HeaderWidget from '../common/HeaderWidget';
 import Collapse from '../common/Collapse';
+import { IconChevronDown, IconChevronUp } from '@tabler/icons-react';
 
 const FAQs2 = () => {
   const { header, items } = faqsData;
@@ -12,6 +13,8 @@ const FAQs2 = () => {
         <Collapse
           items={items}
           classCollapseItem="mb-2 rounded-md border border-gray-300 shadow-md md:px-6 py-4 px-5 md:py-5"
+          iconUp={<IconChevronUp className="h-6 w-6 text-primary-600 dark:text-slate-200" />}
+          iconDown={<IconChevronDown className="h-6 w-6 text-primary-600 dark:text-slate-200" />}
         />
       </div>
     </section>

src/components/widgets/FAQs3.tsx

@@ -1,6 +1,7 @@
 import { faqs3Data } from '~/shared/data';
 import HeaderWidget from '../common/HeaderWidget';
 import Collapse from '../common/Collapse';
+import { IconMinus, IconPlus } from '@tabler/icons-react';
 
 const FAQs3 = () => {
   const { header, items, link } = faqs3Data;
@@ -10,7 +11,7 @@ const FAQs3 = () => {
       <div className="mx-auto max-w-6xl px-4 py-16 sm:px-6 lg:px-8 lg:py-20">
         <div className="flex items-stretch justify-center">
           <div className="grid w-full md:grid-cols-3 md:items-center md:gap-4">
-            <div className="block h-full sm:flex sm:items-center sm:justify-between md:mt-8 md:block">
+            <div className="block h-full sm:flex sm:items-center sm:justify-between md:mt-10 md:block">
               {header && <HeaderWidget header={header} titleClassname="text-3xl sm:text-4xl" />}
               <div className="flex h-fit w-full justify-center uppercase sm:w-auto sm:justify-start">
                 {link && (
@@ -24,6 +25,8 @@ const FAQs3 = () => {
               <Collapse
                 items={items}
                 classCollapseItem="border-b border-solid border-slate-300 dark:border-slate-500 py-5"
+                iconUp={<IconMinus className="h-6 w-6 text-primary-600 dark:text-slate-200" />}
+                iconDown={<IconPlus className="h-6 w-6 text-primary-600 dark:text-slate-200" />}
               />
             </div>
           </div>

src/shared/data.tsx

@@ -607,7 +607,7 @@ export const testimonialData: TestimonialProps = {
 // Pricing data
 export const pricingData: PricingProps = {
   header: {
-    title: 'Pricing for every business',
+    title: 'Prices for each plan',
     subtitle:
       'Proin eget vestibulum sem, vel ultrices ligula. Vestibulum in eleifend lectus, non mollis odio. Donec nibh ipsum, suscipit non pulvinar quis, lobortis ac lorem.',
     // highlight: 'Pricing',

src/shared/types.d.ts

@@ -122,6 +122,8 @@ interface FAQsProps {
 interface CollapseProps {
   items: Array<Item>;
   classCollapseItem?: string;
+  iconUp?: ReactElement;
+  iconDown?: ReactElement;
 }
 
 interface CallToActionProps {