110 lines
2.8 KiB
React
110 lines
2.8 KiB
React
import React, { useState } from 'react';
|
||
import './CharacterPalette.css';
|
||
|
||
const SYMBOL_PALETTE = {
|
||
'Single Lines': {
|
||
horizontal: '─',
|
||
vertical: '│',
|
||
topLeft: '┌',
|
||
topRight: '┐',
|
||
bottomLeft: '└',
|
||
bottomRight: '┘',
|
||
cross: '┼',
|
||
tTop: '┴',
|
||
tBottom: '┬',
|
||
tLeft: '┤',
|
||
tRight: '├'
|
||
},
|
||
'Double Lines': {
|
||
horizontal: '═',
|
||
vertical: '║',
|
||
topLeft: '╔',
|
||
topRight: '╗',
|
||
bottomLeft: '╚',
|
||
bottomRight: '╝',
|
||
cross: '╬',
|
||
tTop: '╩',
|
||
tBottom: '╦',
|
||
tLeft: '╣',
|
||
tRight: '╠'
|
||
},
|
||
'Mixed Junctions': {
|
||
crossSingleH: '╫',
|
||
crossSingleV: '╪',
|
||
doubleDownSingleH: '╤',
|
||
doubleUpSingleH: '╧',
|
||
doubleRightSingleV: '╟',
|
||
doubleLeftSingleV: '╢'
|
||
},
|
||
'Rounded Corners': {
|
||
topLeft: '╭',
|
||
topRight: '╮',
|
||
bottomLeft: '╰',
|
||
bottomRight: '╯'
|
||
},
|
||
'Heavy Lines': {
|
||
horizontal: '━',
|
||
vertical: '┃',
|
||
topLeft: '┏',
|
||
topRight: '┓',
|
||
bottomLeft: '┗',
|
||
bottomRight: '┛'
|
||
},
|
||
'Common Symbols': {
|
||
space: ' ',
|
||
bullet: '•',
|
||
dash: '–',
|
||
equals: '=',
|
||
underscore: '_',
|
||
hash: '#'
|
||
}
|
||
};
|
||
|
||
function CharacterPalette({ selectedChar, onSelectChar, onClose }) {
|
||
const [expandedCategory, setExpandedCategory] = useState('Single Lines');
|
||
|
||
const toggleCategory = (category) => {
|
||
setExpandedCategory(prev => prev === category ? null : category);
|
||
};
|
||
|
||
return (
|
||
<div className="character-palette">
|
||
<div className="palette-header">
|
||
<h3>Character Palette</h3>
|
||
<button className="close-button" onClick={onClose} title="Close (Esc)">✕</button>
|
||
</div>
|
||
|
||
<div className="palette-content">
|
||
{Object.entries(SYMBOL_PALETTE).map(([category, chars]) => (
|
||
<div key={category} className="palette-category">
|
||
<div
|
||
className={`category-header ${expandedCategory === category ? 'expanded' : ''}`}
|
||
onClick={() => toggleCategory(category)}
|
||
>
|
||
<span className="category-icon">{expandedCategory === category ? '▼' : '▶'}</span>
|
||
<span className="category-name">{category}</span>
|
||
</div>
|
||
|
||
{expandedCategory === category && (
|
||
<div className="character-grid">
|
||
{Object.entries(chars).map(([name, char]) => (
|
||
<div
|
||
key={name}
|
||
className={`char-button ${selectedChar === char ? 'active' : ''}`}
|
||
onClick={() => onSelectChar(char)}
|
||
title={name.replace(/([A-Z])/g, ' $1').trim()}
|
||
>
|
||
{char}
|
||
</div>
|
||
))}
|
||
</div>
|
||
)}
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
export default CharacterPalette;
|