125 lines
3.5 KiB
TypeScript
125 lines
3.5 KiB
TypeScript
/**
|
|
* TooltipSettingsSectionCompact
|
|
*
|
|
* Compact tooltip element settings for constructor sidebar.
|
|
* Icon, title, and text fields.
|
|
*/
|
|
|
|
import React from 'react';
|
|
import type { AssetOption } from '../../types/constructor';
|
|
import { addFallbackAssetOption } from '../../lib/constructorHelpers';
|
|
import { FONT_OPTIONS } from '../../lib/fonts';
|
|
|
|
interface TooltipSettingsSectionCompactProps {
|
|
iconUrl: string;
|
|
tooltipTitle: string;
|
|
tooltipText: string;
|
|
tooltipTitleFontFamily: string;
|
|
tooltipTextFontFamily: string;
|
|
iconAssetOptions: AssetOption[];
|
|
onChange: (prop: string, value: string) => void;
|
|
}
|
|
|
|
const TooltipSettingsSectionCompact: React.FC<
|
|
TooltipSettingsSectionCompactProps
|
|
> = ({
|
|
iconUrl,
|
|
tooltipTitle,
|
|
tooltipText,
|
|
tooltipTitleFontFamily,
|
|
tooltipTextFontFamily,
|
|
iconAssetOptions,
|
|
onChange,
|
|
}) => {
|
|
return (
|
|
<div className='space-y-2'>
|
|
<div>
|
|
<label className='mb-1 block text-[11px] font-semibold text-gray-600'>
|
|
Icon
|
|
</label>
|
|
<select
|
|
className='w-full rounded border border-gray-300 px-2 py-1 text-xs'
|
|
value={iconUrl}
|
|
onChange={(event) => onChange('iconUrl', event.target.value)}
|
|
>
|
|
<option value=''>Not selected</option>
|
|
{addFallbackAssetOption(
|
|
iconAssetOptions,
|
|
iconUrl,
|
|
`Current icon · ${iconUrl}`,
|
|
).map((option) => (
|
|
<option key={option.value} value={option.value}>
|
|
{option.label}
|
|
</option>
|
|
))}
|
|
</select>
|
|
</div>
|
|
|
|
<div>
|
|
<label className='mb-1 block text-[11px] font-semibold text-gray-600'>
|
|
Tooltip title
|
|
</label>
|
|
<input
|
|
className='w-full rounded border border-gray-300 px-2 py-1 text-xs'
|
|
value={tooltipTitle}
|
|
onChange={(event) => onChange('tooltipTitle', event.target.value)}
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<label className='mb-1 block text-[11px] font-semibold text-gray-600'>
|
|
Tooltip text
|
|
</label>
|
|
<textarea
|
|
className='w-full rounded border border-gray-300 px-2 py-1 text-xs'
|
|
rows={4}
|
|
value={tooltipText}
|
|
onChange={(event) => onChange('tooltipText', event.target.value)}
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<label className='mb-1 block text-[11px] font-semibold text-gray-600'>
|
|
Title font family
|
|
</label>
|
|
<select
|
|
className='w-full rounded border border-gray-300 px-2 py-1 text-xs'
|
|
value={tooltipTitleFontFamily}
|
|
onChange={(event) =>
|
|
onChange('tooltipTitleFontFamily', event.target.value)
|
|
}
|
|
>
|
|
<option value=''>Not set</option>
|
|
{FONT_OPTIONS.map((font) => (
|
|
<option key={font.key} value={font.key}>
|
|
{font.label}
|
|
</option>
|
|
))}
|
|
</select>
|
|
</div>
|
|
|
|
<div>
|
|
<label className='mb-1 block text-[11px] font-semibold text-gray-600'>
|
|
Text font family
|
|
</label>
|
|
<select
|
|
className='w-full rounded border border-gray-300 px-2 py-1 text-xs'
|
|
value={tooltipTextFontFamily}
|
|
onChange={(event) =>
|
|
onChange('tooltipTextFontFamily', event.target.value)
|
|
}
|
|
>
|
|
<option value=''>Not set</option>
|
|
{FONT_OPTIONS.map((font) => (
|
|
<option key={font.key} value={font.key}>
|
|
{font.label}
|
|
</option>
|
|
))}
|
|
</select>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default TooltipSettingsSectionCompact;
|