shadowdaoandClaude Opus 4.8
4733fe84b5
Adopted in BackgroundSectionStylePanel, ButtonStylePanel, ContainerStylePanel, FormStylePanel, GenericPropsEditor, HeroStylePanel, ImageStylePanel, MediaStylePanel, NavStylePanel, SectionTypePanel, SocialStylePanel, TextStylePanel — only where the inline setProp/setPropStyle were behaviorally identical to the hook. PricingStylePanel and FeaturesEditor keep their own array-mutation logic since it differs. Behavior-preserving (task E4.1). Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
74 lines
2.1 KiB
TypeScript
74 lines
2.1 KiB
TypeScript
import React, { CSSProperties } from 'react';
|
|
import {
|
|
TEXT_COLORS,
|
|
FONT_FAMILIES,
|
|
TEXT_SIZES,
|
|
FONT_WEIGHTS,
|
|
} from '../../../constants/presets';
|
|
import {
|
|
StylePanelProps,
|
|
SectionLabel,
|
|
ColorSwatchGrid,
|
|
PresetButtonGrid,
|
|
useNodeProp,
|
|
} from './shared';
|
|
|
|
/* ---------- TEXT ---------- */
|
|
export const TextStylePanel: React.FC<StylePanelProps> = ({ selectedId, nodeProps }) => {
|
|
const style: CSSProperties = nodeProps.style || {};
|
|
|
|
const { setPropStyle } = useNodeProp(selectedId);
|
|
|
|
return (
|
|
<>
|
|
<div className="guided-section">
|
|
<SectionLabel>Text Color</SectionLabel>
|
|
<ColorSwatchGrid
|
|
colors={TEXT_COLORS}
|
|
activeValue={style.color as string}
|
|
onSelect={(v) => setPropStyle('color', v)}
|
|
/>
|
|
</div>
|
|
<div className="guided-section">
|
|
<SectionLabel>Font Family</SectionLabel>
|
|
<PresetButtonGrid
|
|
presets={FONT_FAMILIES}
|
|
activeValue={style.fontFamily as string}
|
|
onSelect={(v) => setPropStyle('fontFamily', v)}
|
|
/>
|
|
</div>
|
|
<div className="guided-section">
|
|
<SectionLabel>Text Size</SectionLabel>
|
|
<PresetButtonGrid
|
|
presets={TEXT_SIZES}
|
|
activeValue={style.fontSize as string}
|
|
onSelect={(v) => setPropStyle('fontSize', v)}
|
|
/>
|
|
</div>
|
|
<div className="guided-section">
|
|
<SectionLabel>Font Weight</SectionLabel>
|
|
<PresetButtonGrid
|
|
presets={FONT_WEIGHTS}
|
|
activeValue={String(style.fontWeight || '')}
|
|
onSelect={(v) => setPropStyle('fontWeight', v)}
|
|
/>
|
|
</div>
|
|
<div className="guided-section">
|
|
<SectionLabel>Alignment</SectionLabel>
|
|
<div className="preset-grid align-grid">
|
|
{(['left', 'center', 'right', 'justify'] as const).map((a) => (
|
|
<button
|
|
key={a}
|
|
className={`preset-btn ${style.textAlign === a ? 'active' : ''}`}
|
|
onClick={() => setPropStyle('textAlign', a)}
|
|
title={a}
|
|
>
|
|
<i className={`fa fa-align-${a}`} />
|
|
</button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</>
|
|
);
|
|
};
|