69 lines
2.0 KiB
TypeScript
69 lines
2.0 KiB
TypeScript
/**
|
|
* CommonSettingsSectionCompact
|
|
*
|
|
* Compact version of common settings fields for constructor sidebar.
|
|
* Label and appear timing in a space-efficient layout.
|
|
*/
|
|
|
|
import React from 'react';
|
|
import type { CommonSettingsSectionProps } from './types';
|
|
|
|
const CommonSettingsSectionCompact: React.FC<CommonSettingsSectionProps> = ({
|
|
label,
|
|
appearDelaySec,
|
|
appearDurationSec,
|
|
onChange,
|
|
showLabel = true,
|
|
}) => {
|
|
return (
|
|
<div className='mb-1.5 space-y-1.5'>
|
|
{showLabel && (
|
|
<div>
|
|
<label className='mb-0.5 block text-[10px] font-semibold text-white/80'>
|
|
Label
|
|
</label>
|
|
<input
|
|
className='w-full rounded border border-gray-300 px-1.5 py-0.5 text-[11px]'
|
|
value={label}
|
|
onChange={(event) => onChange('label', event.target.value)}
|
|
/>
|
|
</div>
|
|
)}
|
|
<div>
|
|
<label className='mb-0.5 block text-[10px] font-semibold text-white/80'>
|
|
Appear delay (sec)
|
|
</label>
|
|
<input
|
|
className='w-full rounded border border-gray-300 px-1.5 py-0.5 text-[11px]'
|
|
type='number'
|
|
min='0'
|
|
step='0.1'
|
|
value={appearDelaySec ?? 0}
|
|
onChange={(event) => onChange('appearDelaySec', event.target.value)}
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label className='mb-0.5 block text-[10px] font-semibold text-white/80'>
|
|
Appear duration (sec)
|
|
</label>
|
|
<input
|
|
className='w-full rounded border border-gray-300 px-1.5 py-0.5 text-[11px]'
|
|
type='number'
|
|
min='0.1'
|
|
step='0.1'
|
|
placeholder='Unlimited'
|
|
value={appearDurationSec ?? ''}
|
|
onChange={(event) =>
|
|
onChange('appearDurationSec', event.target.value)
|
|
}
|
|
/>
|
|
<p className='mt-0.5 text-[10px] text-white/60'>
|
|
Leave empty for unlimited.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default CommonSettingsSectionCompact;
|