47 lines
No EOL
1.4 KiB
TypeScript
47 lines
No EOL
1.4 KiB
TypeScript
import React from 'react';
|
|
import { ComponentInfo } from '../../proxy/developerKit/componentInfo';
|
|
|
|
interface ComponentSelectorProps {
|
|
components: ComponentInfo[];
|
|
selectedComponentId: string | null;
|
|
onSelectComponent: (componentId: string | null) => void;
|
|
onRefresh: () => void;
|
|
}
|
|
|
|
const ComponentSelector: React.FC<ComponentSelectorProps> = ({
|
|
components,
|
|
selectedComponentId,
|
|
onSelectComponent,
|
|
onRefresh
|
|
}) => {
|
|
return (
|
|
<div className="p-4 bg-white border-b">
|
|
<div className="flex items-center justify-between mb-2">
|
|
<label className="block text-sm font-medium text-gray-700">
|
|
Select Component
|
|
</label>
|
|
<button
|
|
onClick={onRefresh}
|
|
className="px-3 py-1 bg-blue-500 text-white text-xs rounded hover:bg-blue-600 transition-colors"
|
|
title="Refresh component list"
|
|
>
|
|
Refresh
|
|
</button>
|
|
</div>
|
|
<select
|
|
value={selectedComponentId || ''}
|
|
onChange={(e) => onSelectComponent(e.target.value || null)}
|
|
className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
|
|
>
|
|
<option value="">No component selected</option>
|
|
{components.map(component => (
|
|
<option key={component.id} value={component.id}>
|
|
{component.type} - {component.id}
|
|
</option>
|
|
))}
|
|
</select>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default ComponentSelector; |