# code-block-pro/1.27.3/src/editor/components/ThemesPanel.tsx

Code Block Pro – Beautiful Syntax Highlighting, version 1.27.3. 37 lines.

- Page: https://pluginprobe.com/plugins/code-block-pro/1.27.3/code/src/editor/components/ThemesPanel.tsx
- Raw: https://pluginprobe.com/plugins/code-block-pro/1.27.3/raw/src/editor/components/ThemesPanel.tsx
- Modified: 2023-11-14T00:09:42+00:00

Line numbers below start at 1. Link to a line or a range by appending a fragment to the
page URL, for example `https://pluginprobe.com/plugins/code-block-pro/1.27.3/code/src/editor/components/ThemesPanel.tsx#L10-L20`.

```tsx
import { PanelBody } from '@wordpress/components';
import { useState } from '@wordpress/element';
import { __ } from '@wordpress/i18n';
import { Theme } from 'shiki';
import { useSettingsStoreReady } from '../../state/settings';
import { useThemeStore } from '../../state/theme';
import { AttributesPropsAndSetter } from '../../types';
import { ThemeFilter } from './ThemeFilter';
import { ThemeSelect } from './ThemeSelect';

export const ThemesPanel = ({
    bringAttentionToThemes,
    attributes,
    setAttributes,
}: AttributesPropsAndSetter & { bringAttentionToThemes?: boolean }) => {
    const { updateThemeHistory } = useThemeStore();
    const [search, setSearch] = useState<string>('');
    const ready = useSettingsStoreReady();
    return (
        <PanelBody
            title={__('Theme', 'code-block-pro')}
            initialOpen={bringAttentionToThemes ?? false}>
            {ready && <ThemeFilter search={search} setSearch={setSearch} />}
            {ready && (
                <ThemeSelect
                    {...attributes}
                    search={search}
                    onClick={(theme: Theme) => {
                        setAttributes({ theme });
                        updateThemeHistory({ theme });
                    }}
                />
            )}
        </PanelBody>
    );
};

```