# code-block-pro/1.8.0/src/editor/components/headers/HeadlightsMuted.tsx

Code Block Pro – Beautiful Syntax Highlighting, version 1.8.0. 60 lines.

- Page: https://pluginprobe.com/plugins/code-block-pro/1.8.0/code/src/editor/components/headers/HeadlightsMuted.tsx
- Raw: https://pluginprobe.com/plugins/code-block-pro/1.8.0/raw/src/editor/components/headers/HeadlightsMuted.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.8.0/code/src/editor/components/headers/HeadlightsMuted.tsx#L10-L20`.

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

export const HeadlightsMuted = ({
    textColor,
    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={colord(textColor as AnyColor)
                        .alpha(0.2)
                        .toHex()}
                    stroke={colord(textColor as AnyColor)
                        .alpha(0.3)
                        .toHex()}
                    strokeWidth=".5"></circle>
                <circle
                    cx="26"
                    cy="6"
                    r="6"
                    fill={colord(textColor as AnyColor)
                        .alpha(0.2)
                        .toHex()}
                    stroke={colord(textColor as AnyColor)
                        .alpha(0.3)
                        .toHex()}
                    strokeWidth=".5"></circle>
                <circle
                    cx="46"
                    cy="6"
                    r="6"
                    fill={colord(textColor as AnyColor)
                        .alpha(0.2)
                        .toHex()}
                    stroke={colord(textColor as AnyColor)
                        .alpha(0.3)
                        .toHex()}
                    strokeWidth=".5"></circle>
            </g>
        </svg>
    </span>
);

```