65 lines
1.7 KiB
TypeScript
65 lines
1.7 KiB
TypeScript
/**
|
|
* ElementSettingsTabs
|
|
*
|
|
* Tab navigation for element settings.
|
|
* Provides General Settings and CSS Styles tabs.
|
|
*/
|
|
|
|
import React from 'react';
|
|
import type { ElementSettingsTabsProps } from './types';
|
|
|
|
const ElementSettingsTabs: React.FC<ElementSettingsTabsProps> = ({
|
|
activeTab,
|
|
onTabChange,
|
|
tabs,
|
|
}) => {
|
|
return (
|
|
<div className='mb-4 inline-flex overflow-hidden rounded border border-gray-300 dark:border-dark-700'>
|
|
{tabs.map((tab) => (
|
|
<button
|
|
key={tab.id}
|
|
type='button'
|
|
className={`px-4 py-2 text-sm font-medium transition-colors ${
|
|
activeTab === tab.id
|
|
? 'bg-blue-600 text-white'
|
|
: 'bg-white text-gray-700 hover:bg-gray-50 dark:bg-dark-800 dark:text-gray-200 dark:hover:bg-dark-700'
|
|
}`}
|
|
onClick={() => onTabChange(tab.id)}
|
|
>
|
|
{tab.label}
|
|
</button>
|
|
))}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
/**
|
|
* Compact version for constructor sidebar
|
|
*/
|
|
export const ElementSettingsTabsCompact: React.FC<ElementSettingsTabsProps> = ({
|
|
activeTab,
|
|
onTabChange,
|
|
tabs,
|
|
}) => {
|
|
return (
|
|
<div className='mb-3 inline-flex w-full overflow-hidden rounded border border-gray-300'>
|
|
{tabs.map((tab) => (
|
|
<button
|
|
key={tab.id}
|
|
type='button'
|
|
className={`flex-1 px-2 py-1.5 text-[11px] font-semibold transition-colors ${
|
|
activeTab === tab.id
|
|
? 'bg-blue-600 text-white'
|
|
: 'bg-white text-gray-700 hover:bg-gray-50'
|
|
}`}
|
|
onClick={() => onTabChange(tab.id)}
|
|
>
|
|
{tab.label}
|
|
</button>
|
|
))}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default ElementSettingsTabs;
|