48 lines
1.6 KiB
TypeScript
48 lines
1.6 KiB
TypeScript
import React, { useMemo } from 'react'
|
||
import DynamicRenderer from './DynamicRenderer'
|
||
import { useComponents } from '@/contexts/ComponentContext'
|
||
import { parseComponentDependencies } from '@/contexts/componentRuntime'
|
||
import { Loading } from '../shared'
|
||
import { useLocalization } from '@/utils/hooks/useLocalization'
|
||
|
||
export interface ComponentPreviewProps {
|
||
componentName?: string
|
||
className?: string
|
||
}
|
||
|
||
const ComponentPreview: React.FC<ComponentPreviewProps> = ({ componentName, className = '' }) => {
|
||
const { translate } = useLocalization()
|
||
const { components, loading } = useComponents()
|
||
|
||
// Referans olarak sabit tutulmalı: DynamicRenderer bunu effect bağımlılığı olarak kullanıyor.
|
||
const dependencies = useMemo(() => {
|
||
const component = components?.find((item) => item.name === componentName && item.isActive)
|
||
return parseComponentDependencies(component?.dependencies)
|
||
}, [components, componentName])
|
||
|
||
if (!componentName) {
|
||
return (
|
||
<div className="text-sm text-gray-500 dark:text-gray-400">
|
||
{translate('::App.DeveloperKit.ComponentPreview.NoComponentName')}
|
||
</div>
|
||
)
|
||
}
|
||
|
||
if (loading || !Array.isArray(components)) {
|
||
return (
|
||
<div className="flex items-center justify-center min-h-screen bg-gray-50 dark:bg-gray-900">
|
||
<div className="text-center">
|
||
<Loading loading={true} />
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
return (
|
||
<div className={`bg-white dark:bg-gray-900 ${className}`}>
|
||
<DynamicRenderer componentName={componentName} dependencies={dependencies} />
|
||
</div>
|
||
)
|
||
}
|
||
|
||
export default ComponentPreview
|