251 lines
8.8 KiB
TypeScript
251 lines
8.8 KiB
TypeScript
/**
|
|
* EffectsSettingsSectionCompact
|
|
*
|
|
* Compact animation and interaction effect settings for the constructor sidebar.
|
|
* Uses smaller inputs and labels to fit in the narrow sidebar.
|
|
*/
|
|
|
|
import React from 'react';
|
|
import type { EffectsSettingsSectionProps } from './types';
|
|
|
|
const EffectsSettingsSectionCompact: React.FC<EffectsSettingsSectionProps> = ({
|
|
values,
|
|
onChange,
|
|
}) => {
|
|
return (
|
|
<div className='space-y-3'>
|
|
{/* Appear Animation */}
|
|
<div>
|
|
<p className='mb-2 text-[11px] font-semibold text-gray-700'>
|
|
Appear Animation
|
|
</p>
|
|
<div className='grid grid-cols-2 gap-2'>
|
|
<div className='col-span-2'>
|
|
<label className='mb-1 block text-[10px] text-gray-500'>Type</label>
|
|
<select
|
|
className='w-full rounded border border-gray-300 px-2 py-1 text-xs'
|
|
value={values.appearAnimation || ''}
|
|
onChange={(e) => onChange('appearAnimation', e.target.value)}
|
|
>
|
|
<option value=''>None</option>
|
|
<option value='fade'>Fade</option>
|
|
<option value='slide-up'>Slide Up</option>
|
|
<option value='slide-down'>Slide Down</option>
|
|
<option value='slide-left'>Slide Left</option>
|
|
<option value='slide-right'>Slide Right</option>
|
|
<option value='scale'>Scale</option>
|
|
</select>
|
|
</div>
|
|
<div>
|
|
<label className='mb-1 block text-[10px] text-gray-500'>
|
|
Duration
|
|
</label>
|
|
<input
|
|
className='w-full rounded border border-gray-300 px-2 py-1 text-xs'
|
|
value={values.appearAnimationDuration || ''}
|
|
onChange={(e) =>
|
|
onChange('appearAnimationDuration', e.target.value)
|
|
}
|
|
placeholder='0.3s'
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label className='mb-1 block text-[10px] text-gray-500'>
|
|
Easing
|
|
</label>
|
|
<select
|
|
className='w-full rounded border border-gray-300 px-2 py-1 text-xs'
|
|
value={values.appearAnimationEasing || ''}
|
|
onChange={(e) =>
|
|
onChange('appearAnimationEasing', e.target.value)
|
|
}
|
|
>
|
|
<option value=''>ease</option>
|
|
<option value='linear'>linear</option>
|
|
<option value='ease-in'>ease-in</option>
|
|
<option value='ease-out'>ease-out</option>
|
|
<option value='ease-in-out'>ease-in-out</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Hover Effects */}
|
|
<div>
|
|
<p className='mb-2 text-[11px] font-semibold text-gray-700'>
|
|
Hover Effects
|
|
</p>
|
|
<div className='grid grid-cols-2 gap-2'>
|
|
<div>
|
|
<label className='mb-1 block text-[10px] text-gray-500'>
|
|
Scale
|
|
</label>
|
|
<input
|
|
className='w-full rounded border border-gray-300 px-2 py-1 text-xs'
|
|
value={values.hoverScale || ''}
|
|
onChange={(e) => onChange('hoverScale', e.target.value)}
|
|
placeholder='1.05'
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label className='mb-1 block text-[10px] text-gray-500'>
|
|
Opacity
|
|
</label>
|
|
<input
|
|
className='w-full rounded border border-gray-300 px-2 py-1 text-xs'
|
|
value={values.hoverOpacity || ''}
|
|
onChange={(e) => onChange('hoverOpacity', e.target.value)}
|
|
placeholder='0..1'
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label className='mb-1 block text-[10px] text-gray-500'>
|
|
BG color
|
|
</label>
|
|
<input
|
|
className='w-full rounded border border-gray-300 px-2 py-1 text-xs'
|
|
value={values.hoverBackgroundColor || ''}
|
|
onChange={(e) => onChange('hoverBackgroundColor', e.target.value)}
|
|
placeholder='#B39368'
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label className='mb-1 block text-[10px] text-gray-500'>
|
|
Text color
|
|
</label>
|
|
<input
|
|
className='w-full rounded border border-gray-300 px-2 py-1 text-xs'
|
|
value={values.hoverColor || ''}
|
|
onChange={(e) => onChange('hoverColor', e.target.value)}
|
|
placeholder='#FFFFFF'
|
|
/>
|
|
</div>
|
|
<div className='col-span-2'>
|
|
<label className='mb-1 block text-[10px] text-gray-500'>
|
|
Box shadow
|
|
</label>
|
|
<input
|
|
className='w-full rounded border border-gray-300 px-2 py-1 text-xs'
|
|
value={values.hoverBoxShadow || ''}
|
|
onChange={(e) => onChange('hoverBoxShadow', e.target.value)}
|
|
placeholder='0 4px 12px rgba(...)'
|
|
/>
|
|
</div>
|
|
<div className='col-span-2'>
|
|
<label className='mb-1 block text-[10px] text-gray-500'>
|
|
Transition duration
|
|
</label>
|
|
<input
|
|
className='w-full rounded border border-gray-300 px-2 py-1 text-xs'
|
|
value={values.hoverTransitionDuration || ''}
|
|
onChange={(e) =>
|
|
onChange('hoverTransitionDuration', e.target.value)
|
|
}
|
|
placeholder='0.2s'
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Focus Effects */}
|
|
<div>
|
|
<p className='mb-2 text-[11px] font-semibold text-gray-700'>
|
|
Focus Effects
|
|
</p>
|
|
<div className='grid grid-cols-2 gap-2'>
|
|
<div>
|
|
<label className='mb-1 block text-[10px] text-gray-500'>
|
|
Scale
|
|
</label>
|
|
<input
|
|
className='w-full rounded border border-gray-300 px-2 py-1 text-xs'
|
|
value={values.focusScale || ''}
|
|
onChange={(e) => onChange('focusScale', e.target.value)}
|
|
placeholder='1.02'
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label className='mb-1 block text-[10px] text-gray-500'>
|
|
Opacity
|
|
</label>
|
|
<input
|
|
className='w-full rounded border border-gray-300 px-2 py-1 text-xs'
|
|
value={values.focusOpacity || ''}
|
|
onChange={(e) => onChange('focusOpacity', e.target.value)}
|
|
placeholder='0..1'
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label className='mb-1 block text-[10px] text-gray-500'>
|
|
Outline
|
|
</label>
|
|
<input
|
|
className='w-full rounded border border-gray-300 px-2 py-1 text-xs'
|
|
value={values.focusOutline || ''}
|
|
onChange={(e) => onChange('focusOutline', e.target.value)}
|
|
placeholder='2px solid #B39368'
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label className='mb-1 block text-[10px] text-gray-500'>
|
|
Box shadow
|
|
</label>
|
|
<input
|
|
className='w-full rounded border border-gray-300 px-2 py-1 text-xs'
|
|
value={values.focusBoxShadow || ''}
|
|
onChange={(e) => onChange('focusBoxShadow', e.target.value)}
|
|
placeholder='0 0 0 3px rgba(...)'
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Active/Press Effects */}
|
|
<div>
|
|
<p className='mb-2 text-[11px] font-semibold text-gray-700'>
|
|
Active/Press Effects
|
|
</p>
|
|
<div className='grid grid-cols-2 gap-2'>
|
|
<div>
|
|
<label className='mb-1 block text-[10px] text-gray-500'>
|
|
Scale
|
|
</label>
|
|
<input
|
|
className='w-full rounded border border-gray-300 px-2 py-1 text-xs'
|
|
value={values.activeScale || ''}
|
|
onChange={(e) => onChange('activeScale', e.target.value)}
|
|
placeholder='0.95'
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label className='mb-1 block text-[10px] text-gray-500'>
|
|
Opacity
|
|
</label>
|
|
<input
|
|
className='w-full rounded border border-gray-300 px-2 py-1 text-xs'
|
|
value={values.activeOpacity || ''}
|
|
onChange={(e) => onChange('activeOpacity', e.target.value)}
|
|
placeholder='0..1'
|
|
/>
|
|
</div>
|
|
<div className='col-span-2'>
|
|
<label className='mb-1 block text-[10px] text-gray-500'>
|
|
BG color
|
|
</label>
|
|
<input
|
|
className='w-full rounded border border-gray-300 px-2 py-1 text-xs'
|
|
value={values.activeBackgroundColor || ''}
|
|
onChange={(e) =>
|
|
onChange('activeBackgroundColor', e.target.value)
|
|
}
|
|
placeholder='#131C22'
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default EffectsSettingsSectionCompact;
|