78 lines
1.9 KiB
TypeScript
78 lines
1.9 KiB
TypeScript
import React from 'react';
|
|
import { UiElementItem } from './types';
|
|
|
|
const ElementPreview = ({ item }: { item: UiElementItem }) => {
|
|
const commonStyle: React.CSSProperties = {
|
|
color: item.settings.style.color,
|
|
backgroundColor: item.settings.style.backgroundColor,
|
|
border: item.settings.style.border,
|
|
};
|
|
|
|
if (item.elementType === 'nav_button') {
|
|
return (
|
|
<button
|
|
className='rounded px-3 py-1 text-xs font-semibold'
|
|
style={commonStyle}
|
|
>
|
|
{item.settings.content.text || 'Open'}
|
|
</button>
|
|
);
|
|
}
|
|
|
|
if (item.elementType === 'tooltip') {
|
|
return (
|
|
<div
|
|
className='inline-block rounded px-2 py-1 text-xs'
|
|
style={commonStyle}
|
|
>
|
|
{item.settings.content.text || 'Tooltip'}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
if (item.elementType === 'gallery' || item.elementType === 'carousel') {
|
|
return (
|
|
<div className='flex gap-1'>
|
|
<div className='h-6 w-6 rounded' style={commonStyle} />
|
|
<div className='h-6 w-6 rounded opacity-80' style={commonStyle} />
|
|
<div className='h-6 w-6 rounded opacity-60' style={commonStyle} />
|
|
</div>
|
|
);
|
|
}
|
|
|
|
if (item.elementType === 'video_player') {
|
|
return (
|
|
<div className='rounded px-3 py-1 text-xs' style={commonStyle}>
|
|
▶ {item.settings.content.title || 'Video'}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
if (item.elementType === 'logo') {
|
|
return (
|
|
<div
|
|
className='rounded px-2 py-1 text-xs font-semibold'
|
|
style={commonStyle}
|
|
>
|
|
{item.settings.content.text || 'LOGO'}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
if (item.elementType === 'popup') {
|
|
return (
|
|
<div className='rounded px-2 py-1 text-xs' style={commonStyle}>
|
|
□ {item.settings.content.title || 'Popup'}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className='rounded px-2 py-1 text-xs' style={commonStyle}>
|
|
{item.settings.content.text || item.name}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default ElementPreview;
|