d85781ef99
* Add a setting for themeColor * Add primary-color to Tailwind, driven by themeColor setting * Get rid of most uses of "energy" colors * Change out the rest of the energy colors * Tweak NetworkHealthIndicator light mode checkmarks * Handful of other CSS tweaks while I'm here: - remove the AppHeader bg and border - pane margins - better dark mode button styles * Make Zoo logomark a badge * A snapshot a day keeps the bugs away! 📷🐛 (OS: ubuntu) * Re-run CI post-snapshots * A snapshot a day keeps the bugs away! 📷🐛 (OS: ubuntu) * Retrigger CI --------- Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
77 lines
1.7 KiB
TypeScript
77 lines
1.7 KiB
TypeScript
import { IconDefinition } from '@fortawesome/free-solid-svg-icons'
|
|
import { ActionIcon } from './ActionIcon'
|
|
import styles from './CollapsiblePanel.module.css'
|
|
|
|
export interface CollapsiblePanelProps
|
|
extends React.PropsWithChildren,
|
|
React.HTMLAttributes<HTMLDetailsElement> {
|
|
title: string
|
|
icon?: IconDefinition
|
|
open?: boolean
|
|
menu?: React.ReactNode
|
|
detailsTestId?: string
|
|
iconClassNames?: {
|
|
bg?: string
|
|
icon?: string
|
|
}
|
|
}
|
|
|
|
export const PanelHeader = ({
|
|
title,
|
|
icon,
|
|
iconClassNames,
|
|
menu,
|
|
}: CollapsiblePanelProps) => {
|
|
return (
|
|
<summary className={styles.header}>
|
|
<div className="flex gap-2 items-center flex-1">
|
|
<ActionIcon
|
|
icon={icon}
|
|
className="p-1"
|
|
size="sm"
|
|
bgClassName={
|
|
'dark:!bg-transparent group-open:bg-primary dark:group-open:!bg-primary rounded-sm ' +
|
|
(iconClassNames?.bg || '')
|
|
}
|
|
iconClassName={
|
|
'group-open:text-chalkboard-10 ' + (iconClassNames?.icon || '')
|
|
}
|
|
/>
|
|
{title}
|
|
</div>
|
|
<div className="group-open:opacity-100 opacity-0 group-open:pointer-events-auto pointer-events-none">
|
|
{menu}
|
|
</div>
|
|
</summary>
|
|
)
|
|
}
|
|
|
|
export const CollapsiblePanel = ({
|
|
title,
|
|
icon,
|
|
children,
|
|
className,
|
|
iconClassNames,
|
|
menu,
|
|
detailsTestId,
|
|
...props
|
|
}: CollapsiblePanelProps) => {
|
|
return (
|
|
<details
|
|
{...props}
|
|
data-testid={detailsTestId}
|
|
className={
|
|
styles.panel + ' pointer-events-auto group ' + (className || '')
|
|
}
|
|
>
|
|
<PanelHeader
|
|
title={title}
|
|
icon={icon}
|
|
iconClassNames={iconClassNames}
|
|
menu={menu}
|
|
/>
|
|
{children}
|
|
</details>
|
|
)
|
|
}
|