140 lines
4.1 KiB
TypeScript
140 lines
4.1 KiB
TypeScript
/**
|
|
* DescriptionSettingsSection
|
|
*
|
|
* Settings for description element type.
|
|
*/
|
|
|
|
import React from 'react';
|
|
import FormField from '../FormField';
|
|
import type { DescriptionSettingsSectionProps } from './types';
|
|
|
|
const DescriptionSettingsSection: React.FC<DescriptionSettingsSectionProps> = ({
|
|
iconUrl,
|
|
descriptionTitle,
|
|
descriptionText,
|
|
descriptionTitleFontSize,
|
|
descriptionTextFontSize,
|
|
descriptionTitleFontFamily,
|
|
descriptionTextFontFamily,
|
|
descriptionTitleColor,
|
|
descriptionTextColor,
|
|
descriptionBackgroundColor,
|
|
onChange,
|
|
context,
|
|
iconAssetOptions = [],
|
|
}) => {
|
|
const isConstructor = context === 'constructor';
|
|
|
|
return (
|
|
<div className='space-y-4'>
|
|
{isConstructor ? (
|
|
<FormField label='Icon'>
|
|
<select
|
|
value={iconUrl}
|
|
onChange={(event) => onChange('iconUrl', event.target.value)}
|
|
>
|
|
<option value=''>Not selected</option>
|
|
{iconAssetOptions.map((option) => (
|
|
<option key={option.value} value={option.value}>
|
|
{option.label}
|
|
</option>
|
|
))}
|
|
</select>
|
|
</FormField>
|
|
) : (
|
|
<FormField label='Icon URL'>
|
|
<input
|
|
value={iconUrl}
|
|
onChange={(event) => onChange('iconUrl', event.target.value)}
|
|
/>
|
|
</FormField>
|
|
)}
|
|
|
|
<FormField label='Description title'>
|
|
<input
|
|
value={descriptionTitle}
|
|
onChange={(event) => onChange('descriptionTitle', event.target.value)}
|
|
/>
|
|
</FormField>
|
|
|
|
<FormField label='Description text' hasTextareaHeight>
|
|
<textarea
|
|
value={descriptionText}
|
|
onChange={(event) => onChange('descriptionText', event.target.value)}
|
|
className='h-28 w-full rounded border border-gray-300 p-2 dark:border-dark-700 dark:bg-dark-900'
|
|
/>
|
|
</FormField>
|
|
|
|
<div className='grid gap-3 md:grid-cols-2'>
|
|
<FormField label='Title font size'>
|
|
<input
|
|
value={descriptionTitleFontSize}
|
|
onChange={(event) =>
|
|
onChange('descriptionTitleFontSize', event.target.value)
|
|
}
|
|
placeholder='e.g. 48px'
|
|
/>
|
|
</FormField>
|
|
<FormField label='Text font size'>
|
|
<input
|
|
value={descriptionTextFontSize}
|
|
onChange={(event) =>
|
|
onChange('descriptionTextFontSize', event.target.value)
|
|
}
|
|
placeholder='e.g. 36px'
|
|
/>
|
|
</FormField>
|
|
<FormField label='Title font family'>
|
|
<input
|
|
value={descriptionTitleFontFamily}
|
|
onChange={(event) =>
|
|
onChange('descriptionTitleFontFamily', event.target.value)
|
|
}
|
|
placeholder='e.g. Arial, sans-serif'
|
|
/>
|
|
</FormField>
|
|
<FormField label='Text font family'>
|
|
<input
|
|
value={descriptionTextFontFamily}
|
|
onChange={(event) =>
|
|
onChange('descriptionTextFontFamily', event.target.value)
|
|
}
|
|
placeholder='e.g. Arial, sans-serif'
|
|
/>
|
|
</FormField>
|
|
<FormField label='Title color'>
|
|
<input
|
|
type='color'
|
|
value={descriptionTitleColor || '#000000'}
|
|
onChange={(event) =>
|
|
onChange('descriptionTitleColor', event.target.value)
|
|
}
|
|
className='h-10 w-full'
|
|
/>
|
|
</FormField>
|
|
<FormField label='Text color'>
|
|
<input
|
|
type='color'
|
|
value={descriptionTextColor || '#4B5563'}
|
|
onChange={(event) =>
|
|
onChange('descriptionTextColor', event.target.value)
|
|
}
|
|
className='h-10 w-full'
|
|
/>
|
|
</FormField>
|
|
<FormField label='Background color'>
|
|
<input
|
|
value={descriptionBackgroundColor}
|
|
onChange={(event) =>
|
|
onChange('descriptionBackgroundColor', event.target.value)
|
|
}
|
|
placeholder='e.g. transparent, #ffffff'
|
|
/>
|
|
</FormField>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default DescriptionSettingsSection;
|