forked from mantinedev/next-app-template
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request mantinedev#12 from widgeter/new-components
Include FAQs page
- Loading branch information
Showing
15 changed files
with
385 additions
and
59 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,14 @@ | ||
| import CallToAction from '~/components/widgets/CallToAction'; | ||
| import FAQs4 from '~/components/widgets/FAQs4'; | ||
| import { callToActionData2, faqs4Data } from '~/shared/data'; | ||
|
|
||
| const Page = () => { | ||
| return ( | ||
| <> | ||
| <FAQs4 {...faqs4Data} /> | ||
| <CallToAction cta={callToActionData2} /> | ||
| </> | ||
| ); | ||
| }; | ||
|
|
||
| export default Page; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,68 @@ | ||
| 'use client'; | ||
|
|
||
| import { IconCheck, IconChevronDown, IconChevronUp } from '@tabler/icons-react'; | ||
| import { useEffect, useState } from 'react'; | ||
| import { Dropdown, Tab } from '~/shared/types'; | ||
|
|
||
| const Dropdown = ({ options, activeTab, onActiveTabSelected, iconUp, iconDown }: Dropdown) => { | ||
| const [isDropdownOpen, setIsDropdownOpen] = useState<boolean>(false); | ||
| const [selectedOption, setSelectedOption] = useState<string>(options[activeTab].link?.label as string); | ||
|
|
||
| const dropdownHandler = (e: React.SyntheticEvent) => { | ||
| e.stopPropagation(); | ||
| setIsDropdownOpen(!isDropdownOpen); | ||
| }; | ||
|
|
||
| const onOptionSelected = (option: Tab, index: number) => { | ||
| setSelectedOption(option.link?.label as string); | ||
|
|
||
| // Sends the value to the parent component | ||
| onActiveTabSelected(index); | ||
| }; | ||
|
|
||
| useEffect(() => { | ||
| const handler = () => setIsDropdownOpen(false); | ||
|
|
||
| window.addEventListener('click', handler); | ||
|
|
||
| return () => { | ||
| window.removeEventListener('click', handler); | ||
| }; | ||
| }); | ||
|
|
||
| return ( | ||
| <div className="relative mt-4 rounded-md border border-gray-400 text-left"> | ||
| <div onClick={dropdownHandler} className="flex select-none items-center justify-between rounded-md p-3"> | ||
| <div className="text-lg">{selectedOption}</div> | ||
| {iconDown && iconUp ? ( | ||
| isDropdownOpen === false ? ( | ||
| iconDown | ||
| ) : ( | ||
| iconUp | ||
| ) | ||
| ) : isDropdownOpen === false ? ( | ||
| <IconChevronDown className="h-6 w-6 text-primary-600 dark:text-slate-200" /> | ||
| ) : ( | ||
| <IconChevronUp className="h-6 w-6 text-primary-600 dark:text-slate-200" /> | ||
| )} | ||
| </div> | ||
| {isDropdownOpen && ( | ||
| <div className="absolute w-full translate-y-1 overflow-auto rounded-md border border-gray-400"> | ||
| {options.map((option: Tab, index) => ( | ||
| <div | ||
| key={`option-${index}`} | ||
| onClick={() => onOptionSelected(option, index)} | ||
| className={`flex cursor-pointer items-center bg-white p-3 text-lg dark:bg-slate-900 ${ | ||
| activeTab !== index ? 'pl-10' : 'text-primary-600 dark:text-primary-200' | ||
| }`} | ||
| > | ||
| {activeTab === index && <IconCheck className="mr-2 h-5 w-5" />} {option.link?.label} | ||
| </div> | ||
| ))} | ||
| </div> | ||
| )} | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| export default Dropdown; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,74 @@ | ||
| 'use client'; | ||
|
|
||
| import HeaderWidget from '../common/HeaderWidget'; | ||
| import Collapse from '../common/Collapse'; | ||
| import { IconMinus, IconPlus } from '@tabler/icons-react'; | ||
| import { FAQsProps, Item, Tab } from '~/shared/types'; | ||
| import { useState } from 'react'; | ||
| import useWindowSize from '~/hooks/useWindowSize'; | ||
| import Dropdown from '../common/Dropdown'; | ||
|
|
||
| const FAQs4 = ({ header, tabs }: FAQsProps) => { | ||
| const { width } = useWindowSize(); | ||
| const [activeTab, setActiveTab] = useState(0); | ||
|
|
||
| const activeTabSelectedHandler = (index: number) => { | ||
| setActiveTab(index); | ||
| }; | ||
|
|
||
| return ( | ||
| <section className="bg-primary-50 dark:bg-slate-800" id="faqsFour"> | ||
| <div className="mx-auto max-w-6xl px-4 py-16 sm:px-6 lg:px-8 lg:py-20"> | ||
| {header && <HeaderWidget header={header} titleClassname="text-3xl sm:text-4xl" />} | ||
| <div className="flex items-stretch justify-center"> | ||
| <div className="grid w-full md:grid-cols-3 md:items-center md:gap-4"> | ||
| {width > 767 ? ( | ||
| <div className="block h-full sm:flex sm:items-center sm:justify-between md:mx-4 md:mt-10 md:block md:px-4"> | ||
| <div className="flex h-fit w-full justify-center sm:w-auto sm:justify-start"> | ||
| <ul> | ||
| {(tabs as Tab[]).map((tab, index) => { | ||
| const onSelectTab = () => { | ||
| setActiveTab(index); | ||
| }; | ||
|
|
||
| return ( | ||
| <li | ||
| key={`tab-${index}`} | ||
| className={`mb-5 flex cursor-pointer items-center ${ | ||
| activeTab === index ? 'text-primary-600 dark:text-primary-200' : '' | ||
| }`} | ||
| tabIndex={0} | ||
| onClick={onSelectTab} | ||
| > | ||
| <span className="w-full text-xl hover:underline">{tab.link?.label}</span> | ||
| </li> | ||
| ); | ||
| })} | ||
| </ul> | ||
| </div> | ||
| </div> | ||
| ) : ( | ||
| <Dropdown options={tabs as Tab[]} activeTab={activeTab} onActiveTabSelected={activeTabSelectedHandler} /> | ||
| )} | ||
| <div className="mt-4 h-fit md:col-span-2 md:mx-4 md:mt-0 md:px-4"> | ||
| {(tabs as Tab[]).map((tab, index) => ( | ||
| <div key={`tab-${index}`} className=""> | ||
| {activeTab === index && ( | ||
| <Collapse | ||
| items={tab.items as Item[]} | ||
| 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> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </section> | ||
| ); | ||
| }; | ||
|
|
||
| export default FAQs4; |
Oops, something went wrong.