74 lines
1.9 KiB
TypeScript
74 lines
1.9 KiB
TypeScript
/**
|
|
* BackgroundSettingsEditor Component
|
|
*
|
|
* Compact editor for background image, video, or audio settings.
|
|
* Used in the element editor panel for background menu items.
|
|
*/
|
|
|
|
import React from 'react';
|
|
import type { AssetOption } from './types';
|
|
import { addFallbackAssetOption } from '../../lib/constructorHelpers';
|
|
|
|
interface BackgroundSettingsEditorProps {
|
|
type: 'image' | 'video' | 'audio';
|
|
value: string;
|
|
options: AssetOption[];
|
|
durationNote?: string;
|
|
onChange: (value: string) => void;
|
|
onClearImage?: () => void;
|
|
}
|
|
|
|
const LABELS: Record<string, string> = {
|
|
image: 'Background image',
|
|
video: 'Background video',
|
|
audio: 'Background audio (loop)',
|
|
};
|
|
|
|
const BackgroundSettingsEditor: React.FC<BackgroundSettingsEditorProps> = ({
|
|
type,
|
|
value,
|
|
options,
|
|
durationNote,
|
|
onChange,
|
|
onClearImage,
|
|
}) => {
|
|
const label = LABELS[type] || 'Background';
|
|
const selectOptions = addFallbackAssetOption(
|
|
options,
|
|
value,
|
|
`Current ${type} · ${value}`,
|
|
);
|
|
|
|
return (
|
|
<div>
|
|
<label className='mb-1 block text-[11px] font-semibold text-gray-600'>
|
|
{label}
|
|
</label>
|
|
<select
|
|
className='w-full rounded border border-gray-300 px-2 py-1 text-xs'
|
|
value={value}
|
|
onChange={(event) => {
|
|
const nextValue = event.target.value;
|
|
onChange(nextValue);
|
|
// For image, if switching to a new image, clear video (handled externally)
|
|
if (type === 'image' && nextValue && onClearImage) {
|
|
onClearImage();
|
|
}
|
|
}}
|
|
>
|
|
<option value=''>None</option>
|
|
{selectOptions.map((option) => (
|
|
<option key={option.value} value={option.value}>
|
|
{option.label}
|
|
</option>
|
|
))}
|
|
</select>
|
|
{durationNote && (
|
|
<p className='mt-1 text-[11px] text-gray-500'>{durationNote}</p>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default BackgroundSettingsEditor;
|