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

Code Block Pro – Beautiful Syntax Highlighting, version 1.28.0. 66 lines.

- Page: https://pluginprobe.com/plugins/code-block-pro/1.28.0/code/src/editor/components/headers/HeadlightsMuted.tsx
- Raw: https://pluginprobe.com/plugins/code-block-pro/1.28.0/raw/src/editor/components/headers/HeadlightsMuted.tsx
- Modified: 2026-04-12T13:22:22+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.28.0/code/src/editor/components/headers/HeadlightsMuted.tsx#L10-L20`.

```tsx
import { type AnyColor, colord } from 'colord';
import type { Attributes } from '../../../types';
import { findBackgroundColor } from '../../../util/colors';

export const HeadlightsMuted = (attributes: Attributes) => {
	const { textColor } = attributes;
	return (
		<span
			style={{
				display: 'block',
				padding: '16px 0 0 16px',
				marginBottom: '-1px',
				width: '100%',
				textAlign: 'left',
				backgroundColor: findBackgroundColor(attributes),
			}}
		>
			<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>
	);
};

```