314 lines
23 KiB
TypeScript
314 lines
23 KiB
TypeScript
'use client';
|
|
import IconBox from '@/components/icon/icon-box';
|
|
import IconDesktop from '@/components/icon/icon-desktop';
|
|
import IconDollarSignCircle from '@/components/icon/icon-dollar-sign-circle';
|
|
import IconMinusCircle from '@/components/icon/icon-minus-circle';
|
|
import IconPlusCircle from '@/components/icon/icon-plus-circle';
|
|
import IconRouter from '@/components/icon/icon-router';
|
|
import IconUser from '@/components/icon/icon-user';
|
|
import React, { ReactNode, useState } from 'react';
|
|
import AnimateHeight from 'react-animate-height';
|
|
|
|
interface ComponentsPagesFaqWithTabsProps {
|
|
title?: ReactNode | any;
|
|
}
|
|
|
|
const ComponentsPagesFaqWithTabs = ({ title = 'Some common <span className="text-primary">questions</span>' }: ComponentsPagesFaqWithTabsProps) => {
|
|
const [activeTab, setActiveTab] = useState<String>('general');
|
|
const [active1, setActive1] = useState<any>(1);
|
|
const [active2, setActive2] = useState<any>(1);
|
|
|
|
return (
|
|
<>
|
|
<div className="mb-12 flex items-center rounded-b-md bg-[#DBE7FF] dark:bg-[#141F31]">
|
|
<ul className="mx-auto flex items-center gap-5 overflow-auto whitespace-nowrap px-3 py-4.5 xl:gap-8">
|
|
<li
|
|
className={`group flex min-w-[120px] cursor-pointer flex-col items-center justify-center gap-4 rounded-md px-8 py-2.5 text-center text-[#506690] duration-300 hover:bg-white hover:text-primary dark:hover:bg-[#1B2E4B]
|
|
${activeTab === 'general' ? 'bg-white text-primary dark:bg-[#1B2E4B]' : ''}`}
|
|
onClick={() => setActiveTab('general')}
|
|
>
|
|
<IconDesktop fill={true} />
|
|
|
|
<h5 className="font-bold text-black dark:text-white">General</h5>
|
|
</li>
|
|
<li
|
|
className={`group flex min-w-[120px] cursor-pointer flex-col items-center justify-center gap-4 rounded-md px-8 py-2.5 text-center text-[#506690] duration-300 hover:bg-white hover:text-primary dark:hover:bg-[#1B2E4B]
|
|
${activeTab === 'quick-support' ? 'bg-white text-primary dark:bg-[#1B2E4B]' : ''}`}
|
|
onClick={() => setActiveTab('quick-support')}
|
|
>
|
|
<IconUser fill={true} className="h-8 w-8" />
|
|
|
|
<h5 className="font-bold text-black dark:text-white">Quick Support</h5>
|
|
</li>
|
|
<li
|
|
className={`group flex min-w-[120px] cursor-pointer flex-col items-center justify-center gap-4 rounded-md px-8 py-2.5 text-center text-[#506690] duration-300 hover:bg-white hover:text-primary dark:hover:bg-[#1B2E4B]
|
|
${activeTab === 'free-updates' ? 'bg-white text-primary dark:bg-[#1B2E4B]' : ''}`}
|
|
onClick={() => setActiveTab('free-updates')}
|
|
>
|
|
<IconBox fill={true} />
|
|
|
|
<h5 className="font-bold text-black dark:text-white">Free Updates</h5>
|
|
</li>
|
|
<li
|
|
className={`group flex min-w-[120px] cursor-pointer flex-col items-center justify-center gap-4 rounded-md px-8 py-2.5 text-center text-[#506690] duration-300 hover:bg-white hover:text-primary dark:hover:bg-[#1B2E4B]
|
|
${activeTab === 'pricing' ? 'bg-white text-primary dark:bg-[#1B2E4B]' : ''}`}
|
|
onClick={() => setActiveTab('pricing')}
|
|
>
|
|
<IconDollarSignCircle fill={true} />
|
|
|
|
<h5 className="font-bold text-black dark:text-white">Pricing</h5>
|
|
</li>
|
|
<li
|
|
className={`group flex min-w-[120px] cursor-pointer flex-col items-center justify-center gap-4 rounded-md px-8 py-2.5 text-center text-[#506690] duration-300 hover:bg-white hover:text-primary dark:hover:bg-[#1B2E4B]
|
|
${activeTab === 'hosting' ? 'bg-white text-primary dark:bg-[#1B2E4B]' : ''}`}
|
|
onClick={() => setActiveTab('hosting')}
|
|
>
|
|
<IconRouter fill={true} />
|
|
|
|
<h5 className="font-bold text-black dark:text-white">Hosting</h5>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<h3 className="mb-8 text-center text-xl font-semibold md:text-2xl" dangerouslySetInnerHTML={{ __html: title }}></h3>
|
|
<div className="mb-10 grid grid-cols-1 gap-10 md:grid-cols-2">
|
|
<div className="rounded-md bg-white dark:bg-black">
|
|
<div className="border-b border-white-light p-6 text-[22px] font-bold dark:border-dark dark:text-white">General topics?</div>
|
|
<div className="divide-y divide-white-light px-6 py-4.5 dark:divide-dark">
|
|
<div>
|
|
<div
|
|
className={`flex cursor-pointer items-center justify-between gap-10 px-2.5 py-2 text-base font-semibold hover:bg-primary-light hover:text-primary dark:text-white dark:hover:bg-[#1B2E4B] dark:hover:text-primary
|
|
${active1 === 1 ? 'bg-primary-light !text-primary dark:bg-[#1B2E4B]' : ''}`}
|
|
onClick={() => setActive1(active1 === 1 ? null : 1)}
|
|
>
|
|
<span>How to install VRISTO Admin</span>
|
|
{active1 !== 1 ? (
|
|
<span className="shrink-0">
|
|
<IconPlusCircle duotone={false} />
|
|
</span>
|
|
) : (
|
|
<span className="shrink-0">
|
|
<IconMinusCircle fill={true} />
|
|
</span>
|
|
)}
|
|
</div>
|
|
<AnimateHeight duration={300} height={active1 === 1 ? 'auto' : 0}>
|
|
<div className="px-1 py-3 font-semibold text-white-dark">
|
|
<p>
|
|
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch.
|
|
Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et.
|
|
Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft
|
|
beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
|
|
</p>
|
|
</div>
|
|
</AnimateHeight>
|
|
</div>
|
|
<div>
|
|
<div
|
|
className={`flex cursor-pointer items-center justify-between gap-10 px-2.5 py-2 text-base font-semibold hover:bg-primary-light hover:text-primary dark:text-white dark:hover:bg-[#1B2E4B] dark:hover:text-primary
|
|
${active1 === 2 ? 'bg-primary-light !text-primary dark:bg-[#1B2E4B]' : ''}`}
|
|
onClick={() => setActive1(active1 === 2 ? null : 2)}
|
|
>
|
|
<span> Where can I subscribe to your newsletter?</span>
|
|
{active1 !== 2 ? (
|
|
<span className="shrink-0">
|
|
<IconPlusCircle duotone={false} />
|
|
</span>
|
|
) : (
|
|
<span className="shrink-0">
|
|
<IconMinusCircle fill={true} />
|
|
</span>
|
|
)}
|
|
</div>
|
|
<AnimateHeight duration={300} height={active1 === 2 ? 'auto' : 0}>
|
|
<div className="px-1 py-3 font-semibold text-white-dark">
|
|
<p>
|
|
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch.
|
|
Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et.
|
|
Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft
|
|
beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
|
|
</p>
|
|
</div>
|
|
</AnimateHeight>
|
|
</div>
|
|
<div>
|
|
<div
|
|
className={`flex cursor-pointer items-center justify-between gap-10 px-2.5 py-2 text-base font-semibold hover:bg-primary-light hover:text-primary dark:text-white dark:hover:bg-[#1B2E4B] dark:hover:text-primary
|
|
${active1 === 3 ? 'bg-primary-light !text-primary dark:bg-[#1B2E4B]' : ''}`}
|
|
onClick={() => setActive1(active1 === 3 ? null : 3)}
|
|
>
|
|
<span>How to install VRISTO Admin</span>
|
|
{active1 !== 3 ? (
|
|
<span className="shrink-0">
|
|
<IconPlusCircle duotone={false} />
|
|
</span>
|
|
) : (
|
|
<span className="shrink-0">
|
|
<IconMinusCircle fill={true} />
|
|
</span>
|
|
)}
|
|
</div>
|
|
<AnimateHeight duration={300} height={active1 === 3 ? 'auto' : 0}>
|
|
<div className="px-1 py-3 font-semibold text-white-dark">
|
|
<p>
|
|
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch.
|
|
Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et.
|
|
Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft
|
|
beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
|
|
</p>
|
|
</div>
|
|
</AnimateHeight>
|
|
</div>
|
|
<div>
|
|
<div
|
|
className={`flex cursor-pointer items-center justify-between gap-10 px-2.5 py-2 text-base font-semibold hover:bg-primary-light hover:text-primary dark:text-white dark:hover:bg-[#1B2E4B] dark:hover:text-primary
|
|
${active1 === 5 ? 'bg-primary-light !text-primary dark:bg-[#1B2E4B]' : ''}`}
|
|
onClick={() => setActive1(active1 === 5 ? null : 5)}
|
|
>
|
|
<span>How to install VRISTO Admin</span>
|
|
{active1 !== 5 ? (
|
|
<span className="shrink-0">
|
|
<IconPlusCircle duotone={false} />
|
|
</span>
|
|
) : (
|
|
<span className="shrink-0">
|
|
<IconMinusCircle fill={true} />
|
|
</span>
|
|
)}
|
|
</div>
|
|
<AnimateHeight duration={300} height={active1 === 5 ? 'auto' : 0}>
|
|
<div className="px-1 py-3 font-semibold text-white-dark">
|
|
<p>
|
|
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch.
|
|
Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et.
|
|
Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft
|
|
beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
|
|
</p>
|
|
</div>
|
|
</AnimateHeight>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="rounded-md bg-white dark:bg-black">
|
|
<div className="border-b border-white-light p-6 text-[22px] font-bold dark:border-dark dark:text-white">Quick support & Free update</div>
|
|
<div className="divide-y divide-white-light px-6 py-4.5 dark:divide-dark">
|
|
<div>
|
|
<div
|
|
className={`flex cursor-pointer items-center justify-between gap-10 px-2.5 py-2 text-base font-semibold hover:bg-primary-light hover:text-primary dark:text-white dark:hover:bg-[#1B2E4B] dark:hover:text-primary
|
|
${active2 === 1 ? 'bg-primary-light !text-primary dark:bg-[#1B2E4B]' : ''}`}
|
|
onClick={() => setActive2(active2 === 1 ? null : 1)}
|
|
>
|
|
<span>How to use Browser Sync</span>
|
|
{active2 !== 1 ? (
|
|
<span className="shrink-0">
|
|
<IconPlusCircle duotone={false} />
|
|
</span>
|
|
) : (
|
|
<span className="shrink-0">
|
|
<IconMinusCircle fill={true} />
|
|
</span>
|
|
)}
|
|
</div>
|
|
<AnimateHeight duration={300} height={active2 === 1 ? 'auto' : 0}>
|
|
<div className="px-1 py-3 font-semibold text-white-dark">
|
|
<p>
|
|
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch.
|
|
Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et.
|
|
Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft
|
|
beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
|
|
</p>
|
|
</div>
|
|
</AnimateHeight>
|
|
</div>
|
|
<div>
|
|
<div
|
|
className={`flex cursor-pointer items-center justify-between gap-10 px-2.5 py-2 text-base font-semibold hover:bg-primary-light hover:text-primary dark:text-white dark:hover:bg-[#1B2E4B] dark:hover:text-primary
|
|
${active2 === 2 ? 'bg-primary-light !text-primary dark:bg-[#1B2E4B]' : ''}`}
|
|
onClick={() => setActive2(active2 === 2 ? null : 2)}
|
|
>
|
|
<span> Sidebar not rendering CSS</span>
|
|
{active2 !== 2 ? (
|
|
<span className="shrink-0">
|
|
<IconPlusCircle duotone={false} />
|
|
</span>
|
|
) : (
|
|
<span className="shrink-0">
|
|
<IconMinusCircle fill={true} />
|
|
</span>
|
|
)}
|
|
</div>
|
|
<AnimateHeight duration={300} height={active2 === 2 ? 'auto' : 0}>
|
|
<div className="px-1 py-3 font-semibold text-white-dark">
|
|
<p>
|
|
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch.
|
|
Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et.
|
|
Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft
|
|
beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
|
|
</p>
|
|
</div>
|
|
</AnimateHeight>
|
|
</div>
|
|
<div>
|
|
<div
|
|
className={`flex cursor-pointer items-center justify-between gap-10 px-2.5 py-2 text-base font-semibold hover:bg-primary-light hover:text-primary dark:text-white dark:hover:bg-[#1B2E4B] dark:hover:text-primary
|
|
${active2 === 3 ? 'bg-primary-light !text-primary dark:bg-[#1B2E4B]' : ''}`}
|
|
onClick={() => setActive2(active2 === 3 ? null : 3)}
|
|
>
|
|
<span>Connect with us Personally</span>
|
|
{active2 !== 3 ? (
|
|
<span className="shrink-0">
|
|
<IconPlusCircle duotone={false} />
|
|
</span>
|
|
) : (
|
|
<span className="shrink-0">
|
|
<IconMinusCircle fill={true} />
|
|
</span>
|
|
)}
|
|
</div>
|
|
<AnimateHeight duration={300} height={active2 === 3 ? 'auto' : 0}>
|
|
<div className="px-1 py-3 font-semibold text-white-dark">
|
|
<p>
|
|
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch.
|
|
Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et.
|
|
Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft
|
|
beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
|
|
</p>
|
|
</div>
|
|
</AnimateHeight>
|
|
</div>
|
|
<div>
|
|
<div
|
|
className={`flex cursor-pointer items-center justify-between gap-10 px-2.5 py-2 text-base font-semibold hover:bg-primary-light hover:text-primary dark:text-white dark:hover:bg-[#1B2E4B] dark:hover:text-primary
|
|
${active2 === 5 ? 'bg-primary-light !text-primary dark:bg-[#1B2E4B]' : ''}`}
|
|
onClick={() => setActive2(active2 === 5 ? null : 5)}
|
|
>
|
|
<span>Compilation Issue</span>
|
|
{active2 !== 5 ? (
|
|
<span className="shrink-0">
|
|
<IconPlusCircle duotone={false} />
|
|
</span>
|
|
) : (
|
|
<span className="shrink-0">
|
|
<IconMinusCircle fill={true} />
|
|
</span>
|
|
)}
|
|
</div>
|
|
<AnimateHeight duration={300} height={active2 === 5 ? 'auto' : 0}>
|
|
<div className="px-1 py-3 font-semibold text-white-dark">
|
|
<p>
|
|
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch.
|
|
Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et.
|
|
Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft
|
|
beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
|
|
</p>
|
|
</div>
|
|
</AnimateHeight>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default ComponentsPagesFaqWithTabs;
|