design SelectionIndicator.tsx

0% Statements 0/23

0% Branches 0/1

0% Functions 0/1

0% Lines 0/23

Press n or j to go to the next uncovered block, b, p or k for the previous block.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24  
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
  /**
 * SelectionIndicator — highlighted border overlay for the selected element.
 */
import {useDesignMode} from './useDesignMode.js';

interface ISelectionIndicatorProps {
    id: string;
    label?: string;
}

export function SelectionIndicator({id, label}: ISelectionIndicatorProps) {
    const {active, selected} = useDesignMode();
    if (!active || selected?.id !== id) return null;

    return (
        <div
            className="blong-selection-indicator"
            aria-hidden
        >
            {label && <span className="blong-selection-indicator__badge">{label}</span>}
        </div>
    );
}