# code-block-pro/1.9.1/src/editor/components/ThemeSelect.tsx

Code Block Pro – Beautiful Syntax Highlighting, version 1.9.1. 56 lines.

- Page: https://pluginprobe.com/plugins/code-block-pro/1.9.1/code/src/editor/components/ThemeSelect.tsx
- Raw: https://pluginprobe.com/plugins/code-block-pro/1.9.1/raw/src/editor/components/ThemeSelect.tsx
- Modified: 2022-09-05T14:31:28+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.9.1/code/src/editor/components/ThemeSelect.tsx#L10-L20`.

```tsx
import { BaseControl } from '@wordpress/components';
import { sprintf, __ } from '@wordpress/i18n';
import { Lang, Theme } from 'shiki';
import defaultThemes from '../../defaultThemes.json';
import { ThemePreview } from '../components/ThemePreview';

type ThemeSelectProps = {
    theme: Theme;
    language: Lang;
    code: string;
    fontSize: string;
    lineHeight: string;
    fontFamily: string;
    onClick: (slug: Theme) => void;
};
export const ThemeSelect = ({
    theme,
    language,
    code,
    fontSize,
    lineHeight,
    fontFamily,
    onClick,
}: ThemeSelectProps) => {
    return (
        <div className="code-block-pro-editor">
            {Object.entries(defaultThemes).map(([slug, name]) => (
                <BaseControl
                    id={`code-block-pro-theme-${slug}`}
                    label={
                        theme === slug
                            ? sprintf(
                                  __('%s (current)', 'code-block-pro'),
                                  name,
                              )
                            : name
                    }
                    key={slug}>
                    <ThemePreview
                        id={`code-block-pro-theme-${slug}`}
                        theme={slug as Theme}
                        lang={language}
                        fontSize={fontSize}
                        lineHeight={lineHeight}
                        fontFamily={fontFamily}
                        onClick={() => {
                            onClick(slug as Theme);
                        }}
                        code={code}
                    />
                </BaseControl>
            ))}
        </div>
    );
};

```