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

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

- Page: https://pluginprobe.com/plugins/code-block-pro/1.9.1/code/src/editor/components/headers/Headlights.tsx
- Raw: https://pluginprobe.com/plugins/code-block-pro/1.9.1/raw/src/editor/components/headers/Headlights.tsx
- Modified: 2022-09-10T00:48:38+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/headers/Headlights.tsx#L10-L20`.

```tsx
import { Attributes } from '../../../types';

export const Headlights = ({ bgColor }: Partial<Attributes>) => (
    <span
        style={{
            display: 'block',
            padding: '16px 0 0 16px',
            marginBottom: '-1px',
            width: '100%',
            textAlign: 'left',
            backgroundColor: bgColor,
        }}>
        <svg
            xmlns="http://www.w3.org/2000/svg"
            width={54}
            height={14}
            viewBox="0 0 54 14">
            <g fill="none" fillRule="evenodd" transform="translate(1 1)">
                <circle
                    cx="6"
                    cy="6"
                    r="6"
                    fill="#FF5F56"
                    stroke="#E0443E"
                    strokeWidth=".5"></circle>
                <circle
                    cx="26"
                    cy="6"
                    r="6"
                    fill="#FFBD2E"
                    stroke="#DEA123"
                    strokeWidth=".5"></circle>
                <circle
                    cx="46"
                    cy="6"
                    r="6"
                    fill="#27C93F"
                    stroke="#1AAB29"
                    strokeWidth=".5"></circle>
            </g>
        </svg>
    </span>
);

```