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

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

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

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

export const HeadlightsMutedAlt = ({ bgColor }: Attributes) => {
	const bgC = colord(bgColor as AnyColor);
	const bg = bgC.isDark() ? bgC.lighten(0.05) : bgC.darken(0.05);
	return (
		<span
			style={{
				display: 'flex',
				alignItems: 'center',
				padding: '10px 0px 10px 16px',
				marginBottom: '-2px',
				width: '100%',
				textAlign: 'left',
				backgroundColor: bg.toHex(),
			}}
		>
			<svg
				xmlns="http://www.w3.org/2000/svg"
				width={62}
				height={20}
				viewBox="0 0 62 20"
			>
				<g fill="none" fillRule="evenodd" transform="translate(1 1)">
					<circle
						cx="8"
						cy="8"
						r="8"
						fill={bgColor}
						stroke={bgColor}
						strokeWidth=".5"
					></circle>
					<circle
						cx="30"
						cy="8"
						r="8"
						fill={bgColor}
						stroke={bgColor}
						strokeWidth=".5"
					></circle>
					<circle
						cx="52"
						cy="8"
						r="8"
						fill={bgColor}
						stroke={bgColor}
						strokeWidth=".5"
					></circle>
				</g>
			</svg>
		</span>
	);
};

```