@erosnicolau/animated-text/dist/demo/components/DemoHeader/index.js

Advanced React animated text component with comprehensive animation effects

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
const DemoHeader = ({ activeTab, onTabChange }) => {
    return (_jsx("div", { className: "bg-neutral-100 text-neutral-900 py-16 mb-16", children: _jsxs("div", { className: "container mx-auto px-4 text-center", children: [_jsx("h1", { className: "text-3xl font-bold mb-6", children: "AnimatedText Demo" }), _jsx("p", { className: "text-lg text-neutral-600 mb-8 max-w-3xl mx-auto", children: "Comprehensive showcase of the enhanced AnimatedText component featuring 5 animation types, 43+ effects (predefined + fully parameterized effects), flexible timing controls, built-in virtualization, and full accessibility support." }), _jsx("div", { className: "mb-8 p-6 bg-white rounded-lg border border-gray-200 max-w-4xl mx-auto", children: _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-6", children: [_jsxs("div", { className: "text-center", children: [_jsx("h3", { className: "text-lg font-semibold text-gray-800 mb-2", children: "\uD83C\uDFAF Real-time FPS Monitoring" }), _jsx("p", { className: "text-sm text-gray-600", children: "Continuous frame rate tracking using requestAnimationFrame. When average FPS drops below 60 for 2+ seconds, automatically activates simplified animations globally with 10-second auto-recovery." })] }), _jsxs("div", { className: "text-center", children: [_jsx("h3", { className: "text-lg font-semibold text-gray-800 mb-2", children: "\uD83D\uDE80 Smart Virtualization" }), _jsx("p", { className: "text-sm text-gray-600", children: "Components automatically render placeholder when off-screen (100px margin) to optimize performance. No animation computations for invisible elements, with seamless restoration when scrolled into view." })] })] }) }), _jsxs("div", { className: "grid grid-cols-2 md:grid-cols-4 gap-4 max-w-2xl mx-auto text-sm mb-8", children: [_jsxs("button", { onClick: () => onTabChange('types'), className: `p-4 rounded-lg border transition-all duration-200 ${activeTab === 'types'
                                ? 'bg-blue-500 text-white border-blue-600 shadow-lg transform scale-105'
                                : 'bg-white text-neutral-600 border-gray-200 hover:bg-blue-50 hover:border-blue-300'}`, children: [_jsx("div", { className: "font-semibold", children: "5" }), _jsx("div", { className: activeTab === 'types' ? 'text-blue-100' : 'text-neutral-600', children: "Animation Types" })] }), _jsxs("button", { onClick: () => onTabChange('effects'), className: `p-4 rounded-lg border transition-all duration-200 ${activeTab === 'effects'
                                ? 'bg-orange-500 text-white border-orange-600 shadow-lg transform scale-105'
                                : 'bg-white text-neutral-600 border-gray-200 hover:bg-orange-50 hover:border-orange-300'}`, children: [_jsx("div", { className: "font-semibold", children: "43+" }), _jsx("div", { className: activeTab === 'effects' ? 'text-orange-100' : 'text-neutral-600', children: "Effects" })] }), _jsxs("button", { onClick: () => onTabChange('easing'), className: `p-4 rounded-lg border transition-all duration-200 ${activeTab === 'easing'
                                ? 'bg-green-500 text-white border-green-600 shadow-lg transform scale-105'
                                : 'bg-white text-neutral-600 border-gray-200 hover:bg-green-50 hover:border-green-300'}`, children: [_jsx("div", { className: "font-semibold", children: "5" }), _jsx("div", { className: activeTab === 'easing' ? 'text-green-100' : 'text-neutral-600', children: "Easing Options" })] }), _jsxs("div", { className: "bg-purple-50 p-3 rounded border border-purple-200 opacity-80", children: [_jsx("div", { className: "font-semibold text-purple-600", children: "\u221E" }), _jsx("div", { className: "text-purple-500 text-xs", children: "Combinations" })] })] })] }) }));
};
export default DemoHeader;