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 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 | 1x 14x 14x 14x 14x 14x | /**
* StyledHUDPanel - Reusable HUD Panel Component
*
* A consistent, styled panel for HUD elements following the Black Trigram design system.
* Provides cyberpunk Korean aesthetic with glassmorphism effects.
*
* Features:
* - Configurable variants (default, accent)
* - Responsive padding based on SPACING scale
* - Hover effects with smooth transitions
* - Support for custom styles
* - WCAG AA compliant colors
*
* @korean 스타일이 적용된 HUD 패널
* @module Components/UI
*/
import React from 'react';
import {
HUD_STYLE,
SPACING,
TRANSITIONS,
BORDERS,
type SpacingLevel,
} from '../../../types/constants/designSystem';
/**
* StyledHUDPanel Props
*/
export interface StyledHUDPanelProps {
/** Panel content */
readonly children?: React.ReactNode;
/** Visual variant of the panel */
readonly variant?: 'default' | 'accent';
/** Padding size from SPACING scale */
readonly padding?: SpacingLevel;
/** Custom className for additional styling */
readonly className?: string;
/** Custom inline styles */
readonly style?: React.CSSProperties;
/** Enable hover effect */
readonly hover?: boolean;
/** Data test ID for testing */
readonly dataTestId?: string;
/** Click handler */
readonly onClick?: () => void;
/** Pointer events behavior */
readonly pointerEvents?: 'auto' | 'none' | 'all';
}
/**
* StyledHUDPanel Component
*
* Provides a consistent, reusable panel for HUD elements with cyberpunk styling.
*
* @example
* ```tsx
* <StyledHUDPanel variant="accent" padding="md" hover>
* <div>Panel content</div>
* </StyledHUDPanel>
* ```
*/
export const StyledHUDPanel: React.FC<StyledHUDPanelProps> = ({
children,
variant = 'default',
padding = 'md',
className,
style,
hover = false,
dataTestId = 'styled-hud-panel',
onClick,
pointerEvents = 'auto',
}) => {
const [isHovered, setIsHovered] = React.useState(false);
// Base styles from design system
const baseStyles: React.CSSProperties = {
background: HUD_STYLE.background,
border: variant === 'accent' ? BORDERS.accent : BORDERS.default,
borderRadius: HUD_STYLE.borderRadius,
padding: SPACING[padding],
boxShadow: hover && isHovered ? HUD_STYLE.shadowHover : HUD_STYLE.shadow,
backdropFilter: HUD_STYLE.backdropFilter,
transition: TRANSITIONS.normal,
boxSizing: 'border-box',
pointerEvents,
...style,
};
// Hover handlers
const handleMouseEnter = () => {
if (hover) {
setIsHovered(true);
}
};
const handleMouseLeave = () => {
if (hover) {
setIsHovered(false);
}
};
return (
<div
className={className}
style={baseStyles}
data-testid={dataTestId}
onClick={onClick}
onMouseEnter={handleMouseEnter}
onMouseLeave={handleMouseLeave}
>
{children}
</div>
);
};
export default StyledHUDPanel;
|