57 lines
1.6 KiB
TypeScript
57 lines
1.6 KiB
TypeScript
|
import React from 'react'
|
|||
|
|
import DynamicRenderer from './DynamicRenderer'
|
|||
|
|
import { useComponents } from '@/contexts/ComponentContext'
|
|||
|
|
import { Loading } from '../shared'
|
|||
|
|
|
|||
|
|
export interface ComponentPreviewProps {
|
|||
|
|
componentName?: string
|
|||
|
|
className?: string
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const ComponentPreview: React.FC<ComponentPreviewProps> = ({ componentName, className = '' }) => {
|
|||
|
|
const { components, loading } = useComponents()
|
|||
|
|
|
|||
|
|
if (!componentName) {
|
|||
|
|
return <div className="text-sm text-gray-500">Bileşen ismi yok.</div>
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// components dizisinin varlığını kontrol et
|
|||
|
|
if (loading || !components || !Array.isArray(components)) {
|
|||
|
|
return (
|
|||
|
|
<div className="flex items-center justify-center min-h-screen bg-gray-50">
|
|||
|
|
<div className="text-center">
|
|||
|
|
<Loading loading={true} />
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// Belirtilen bileşeni bul
|
|||
|
|
const component = components.find((c) => c.name === componentName && c.isActive)
|
|||
|
|
|
|||
|
|
let dependencies: string[] = []
|
|||
|
|
|
|||
|
|
if (component?.dependencies) {
|
|||
|
|
try {
|
|||
|
|
// JSON string mi?
|
|||
|
|
if (component.dependencies.startsWith('[')) {
|
|||
|
|
dependencies = JSON.parse(component.dependencies)
|
|||
|
|
} else {
|
|||
|
|
// Virgülle ayrılmış düz metin
|
|||
|
|
dependencies = component.dependencies.split(',').map((d) => d.trim())
|
|||
|
|
}
|
|||
|
|
} catch (err) {
|
|||
|
|
console.error('Dependency parse hatası:', err)
|
|||
|
|
dependencies = []
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<div className={`bg-white ${className}`}>
|
|||
|
|
<DynamicRenderer componentName={componentName} dependencies={dependencies} />
|
|||
|
|
</div>
|
|||
|
|
)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
export default ComponentPreview
|