@vertisanpro/flowbite-react
Version:
Non-Official React components built for Flowbite and Tailwind CSS
15 lines (14 loc) • 1.13 kB
JavaScript
'use client';
import { twMerge } from '@vertisanpro/tailwind-merge';
import React from 'react';
import { mergeDeep } from '../../helpers/merge-deep';
import { getTheme } from '../../theme-store';
import { useAccordionContext } from './AccordionPanelContext';
export const AccordionTitle = ({ as: Heading = 'h2', children, className, theme: customTheme = {}, ...props }) => {
const { arrowIcon: ArrowIcon, flush, isOpen, setOpen } = useAccordionContext();
const onClick = () => typeof setOpen !== 'undefined' && setOpen();
const theme = mergeDeep(getTheme().accordion.title, customTheme);
return (React.createElement("button", { className: twMerge(theme.base, theme.flush[flush ? 'on' : 'off'], theme.open[isOpen ? 'on' : 'off'], className), onClick: onClick, type: "button", ...props },
React.createElement(Heading, { className: theme.heading, "data-testid": "flowbite-accordion-heading" }, children),
ArrowIcon && (React.createElement(ArrowIcon, { "aria-hidden": true, className: twMerge(theme.arrow.base, theme.arrow.open[isOpen ? 'on' : 'off']), "data-testid": "flowbite-accordion-arrow" }))));
};