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 | 1x 15x 15x | import React, { ReactNode } from "react";
import { KOREAN_COLORS } from "../../../../types/constants/colors";
import { hexToRgbaString } from "../../../../utils/colorUtils";
export interface PhilosophySectionProps {
readonly title: {
readonly korean: string;
readonly english: string;
};
readonly children: ReactNode;
readonly borderColor?: number;
readonly isMobile?: boolean;
readonly testId?: string;
}
/**
* Philosophy Section Container Component
*
* **Korean**: 철학 섹션 컨테이너
*
* Reusable container for philosophy screen sections with:
* - Bilingual title (Korean | English)
* - Customizable border color
* - Glassmorphic background styling
* - Responsive padding and spacing
* - Consistent Korean cyberpunk aesthetic
*
* Features:
* - Korean theming with gradient borders
* - Smooth shadow effects
* - Mobile-optimized layout
* - Semantic HTML structure
*
* @example
* ```typescript
* <PhilosophySection
* title={{ korean: "팔괘 철학", english: "Trigram Philosophy" }}
* borderColor={KOREAN_COLORS.PRIMARY_CYAN}
* isMobile={false}
* >
* <TrigramGrid />
* </PhilosophySection>
* ```
*
* @public
* @category Philosophy Components
*/
export const PhilosophySection: React.FC<PhilosophySectionProps> = ({
title,
children,
borderColor = KOREAN_COLORS.PRIMARY_CYAN,
isMobile = false,
testId,
}) => {
const colors = {
background: hexToRgbaString(KOREAN_COLORS.UI_BACKGROUND_LIGHT, 0.8),
border: `#${borderColor.toString(16).padStart(6, "0")}`,
titleGold: `#${KOREAN_COLORS.ACCENT_GOLD.toString(16).padStart(6, "0")}`,
titleSecondary: `#${KOREAN_COLORS.TEXT_SECONDARY.toString(16).padStart(6, "0")}`,
};
return (
<section
style={{
marginBottom: isMobile ? "20px" : "30px",
background: colors.background,
backdropFilter: "blur(8px)",
borderRadius: "12px",
border: `2px solid ${colors.border}`,
padding: isMobile ? "15px" : "20px",
boxShadow: `0 4px 20px ${hexToRgbaString(borderColor, 0.2)}`,
}}
data-testid={testId}
>
{/* Section header */}
<header
style={{
marginBottom: isMobile ? "15px" : "20px",
paddingBottom: isMobile ? "10px" : "15px",
borderBottom: `2px solid ${hexToRgbaString(borderColor, 0.4)}`,
}}
>
<h2
style={{
fontSize: isMobile ? "20px" : "24px",
fontWeight: "bold",
color: colors.titleGold,
margin: "0 0 6px 0",
textShadow: `0 0 10px ${hexToRgbaString(KOREAN_COLORS.ACCENT_GOLD, 0.4)}`,
}}
>
{title.korean}
</h2>
<p
style={{
fontSize: isMobile ? "14px" : "16px",
color: colors.titleSecondary,
margin: 0,
fontStyle: "italic",
}}
>
{title.english}
</p>
</header>
{/* Section content */}
<div>{children}</div>
</section>
);
};
export default PhilosophySection;
|