72 lines
1.8 KiB
TypeScript
72 lines
1.8 KiB
TypeScript
/**
|
|
* CommonSettingsSection
|
|
*
|
|
* Common settings fields shared by all element types.
|
|
* Label, position, and appear timing.
|
|
*/
|
|
|
|
import React from 'react';
|
|
import FormField from '../FormField';
|
|
import type { CommonSettingsSectionProps } from './types';
|
|
|
|
const CommonSettingsSection: React.FC<CommonSettingsSectionProps> = ({
|
|
label,
|
|
xPercent,
|
|
yPercent,
|
|
appearDelaySec,
|
|
appearDurationSec,
|
|
onChange,
|
|
showLabel = true,
|
|
showPosition = true,
|
|
}) => {
|
|
return (
|
|
<div className='space-y-4'>
|
|
{showLabel && (
|
|
<FormField label='Label'>
|
|
<input
|
|
value={label}
|
|
onChange={(event) => onChange('label', event.target.value)}
|
|
/>
|
|
</FormField>
|
|
)}
|
|
|
|
{showPosition && (
|
|
<div className='grid gap-4 md:grid-cols-2'>
|
|
<FormField label='X percent'>
|
|
<input
|
|
value={xPercent}
|
|
onChange={(event) => onChange('xPercent', event.target.value)}
|
|
/>
|
|
</FormField>
|
|
<FormField label='Y percent'>
|
|
<input
|
|
value={yPercent}
|
|
onChange={(event) => onChange('yPercent', event.target.value)}
|
|
/>
|
|
</FormField>
|
|
</div>
|
|
)}
|
|
|
|
<div className='grid gap-4 md:grid-cols-2'>
|
|
<FormField label='Appear delay (sec)'>
|
|
<input
|
|
value={appearDelaySec}
|
|
onChange={(event) => onChange('appearDelaySec', event.target.value)}
|
|
/>
|
|
</FormField>
|
|
<FormField label='Appear duration (sec)'>
|
|
<input
|
|
value={appearDurationSec}
|
|
onChange={(event) =>
|
|
onChange('appearDurationSec', event.target.value)
|
|
}
|
|
placeholder='Leave empty for none'
|
|
/>
|
|
</FormField>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default CommonSettingsSection;
|