396ca25be4
Major improvements to WooNooW Page Editor system: Schema & Architecture: - Canonical section schema with unified sectionSchema.ts - Normalized feature-grid to use items (not features) - Standardized default values across all section types - Schema versioning with automatic migration on read Backend (PHP): - Enhanced PlaceholderRenderer with typed output contracts - Added fallback behavior for empty/invalid dynamic sources - Added caching support for post data resolution - New SchemaMigration class for backward compatibility - New Features class for feature flags - Enhanced PageSSR with full style support - Removed controller-level special-casing for related_posts Frontend (Admin SPA): - Updated CanvasRenderer with schema-aware transformation - Enhanced InspectorPanel with canonical schema metadata - Added new section renderers Frontend (Customer SPA): - New section components: BentoCategoryGrid, MarqueeBanner, ProductCarousel, ShoppableImage - Updated FeatureGridSection for items prop contract Testing: - Add PHP tests: SchemaMigrationTest, PlaceholderRendererTest, PageSSRTest - Add TypeScript tests: schema-integration, feature-grid-regression - Add parity tests for React vs SSR content matching - Add CI script: check-schema-drift.mjs - Add VERIFICATION_CHECKLIST.md Documentation: - RELEASE_NOTES-v1.0.md with full release notes - docs/PAGE_EDITOR_SECTION_SCHEMA_V1.md - docs/PAGE_EDITOR_SSR_COVERAGE_AUDIT.md
57 lines
1.8 KiB
TypeScript
57 lines
1.8 KiB
TypeScript
import React from 'react';
|
|
import { AlertTriangle, RefreshCw } from 'lucide-react';
|
|
import { __ } from '@/lib/i18n';
|
|
|
|
interface ErrorCardProps {
|
|
title?: string;
|
|
message?: string;
|
|
onRetry?: () => void;
|
|
}
|
|
|
|
/**
|
|
* ErrorCard component for displaying page load errors
|
|
* Use this when a query fails to load data
|
|
*/
|
|
export function ErrorCard({
|
|
title = __('Failed to load data'),
|
|
message,
|
|
onRetry
|
|
}: ErrorCardProps) {
|
|
return (
|
|
<div className="flex items-center justify-center p-8">
|
|
<div className="max-w-md w-full bg-red-50 dark:bg-red-950/50 border border-red-200 dark:border-red-800 rounded-lg p-6">
|
|
<div className="flex items-start gap-3">
|
|
<AlertTriangle className="w-5 h-5 text-red-600 dark:text-red-400 flex-shrink-0 mt-0.5" />
|
|
<div className="flex-1">
|
|
<h3 className="font-medium text-red-900 dark:text-red-200">{title}</h3>
|
|
{message && (
|
|
<p className="text-sm text-red-700 dark:text-red-300 mt-1">{message}</p>
|
|
)}
|
|
{onRetry && (
|
|
<button
|
|
onClick={onRetry}
|
|
className="mt-3 inline-flex items-center gap-2 text-sm font-medium text-red-900 dark:text-red-200 hover:text-red-700 dark:hover:text-red-100 transition-colors"
|
|
>
|
|
<RefreshCw className="w-4 h-4" />
|
|
{__('Try again')}
|
|
</button>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
/**
|
|
* Inline error message for smaller errors
|
|
*/
|
|
export function ErrorMessage({ message }: { message: string }) {
|
|
return (
|
|
<div className="flex items-center gap-2 text-sm text-red-600 dark:text-red-400 bg-red-50 dark:bg-red-950/50 border border-red-200 dark:border-red-800 rounded-md p-3">
|
|
<AlertTriangle className="w-4 h-4 flex-shrink-0" />
|
|
<span>{message}</span>
|
|
</div>
|
|
);
|
|
}
|