mirror of
https://github.com/duckietm/Nitro-V3.git
synced 2026-06-19 15:06:20 +00:00
Life
9c2dccaad6
- RGBA color picker with live preview (debounce 50ms) - 30 preset colors + 12 theme presets (Ocean, Forest, Sunset, Royal, etc.) - Header image selection from configurable image library - Export/Import theme as JSON via clipboard - CSS variable theming across all UI elements: NitroCard headers/tabs, context menus, buttons (primary/dark/gray), InfoStand, toolbar, room tools, purse, progress bars, sliders - All elements use var(--name, fallback) for zero visual change when default - Smooth 0.3s CSS transitions on theme change - Server-side persistence via WebSocket (packets 10047/10048) - Integrated Color/Image tabs into BackgroundsView panel - All strings use LocalizeText() for i18n support - Settings persisted in localStorage + server sync with 1s debounce - Added react-colorful dependency
24 lines
844 B
TypeScript
24 lines
844 B
TypeScript
import { FC, useMemo } from 'react';
|
|
import { Flex, FlexProps } from '../../../../common';
|
|
|
|
export const ContextMenuHeaderView: FC<FlexProps> = props =>
|
|
{
|
|
const { justifyContent = 'center', alignItems = 'center', classNames = [], style = {}, ...rest } = props;
|
|
|
|
const getClassNames = useMemo(() =>
|
|
{
|
|
const newClassNames: string[] = [ 'text-[#fff] min-w-[117px] h-[25px] max-h-[25px] text-[16px] mb-[2px]', 'p-1' ];
|
|
|
|
if(classNames.length) newClassNames.push(...classNames);
|
|
|
|
return newClassNames;
|
|
}, [ classNames ]);
|
|
|
|
const mergedStyle = useMemo(() => ({
|
|
backgroundColor: 'var(--ui-ctx-header-bg, #3d5f6e)',
|
|
...style
|
|
}), [ style ]);
|
|
|
|
return <Flex alignItems={ alignItems } classNames={ getClassNames } justifyContent={ justifyContent } style={ mergedStyle } { ...rest } />;
|
|
};
|