import React from 'react'; import ClipboardJS from 'clipboard'; import { cx } from '@leafygreen-ui/emotion'; import { useDarkMode } from '@leafygreen-ui/leafygreen-provider'; import { isComponentType } from '@leafygreen-ui/lib'; import { Body } from '@leafygreen-ui/typography'; import { useCodeContext } from '../CodeContext/CodeContext'; import CopyButton from '../CopyButton/CopyButton'; import LanguageSwitcher from '../LanguageSwitcher/LanguageSwitcher'; import { getBasePanelStyle, getPanelTitleStyles, panelIconsStyles, panelLeftStyles, } from './Panel.styles'; import { PanelProps } from './Panel.types'; function Panel({ languageOptions, onChange, onCopy, customActionButtons = [], showCustomActionButtons, title, className, ...rest }: PanelProps) { const { theme } = useDarkMode(); const { contents, language, lgIds } = useCodeContext(); const hasTitle = !!title; const filteredCustomActionIconButtons = customActionButtons.filter( (item: React.ReactElement) => isComponentType(item, 'IconButton'), ); const showCustomActionsInPanel = showCustomActionButtons && !!filteredCustomActionIconButtons.length; const currentLanguage = languageOptions?.find( option => option.displayName === language || option.language === language, ); const shouldRenderLanguageSwitcher = language !== undefined && languageOptions !== undefined && languageOptions.length !== 0 && onChange !== undefined && !!currentLanguage; return (

{hasTitle && ( {title} )}

{shouldRenderLanguageSwitcher && ( )}

{showCustomActionsInPanel && ( <> {filteredCustomActionIconButtons?.map( (action: React.ReactNode) => action, )} )} {ClipboardJS.isSupported() && ( )}

); } Panel.displayName = 'Panel'; export default Panel;