You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
31 lines
1.1 KiB
31 lines
1.1 KiB
import {PropsWithChildren, useState} from "react";
|
|
import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
|
|
import {faChevronDown, faChevronUp} from "@fortawesome/free-solid-svg-icons";
|
|
|
|
import styles from './dropdown-section.module.scss';
|
|
|
|
/* eslint-disable-next-line */
|
|
export interface DropdownComponentProps extends PropsWithChildren {
|
|
title?: string;
|
|
collapse?: boolean;
|
|
}
|
|
|
|
export function DropdownSection({children, title = '', collapse = false}: DropdownComponentProps) {
|
|
const [visible, setVisible] = useState(!collapse);
|
|
return (
|
|
<div className={styles['container']}>
|
|
<header className="flex justify-between grow px-6 py-4 align-middle items-center cursor-pointer"
|
|
onClick={() => setVisible(!visible)}>
|
|
<h1 className="overflow-y-auto text-lg text-gray-600">{title}</h1>
|
|
{visible && (<FontAwesomeIcon icon={faChevronDown} className="text-gray-600"/>)}
|
|
{!visible && (<FontAwesomeIcon icon={faChevronUp} className="text-gray-600"/>)}
|
|
</header>
|
|
<main className={visible ? 'block' : 'hidden'}>
|
|
{children}
|
|
</main>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default DropdownSection;
|