366 lines
13 KiB
TypeScript
366 lines
13 KiB
TypeScript
/**
|
|
* StyleSettingsSectionCompact
|
|
*
|
|
* Compact CSS styling fields for the constructor sidebar.
|
|
* Uses smaller inputs and labels to fit in the narrow sidebar.
|
|
*/
|
|
|
|
import React from 'react';
|
|
import type { StyleSettingsSectionProps } from './types';
|
|
import { FONT_OPTIONS } from '../../lib/fonts';
|
|
|
|
const StyleSettingsSectionCompact: React.FC<StyleSettingsSectionProps> = ({
|
|
values,
|
|
onChange,
|
|
}) => {
|
|
return (
|
|
<div className='space-y-2'>
|
|
<p className='text-[10px] text-white/60'>
|
|
Dimensions = % of canvas, border/radius = px
|
|
</p>
|
|
<div className='grid grid-cols-2 gap-2'>
|
|
<div>
|
|
<label className='mb-1 block text-[11px] font-semibold text-white/80'>
|
|
Width (%)
|
|
</label>
|
|
<input
|
|
type='number'
|
|
step='0.1'
|
|
min='0'
|
|
className='w-full rounded border border-gray-300 px-2 py-1 text-xs'
|
|
value={values.width || ''}
|
|
onChange={(e) => onChange('width', e.target.value)}
|
|
placeholder='e.g. 24'
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label className='mb-1 block text-[11px] font-semibold text-white/80'>
|
|
Height (%)
|
|
</label>
|
|
<input
|
|
type='number'
|
|
step='0.1'
|
|
min='0'
|
|
className='w-full rounded border border-gray-300 px-2 py-1 text-xs'
|
|
value={values.height || ''}
|
|
onChange={(e) => onChange('height', e.target.value)}
|
|
placeholder='e.g. 8'
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label className='mb-1 block text-[11px] font-semibold text-white/80'>
|
|
Min W (%)
|
|
</label>
|
|
<input
|
|
type='number'
|
|
step='0.1'
|
|
min='0'
|
|
className='w-full rounded border border-gray-300 px-2 py-1 text-xs'
|
|
value={values.minWidth || ''}
|
|
onChange={(e) => onChange('minWidth', e.target.value)}
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label className='mb-1 block text-[11px] font-semibold text-white/80'>
|
|
Max W (%)
|
|
</label>
|
|
<input
|
|
type='number'
|
|
step='0.1'
|
|
min='0'
|
|
className='w-full rounded border border-gray-300 px-2 py-1 text-xs'
|
|
value={values.maxWidth || ''}
|
|
onChange={(e) => onChange('maxWidth', e.target.value)}
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label className='mb-1 block text-[11px] font-semibold text-white/80'>
|
|
Min H (%)
|
|
</label>
|
|
<input
|
|
type='number'
|
|
step='0.1'
|
|
min='0'
|
|
className='w-full rounded border border-gray-300 px-2 py-1 text-xs'
|
|
value={values.minHeight || ''}
|
|
onChange={(e) => onChange('minHeight', e.target.value)}
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label className='mb-1 block text-[11px] font-semibold text-white/80'>
|
|
Max H (%)
|
|
</label>
|
|
<input
|
|
type='number'
|
|
step='0.1'
|
|
min='0'
|
|
className='w-full rounded border border-gray-300 px-2 py-1 text-xs'
|
|
value={values.maxHeight || ''}
|
|
onChange={(e) => onChange('maxHeight', e.target.value)}
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label className='mb-1 block text-[11px] font-semibold text-white/80'>
|
|
Margin
|
|
</label>
|
|
<input
|
|
className='w-full rounded border border-gray-300 px-2 py-1 text-xs'
|
|
value={values.margin || ''}
|
|
onChange={(e) => onChange('margin', e.target.value)}
|
|
placeholder='0 auto'
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label className='mb-1 block text-[11px] font-semibold text-white/80'>
|
|
Padding
|
|
</label>
|
|
<input
|
|
className='w-full rounded border border-gray-300 px-2 py-1 text-xs'
|
|
value={values.padding || ''}
|
|
onChange={(e) => onChange('padding', e.target.value)}
|
|
placeholder='0.5rem'
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label className='mb-1 block text-[11px] font-semibold text-white/80'>
|
|
Gap (rem)
|
|
</label>
|
|
<input
|
|
type='number'
|
|
step='0.25'
|
|
min='0'
|
|
className='w-full rounded border border-gray-300 px-2 py-1 text-xs'
|
|
value={values.gap || ''}
|
|
onChange={(e) => onChange('gap', e.target.value)}
|
|
placeholder='e.g. 1'
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label className='mb-1 block text-[11px] font-semibold text-white/80'>
|
|
Font
|
|
</label>
|
|
<select
|
|
className='w-full rounded border border-gray-300 px-2 py-1 text-xs'
|
|
value={values.fontFamily || ''}
|
|
onChange={(e) => onChange('fontFamily', e.target.value)}
|
|
>
|
|
<option value=''>Default</option>
|
|
{FONT_OPTIONS.map((font) => (
|
|
<option key={font.key} value={font.key}>
|
|
{font.label}
|
|
</option>
|
|
))}
|
|
</select>
|
|
</div>
|
|
<div>
|
|
<label className='mb-1 block text-[11px] font-semibold text-white/80'>
|
|
Font size
|
|
</label>
|
|
<input
|
|
className='w-full rounded border border-gray-300 px-2 py-1 text-xs'
|
|
value={values.fontSize || ''}
|
|
onChange={(e) => onChange('fontSize', e.target.value)}
|
|
placeholder='0.875rem'
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label className='mb-1 block text-[11px] font-semibold text-white/80'>
|
|
Line height
|
|
</label>
|
|
<input
|
|
className='w-full rounded border border-gray-300 px-2 py-1 text-xs'
|
|
value={values.lineHeight || ''}
|
|
onChange={(e) => onChange('lineHeight', e.target.value)}
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label className='mb-1 block text-[11px] font-semibold text-white/80'>
|
|
Font weight
|
|
</label>
|
|
<input
|
|
className='w-full rounded border border-gray-300 px-2 py-1 text-xs'
|
|
value={values.fontWeight || ''}
|
|
onChange={(e) => onChange('fontWeight', e.target.value)}
|
|
placeholder='500'
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label className='mb-1 block text-[11px] font-semibold text-white/80'>
|
|
Border (px)
|
|
</label>
|
|
<input
|
|
type='number'
|
|
step='1'
|
|
min='0'
|
|
className='w-full rounded border border-gray-300 px-2 py-1 text-xs'
|
|
value={values.border || ''}
|
|
onChange={(e) => onChange('border', e.target.value)}
|
|
placeholder='0'
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label className='mb-1 block text-[11px] font-semibold text-white/80'>
|
|
Radius (px)
|
|
</label>
|
|
<input
|
|
type='number'
|
|
step='1'
|
|
min='0'
|
|
className='w-full rounded border border-gray-300 px-2 py-1 text-xs'
|
|
value={values.borderRadius || ''}
|
|
onChange={(e) => onChange('borderRadius', e.target.value)}
|
|
placeholder='0'
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label className='mb-1 block text-[11px] font-semibold text-white/80'>
|
|
Opacity
|
|
</label>
|
|
<input
|
|
className='w-full rounded border border-gray-300 px-2 py-1 text-xs'
|
|
value={values.opacity || ''}
|
|
onChange={(e) => onChange('opacity', e.target.value)}
|
|
placeholder='0..1'
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label className='mb-1 block text-[11px] font-semibold text-white/80'>
|
|
z-index
|
|
</label>
|
|
<input
|
|
className='w-full rounded border border-gray-300 px-2 py-1 text-xs'
|
|
value={values.zIndex || ''}
|
|
onChange={(e) => onChange('zIndex', e.target.value)}
|
|
placeholder='1'
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<label className='mb-1 block text-[11px] font-semibold text-white/80'>
|
|
Box shadow
|
|
</label>
|
|
<input
|
|
className='w-full rounded border border-gray-300 px-2 py-1 text-xs'
|
|
value={values.boxShadow || ''}
|
|
onChange={(e) => onChange('boxShadow', e.target.value)}
|
|
placeholder='0 4px 12px rgba(...)'
|
|
/>
|
|
</div>
|
|
|
|
<div className='grid grid-cols-2 gap-2'>
|
|
<div>
|
|
<label className='mb-1 block text-[11px] font-semibold text-white/80'>
|
|
Display
|
|
</label>
|
|
<select
|
|
className='w-full rounded border border-gray-300 px-2 py-1 text-xs'
|
|
value={values.display || ''}
|
|
onChange={(e) => onChange('display', e.target.value)}
|
|
>
|
|
<option value=''>Not set</option>
|
|
<option value='block'>block</option>
|
|
<option value='inline-block'>inline-block</option>
|
|
<option value='flex'>flex</option>
|
|
<option value='inline-flex'>inline-flex</option>
|
|
<option value='grid'>grid</option>
|
|
<option value='none'>none</option>
|
|
</select>
|
|
</div>
|
|
<div>
|
|
<label className='mb-1 block text-[11px] font-semibold text-white/80'>
|
|
Position
|
|
</label>
|
|
<select
|
|
className='w-full rounded border border-gray-300 px-2 py-1 text-xs'
|
|
value={values.position || ''}
|
|
onChange={(e) => onChange('position', e.target.value)}
|
|
>
|
|
<option value=''>Not set</option>
|
|
<option value='static'>static</option>
|
|
<option value='relative'>relative</option>
|
|
<option value='absolute'>absolute</option>
|
|
<option value='fixed'>fixed</option>
|
|
<option value='sticky'>sticky</option>
|
|
</select>
|
|
</div>
|
|
<div>
|
|
<label className='mb-1 block text-[11px] font-semibold text-white/80'>
|
|
Justify
|
|
</label>
|
|
<select
|
|
className='w-full rounded border border-gray-300 px-2 py-1 text-xs'
|
|
value={values.justifyContent || ''}
|
|
onChange={(e) => onChange('justifyContent', e.target.value)}
|
|
>
|
|
<option value=''>Not set</option>
|
|
<option value='flex-start'>start</option>
|
|
<option value='center'>center</option>
|
|
<option value='flex-end'>end</option>
|
|
<option value='space-between'>between</option>
|
|
<option value='space-around'>around</option>
|
|
<option value='space-evenly'>evenly</option>
|
|
</select>
|
|
</div>
|
|
<div>
|
|
<label className='mb-1 block text-[11px] font-semibold text-white/80'>
|
|
Align
|
|
</label>
|
|
<select
|
|
className='w-full rounded border border-gray-300 px-2 py-1 text-xs'
|
|
value={values.alignItems || ''}
|
|
onChange={(e) => onChange('alignItems', e.target.value)}
|
|
>
|
|
<option value=''>Not set</option>
|
|
<option value='stretch'>stretch</option>
|
|
<option value='flex-start'>start</option>
|
|
<option value='center'>center</option>
|
|
<option value='flex-end'>end</option>
|
|
<option value='baseline'>baseline</option>
|
|
</select>
|
|
</div>
|
|
<div>
|
|
<label className='mb-1 block text-[11px] font-semibold text-white/80'>
|
|
Text align
|
|
</label>
|
|
<select
|
|
className='w-full rounded border border-gray-300 px-2 py-1 text-xs'
|
|
value={values.textAlign || ''}
|
|
onChange={(e) => onChange('textAlign', e.target.value)}
|
|
>
|
|
<option value=''>Not set</option>
|
|
<option value='left'>left</option>
|
|
<option value='center'>center</option>
|
|
<option value='right'>right</option>
|
|
<option value='justify'>justify</option>
|
|
</select>
|
|
</div>
|
|
<div>
|
|
<label className='mb-1 block text-[11px] font-semibold text-white/80'>
|
|
BG color
|
|
</label>
|
|
<input
|
|
className='w-full rounded border border-gray-300 px-2 py-1 text-xs'
|
|
value={values.backgroundColor || ''}
|
|
onChange={(e) => onChange('backgroundColor', e.target.value)}
|
|
placeholder='#E7DDB5'
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label className='mb-1 block text-[11px] font-semibold text-white/80'>
|
|
Text color
|
|
</label>
|
|
<input
|
|
className='w-full rounded border border-gray-300 px-2 py-1 text-xs'
|
|
value={values.color || ''}
|
|
onChange={(e) => onChange('color', e.target.value)}
|
|
placeholder='#131C22'
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default StyleSettingsSectionCompact;
|